arcHIVE-tech/Arc-hive-omeka-theme
arcHIVE-tech
/
Arc-hive-omeka-theme
4
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

better README content to understand howto build scss needs editing

This commit is contained in:
jorge 2021-07-29 11:28:11 +02:00
parent 59bc76ac9f
commit 98843049a0
1 changed files with 75 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
README.md
View File

@ -38,16 +38,16 @@ For more advanced use, such as customizing the theme with Sass, you'll need to i
## Theme Configuration ## Theme Configuration
* **Stylesheet**: The theme provides 4 style options. * **Stylesheet**: we provide de default **arc-hive** `css` file <del>The theme provides 4 style options.</del>
* **Default** uses ZURB Foundation's default styles for prototyping, which are all viewable in their documentation under the [Kitchen Sink](https://get.foundation/sites/docs/kitchen-sink.html). * <del>**Default** uses ZURB Foundation's default styles for prototyping, which are all viewable in their documentation under the [Kitchen Sink](https://get.foundation/sites/docs/kitchen-sink.html).</del>
* **Revolution** aims to capture the feel of old documents and juxtaposes it with a bright red accent. It includes a textured paper background image. * <del>**Revolution** aims to capture the feel of old documents and juxtaposes it with a bright red accent. It includes a textured paper background image.</del>
* **Sea Foam** offers a clean, friendly look with a teal palette. * <del>**Sea Foam** offers a clean, friendly look with a teal palette.</del>
* **Inkwell** features a high contrast serif family for its typography, as well as sunny yellow accents. * <del>**Inkwell** features a high contrast serif family for its typography, as well as sunny yellow accents.</del>
* **Navigation layouts**: Global navigation can display as a **horizontal top bar with optional dropdown menus** or a **left vertical column**. * **Navigation layouts**: Global navigation <del>can</del> displays as a **horizontal top bar** <del>**with optional dropdown menus** or a **left vertical column**</del>.
* **Show Top Navigation Child Pages**: Toggle display of child pages within the main navigation. * **Show Top Navigation Child Pages**: Toggle display of child pages within the main navigation.
* **Top Navigation Depth**: If the main navigation is set to display child pages, this setting controls how many navigation levels to display. Setting this to '0' shows all levels. * **Top Navigation Depth**: If the main navigation is set to display child pages, this setting controls how many navigation levels to display. Setting this to '0' shows all levels.
* **Logo**: Upload an image asset to use as a logo in place of a text site title. * **Logo**: Upload an image asset to use as a logo in place of a text site title.
* **Footer Content**: Control what appears in the footer. This field takes HTML markup. * **Footer Content**: it is set up by the `arc-hive` project needs and must be modified in the [`view/common/footer-archive.phtml`](https://git.hangar.org/arcHIVE-tech/Arc-hive-omeka-theme/src/branch/fix/20210728/view/common/footer-archive.phtml) file <del>Control what appears in the footer. This field takes HTML markup.</del>
* **Layout for Browse Pages**: Select how to display items within their "browse" views. * **Layout for Browse Pages**: Select how to display items within their "browse" views.
* **Grid**: Items are organized into rows and columns. This is recommended for items that prominently feature images. * **Grid**: Items are organized into rows and columns. This is recommended for items that prominently feature images.
* **List**: Items are stacked into a single column. * **List**: Items are stacked into a single column.
@ -57,6 +57,59 @@ For more advanced use, such as customizing the theme with Sass, you'll need to i
## Customizing the Theme ## Customizing the Theme
The whole is being moved towards a more semantic solution such as, having the templates independendt from the **Foundation** `css` or `js` though being used it to preprocess the scss.
This way the `css` is independent from the framework and can be exported, has a semantic meaning and can be processed by any means.
most site follows:
```html
<html>
<head>
STANDARD HEAD SECTION
</head>
<body>
<content>
<header>
<main>
MAIN SITE TITLE
</main>
<nav>
TOP MENU
</nav>
</header>
<section>
HERO for example
</section>
<main>
<article>
MAIN ARTICLE
<section>
PARTS OF THE MAIN ARTICLE
SHOULD BE IN SECTIONS
</section>
</article>
<aside>
OTHER CONTENT SORROUNDING MAIN ARTICLE
<nav>
SUCH AS NAVIGATION AND SEARCH
</nav>
</aside>
</main>
<footer>
GENERAL FOOTER CONTENT
<nav>
FOOTER NAVIGATION
</nav>
</footer>
</content>
<script>
JS SCRIPTS BEST PRACTICES AT BOTTOM
</script>
</body>
</html>
```
### CSS classes ### CSS classes
Arc-hive projecct css classes will start with `arc-` as ex: `arc-my-class-name` Arc-hive projecct css classes will start with `arc-` as ex: `arc-my-class-name`
@ -71,37 +124,26 @@ Run these commands within the theme's root directory.
### Sass File Structure ### Sass File Structure
Foundation S comes with the Default theme, as well as 3 other customized stylesheets that were built on top of Default. The "Sea Foam" theme has the fewest overrides and is thus the easiest reference for a custom theme model. <del>Foundation S comes with the Default theme, as well as 3 other customized stylesheets that were built on top of Default. The "Sea Foam" theme has the fewest overrides and is thus the easiest reference for a custom theme model.</del>
**/asset/sass/seafoam.scss** <del>**/asset/sass/seafoam.scss**</del>
We have all the scss files inside **/assets/scss/** directory, so when running `npm start` or `gulp scss`will generate the needed `/assets/css/default.css`
The file structure is as follows:
``` ```
@charset 'utf-8'; assets/scss/
components/ <---- such as accordion, buttons, cards, forms, tables, etc...
@import 'globals-default'; global/ <---- branding, colors, omeka, wordpress, typography,...
@import 'globals-seafoam'; modules/ <---- content,footer,header,navigation,...
@import 'settings'; templates/ <---- front, kitchen-sink,...
_foundation-core.scss <---- select wich foundation to include
// Sea Foam Settings _settings.scss <---- variables applied all round scss
default.scss <---- components to be processed by npm/gulp sass/scss
$topbar-background: $primary-color; editor.scss <---- parts regarding wordpress scss
$thumbnail-border: 4px solid $secondary-color;
$thumbnail-shadow: none;
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$button-background: $secondary-color;
$button-color: $primary-color;
@import 'foundation-core';
@import 'omeka';
header a {
color: $white;
}
``` ```
Much of the customizability within the theme lies in managing its settings variables. ZURB Foundation's default global variables from their original `_settings.scss` all sit in `_globals-default.scss`. Many of these variables are used throughout the rest of `_settings.scss`, so it was necessary to separate them out into their own file if the theme writer wants to set their own global variables. Here all the overrides live in `_globals-seafoam.scss`, and so all overridden values will be appropriately updated for use throughout the rest of `_settings.scss`. Much of the customizability within the theme lies in managing its settings variables. ZURB Foundation's default global variables from their original `_settings.scss` all sit in `default.scss`.
Any non-global setting variable overrides should come after the import for `_settings.scss` and before their usagee in the rule files, `_foundation-core.scss`, and `_omeka.scss`. Any non-global setting variable overrides should come after the import for `_settings.scss` and before their usagee in the rule files, `_foundation-core.scss`, and `_omeka.scss`.