Semblance - Sensible defaults for the semantic web

Demo - http://maxmill.github.io/semblance-ui/

Getting Started

bower i semblance-ui (or via npm)

Lean build (6KB minified, 2KB gzipped)

reset, default element styles(forms,lists,tables,typography) generic float/button/text classes

minified css: semblance-ui/css/lean.css

UI build (13KB minified, 3KB gzipped)

minified css: semblance-ui/css/ui.css

utilities/classes

grid: .row, .column
padding: .pad-top-sm, .padding-md, etc
margin: .margin-lg, .margin-left-xl, .margin-right-xxl, etc,
menubar: .nav,
input-dropdown: .input-dropdown
top-navbar: nav\[role=navigation\], .nav-title .nav-icon
z-depths: .z-depths-(1 to 5)

Extending

@import "path/to/semblance-ui/scss/lean";

or

@import "path/to/semblance-ui/scss/ui";

then

@import "your-scss-styles";

Theming

@import "path/to/semblance-ui/scss/_core.scss"; // functions, variables, mixins

@import "your-variables";  // use functions to calculate variable values

@import "path/to/semblance-ui/scss/_lean.scss"

@import "path/to/semblance-ui/scss/_ui.scss" sub-components can also be imported individually

@import "your-scss-styles"; override styles, leverage mixins, functions

variables
// sizes- xs,sm,md,lg,xl,xxl
// color- initial,primary,primary-complement,secondary,secondary-complement
// palettes- red,green,purple,yellow,blue,orange with variants for dark, light, bright

todo - more element defaults

<figcaption>
<figure>
<summary>
<time>
<address>

tables  - <col> <colgroup> <caption>
forms   - <select> <option> <optiongroup>

todo - role default styles

heading         - header font styles and bottom margin
presentation    - something like bootstrap's well

navigation      - (w/ .vertical .horizontal classes)
  toolbar     - component context navigation

separator       - (w/ flex .vertical .horizontal classes)

search
tooltip
alert           - notification message
dialog          - confirm modal

tablist         - <dl>
tab             - <dt>
tabpanel        - <dd>