Goal of this framework
- To document the issues, and solutions
- To provide a standardized list of classes
- To provide a reusable structure for css
- To provide a list of utility classes
- Reduce the number of classes used
- To enforce constrain
- 6 font sizes
- 6 shades of grey
- 6 colors: 3 main colors + 3 darker version
- 4 font-weights: light, regular, medium, bold
This framework is built on SASS/Compass. The layout used within this document uses the pureCSS framework
Main problems encountered
-
100% height columns
- Flexbox
-
Absolute center containers
- abs position
-
Centered images in a container
- display: table + display: table-cell, vertical align
-
Font scaling across different screen widths
-
variable padding for containers
-
arbitrary element attribute: declarative styling for structural stuff, for prototyping
Namespacing
Typography: t
- font-size, font-family, font-weight, color
Spacing: s
- margin, padding
- Rules here affect how far apart one element is separated from another, including the edge of the container
Layout: l
- alternate layout for components
- e.g. display, positioning, floats, overflow
- This affects how the element is arranged/positioned within the content area
Module: none
- Modules are just called by their names, e.g. dropdown, profile, list
- includes:
- modal
- list
- profile
- slider
- notifications
- form
- tooltip
- list-grid
States: is[State] convention
-
This includes variations of the same element under different contexts, such as user input, data, media queries
-
e.g. button.isPressed, button.isDisabled
-
The structure of the page is defined by layouts, e.g. top nav, sidebar, main content area
-
Layouts are containers for modules, e.g. the top nav bar can contain an inline list, a dropdown (stacked-list) and a profile module
-
modules can contain sub-modules
-
modules consists of elements, which are defined by base styles
Order of hierachy (lowest to highest)
- base elements
- button, a, span, div, h etc...
- elements in context
- #form button, #sidebar .list-stacked, #profile img
- elements with state
- modules
- slider, login form
- modules with state e.g. menu that is constrained by media queries
- containers
- containers are a special kind of module. It is only there to provide spacing whenever needed.
- layouts
Containers
- Padding on all 4 sides
- More padding on sides than top e.g. button, display text
Modules
Modal
- Overlay
- layout (abs center)
- module
- container (padding)
- module (optional)
- container (for padding, optional)
- element
- container (for padding, optional)
- module (optional)
- container (padding)
- module
List Grid with centered icon
- layout (.content)
- container (padding, optional)
- list module
- container (padding)
- container (display-table)
- container (display-tablecell, centered)
- image
- container (display-tablecell, centered)
- container (display-table)
- container (padding)
- list module
- container (padding, optional)
What i need:
- a mixin for flexible padding
App should be designed for mobile first.