better README content to understand howto build scss needs editing

2021-07-29 11:28:11 +02:00
1 changed files with 75 additions and 33 deletions
--- 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.
+* **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.
 * **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 <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.
  * **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
   <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
 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.
+<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`.