Go to file

jorge 98843049a0 better README content to understand howto build scss needs editing		2021-07-29 11:28:11 +02:00
asset	ul margins collection card	2021-07-28 19:17:35 +02:00
config	changed version number	2021-07-05 12:47:23 +02:00
view	added default hero image for single collection in caso non pressent	2021-07-28 17:51:53 +02:00
.gitattributes	css after merge with fix/button-sizes	2021-07-28 13:10:35 +02:00
.gitignore	overrides list-of-sites block	2021-05-24 18:13:23 +02:00
CHANGELOG.md	mods for a cleaner theme	2021-06-09 16:54:24 +02:00
README.md	better README content to understand howto build scss needs editing	2021-07-29 11:28:11 +02:00
gulpfile.js	mods in gulpfile so `npm start` will track all .scss files inside `assets/scss`	2021-07-15 17:36:47 +02:00
index.html	first commit	2021-04-25 09:49:47 +02:00
package-lock.json	changed version number	2021-07-05 12:47:23 +02:00
package.json	changed version number	2021-07-05 12:47:23 +02:00
theme.jpg	mods for a cleaner theme	2021-06-09 16:54:24 +02:00

README.md

Arc-hive omeka theme

This is the Arc-hive development theme based on Omeka S theme based on [Omeka Foundation S theme].

dev site

https://dev-archive.hangar.org/

designs omeka

We are trying to accomplish this design for the OmekaS system

https://www.figma.com/file/HruKRRVPgfAgSgs8HihI2w/ARCHIVE-WEB-04?node-id=274%3A0

Installation

For basic out-of-the-box use of the theme, follow the Omeka S User Manual instructions for installing themes.

cd themes
git clone https://git.hangar.org/arcHIVE-tech/Arc-hive-omeka-theme.git archive
cd archive
git checkout arc-hive-v01
chown -R www-data:www-data ./

to update changes

cd themes/archive
git pull
chown -R www-data:www-data ./

Arc-hive theme notes

For more advanced use, such as customizing the theme with Sass, you'll need to install the tools with NodeJS (0.12 or greater). Navigate to your theme directory and run npm install.

Theme Configuration

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.
- 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: it is set up by the arc-hive project needs and must be modified in the 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.
- Toggle (default: grid): Site visitors can choose to display the browse views as grids or lists, and grids are the default.
- Toggle (default: list): Site visitors can choose to display the browse views as grids or lists, and lists are the default.
Layout for Show Pages: Resource metadata can show display as stacked with properties as headings above their values, or inline with properties as headings inline with their values.

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>
      <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

Sass Tasks

Run these commands within the theme's root directory.

npm start: While this task runs, it watches for changes to sass files and recompiles the CSS.
gulp sass: This is the one-off task for compiling the current Sass/CSS.

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.

~~/asset/sass/seafoam.scss~~

We have all the scss files inside /assets/scss/ directory, so when running npm start or gulp scsswill generate the needed /assets/css/default.css

The file structure is as follows:

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 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.

ZURB Foundation's default style rules are all managed in _foundation-core.scss. All style rules specific to Omeka S are contained within _omeka.scss.

After all those imports come all style rules specific to the theme.