Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 2 Next »

This document describes requirements for tools, style structure, and how should be built and support the website design.

Tools:

  • Design
    • Figma
  • Code Tools:
    • SCSS
    • Webpack
    • HTML template preprocessor (like blade etc.) 

Good WordPress boilerplate theme with correct structure https://roots.io/sage-9/

Design methodology: Aatomic Design Methodology

Design

Major points:

  • research current website, define week places and goals
  • build a prototype in figma or in another prototype builder
  • build base styles and pages
    • A designer must provide and support style guide page where will be described common elements, scaffolding, base widgets, and feature pages should be based on this style guide, old pages must mutate views with a style guide.
    • After implementation design and style guide in figma, the developer should realize the style guide in code. It means The website must have the protected page where will be rendered all widgets, buttons, etc. with description, MAN. (Good example it is Bootstrap documentation).

Style folder structure based


themes/current_theme/                            # → Root of your Sage based theme
...
└── resources/                                   # → Theme assets and templates
    └── assets/                                  # → Front-end assets
        ├── config.json                          # → Settings for compiled assets
        ├── build/                               # → Webpack and ESLint config
        ├── fonts/                               # → Theme fonts
        ├── images/                              # → Theme images
        ├── scripts/                             # → Theme JS
        └── styles/                              # → Theme stylesheets
             ├── common(core)                    # → Fonts, global styles, variables, base scaffolding
             ├── mixins                          # → Custom mixins and functions
             ├── components                      # → Buttons, Link etc. base elements
             ├── widgets                         # → Base widgets like section, modal, forms, header, footer etc.
             ├── layouts                         # → Page layouts based on widgets with uniques styles for page
                 └──  layout_name                # → Folder with layout styles
                      ├── widgets(blocks)        # → Unique layout widgets or overwtires of common widgets
                      └── layout_name.scss       # → layout with imported layuot widgets
             ├── lib                             # → Imported styles from npm packages and their overrides 
             └── main.scss                       # → Main file where imported all files (mixins, node modules, lib, core, components, widgets, layouts)







  • No labels