Jarvus UI CSS

Designless CSS framework.

Requires Sass. Additional notes found in jui/ files.

Setup

Typical folder structure:

sass/
|—— jui/
    |—— elements/
    |—— objects/
    |—— components/
    |—— overrides/
    |—— settings/
    |—— tools/
    |—— utility/
    |—— _jui.scss
|—— [website-name]/
    |—— settings/
        |—— _jui.scss
        |—— _[website-name].scss
    |—— _[website-name].scss
|—— main.scss

Use main.scss to @import settings and framework and website master files (_jui.scss, etc.).

Rename [website-name] appropriately and mirror jui/ folder structure for additions and tweaks.

Import only the code you need using the JUI master file, _jui.scss. Otherwise, avoid directly editing jui/ contents.

Settings Setup

`jui/settings`

_defaults.scss (required): Basic settings required for the framework to function.
_normalize.scss: Normalize.css
_box-sizing.scss: Change default box-sizing to border-box. More info.
_responsive.scss: Enable responsive utility classes. Includes a list of 5 stock min-width breakpoints for use with mq-list() mixin.

`[website-name]/settings`

_jui.scss: Overwrite JUI variables here.
_[website-name].scss: Put custom website variables here.

Settings

`_defaults.scss`

Settings

$jui-enable-global-legacy: Include extra fallbacks for semi-older or limited browsers (e.g. ~ie9, Opera Mini)
$jui-active-class-name: Class name used on active elements

Colors

$jui-base-bg-color: base background color
$jui-base-text-color: base text color

Typography

$jui-base-font-family: base font-family
$jui-base-font-size: base font-size (px)
$jui-base-font-weight: base font-weight
$jui-base-line-height: base line-height (px)
$jui-base-text-align: base text-align

Spacing

$jui-base-spacing-unit: base spacing unit (px)
$jui-base-spacing-unit--xs: base spacing unit extram small (px)
$jui-base-spacing-unit--sm: base spacing unit small (px)
$jui-base-spacing-unit--lg: base spacing unit large (px)
$jui-base-spacing-unit--xl: base spacing unit extra large (px)

Media Queries

$jui-mq-high-density-1-25: high density screens (1.25 ratio)
$jui-mq-high-density-1-3: high density screens (1.3 ratio)
$jui-mq-high-density-1-5: high density screens (1.5 ratio)
$jui-mq-high-density-2: high density screens (2 ratio)

Tools

`_mixins.scss`

Font Sizer

font-sizer($font-size, $line-height)

Calculates rem font-size from px value and takes a line-height value or autocalculates it to maintain vertical rhythm with $jui-base-line-height.

Helpers

u-bfc(): block formatting context (contain floats, margins, overflows)
u-clearfix(): contain floats
u-reset(): remove list styles, margins, paddings
u-visuallyhidden(): hide visually (keep for screen readers)
u-visuallyhidden--focusable(): extend u-visuallyhidden to make visible on keyboard focus