From 98843049a0952ffa2e38713177933779068238a6 Mon Sep 17 00:00:00 2001 From: jorge-hangar Date: Thu, 29 Jul 2021 11:28:11 +0200 Subject: [PATCH] better README content to understand howto build scss needs editing --- README.md | 108 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 75 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index aadb5a9..e2b4e6f 100644 --- a/README.md +++ b/README.md @@ -38,16 +38,16 @@ For more advanced use, such as customizing the theme with Sass, you'll need to i ## Theme Configuration -* **Stylesheet**: The theme provides 4 style options. - * **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). - * **Revolution** aims to capture the feel of old documents and juxtaposes it with a bright red accent. It includes a textured paper background image. - * **Sea Foam** offers a clean, friendly look with a teal palette. - * **Inkwell** features a high contrast serif family for its typography, as well as sunny yellow accents. -* **Navigation layouts**: Global navigation can display as a **horizontal top bar with optional dropdown menus** or a **left vertical column**. +* **Stylesheet**: we provide de default **arc-hive** `css` file The theme provides 4 style options. + * **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). + * **Revolution** aims to capture the feel of old documents and juxtaposes it with a bright red accent. It includes a textured paper background image. + * **Sea Foam** offers a clean, friendly look with a teal palette. + * **Inkwell** features a high contrast serif family for its typography, as well as sunny yellow accents. +* **Navigation layouts**: Global navigation can displays as a **horizontal top bar** **with optional dropdown menus** or a **left vertical column**. * **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. * **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 Control what appears in the footer. This field takes HTML markup. * **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. * **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 +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 + + + STANDARD HEAD SECTION + + + +
+
+ MAIN SITE TITLE +
+ +
+
+ HERO for example +
+
+
+ MAIN ARTICLE +
+ PARTS OF THE MAIN ARTICLE + SHOULD BE IN SECTIONS +
+
+ +
+
+ GENERAL FOOTER CONTENT + +
+ + + + +``` + + ### CSS classes 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 -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. +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. -**/asset/sass/seafoam.scss** +**/asset/sass/seafoam.scss** +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'; - -@import 'globals-default'; -@import 'globals-seafoam'; -@import 'settings'; - -// Sea Foam Settings - -$topbar-background: $primary-color; - -$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; -} +assets/scss/ + components/ <---- such as accordion, buttons, cards, forms, tables, etc... + global/ <---- branding, colors, omeka, wordpress, typography,... + modules/ <---- content,footer,header,navigation,... + templates/ <---- front, kitchen-sink,... + _foundation-core.scss <---- select wich foundation to include + _settings.scss <---- variables applied all round scss + default.scss <---- components to be processed by npm/gulp sass/scss + editor.scss <---- parts regarding wordpress 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 `_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`.