Skip to content

CSS (SASS) Structure

Jump to bottom
Stephen John Raymundo edited this page Aug 28, 2019 · 2 revisions

CORE

This document is a work in progress

base (variables only)

color

main colors (may change depending on the style guidelines)

  • primary (60%)
  • secondary (complement) (30%)
  • accent (10%)
  • background
  • underground
  • surface
  • info
  • warn
  • error
  • success

All colors should have corresponding variants:

  • semi-lighter
  • lighter-
  • semi-darker
  • darker

lighter/darker variants are used for microinteractions, e.g. hover state, focused state, etc.

  • on-dark

colors are light themed by default. on-dark variants are used when colors are used within a dark themed container

Class helpers will be found at the helpers folder typography - Google sans and Roboto
elevation/shadow outlines - container outline, field outlines, active outlines

Placeholders - these are custom made designs (group of variables) whereas base contains single property variables, placeholders contain multiple properties still inherited from base but defined as a group

  • surfaces(property declaration variables)
  • flat (no shadow/outline), outlined, card

helpers general - reusable on all kinds of sites (w/o layout, get from base) - use the ff bases - e.g. typography - headline/title, subtitle, paragraph, layout - single use, generic (unlike in modules) but layouts only helpers - flex layout helpers - spacing helpers - padding helpers mixins - grids (auto-responsive-grids(min,max) mixins, ) - actionable microinteractions (actionable(color))

Components (CSS Components) with state

  • these are new elements not found in html, or enhanced existing elements. should be in classes
  • should be for single use
  • may contain children but should only be specific as a single component
  • e.g. Card, Button, Dialog (with layout), Tab-layout, scaffold-layout
  • tablayout, cardlayout
  • tab-item tab-item--active
  • as if css virtually will rely on the html naming. if the element has .column class, css will make a flex column layout. the source of truth is on the class name. e.g. .card means it looks like a card, .button means it looks like a button

Modules

  • these are not yet ready to be a component but describes a layout. may have undescriptive class name e.g. dashboard-container, the source of truth is on the css declaration. should have comments in CSS. html will rely on the css naming
  • since the source of truth is on the css declaration, it should contain useful comments
  • use BEM
  • for more complex layouts, describe the purpose (instead of look) on the class name (e.g. media, e.g. )
  • e.g. levelLayout--left, levelLayout__right,

NOTE: Strictly document everything

Clone this wiki locally