Liz-Skin

An opinionated, functional SCSS library developed by Repositive.io.

Getting Started

1. Install with npm:

npm install @repositive/liz-skin --save

2. Setup your app.scss import document:

Add the template.import.scss file into your styles directory. Rename it app.scss.

3. In app.scss, correct the ..path/to/node_modules

Find & replace each ..path/to/node_modules with the correct path to your node_modules directory.

4. Do your pre-flight checks and you're off

Compile your SCSS to CSS, check you've<link>-ed your stylesheet correctly and you're good to go.

QuickFire Docs

More extensive documentation can be found in each file individually.

Utility Functions

• Borders - Add a border & border radius e.g. "border-bottom rounded"
• Colors - Apply font fc-, background bc- & border border- colors e.g. "fc-primary bc-off-white"
• Cursors - Specify cursor style e.g. "cursor-pointer"
• Display - Set display behaviour, responsively hide elements e.g. "block hide-s hide-m"
• Flex Layout - Define layout with flexbox e.g. "flex flex-wrap items-center justify-center"
• Font Styles - Set font size & weight e.g. "fs2 fw-med"
• Icon Sizing - Set icon size e.g. "icon-medium"
• Margin - Apply margin (margin-right & -bottom only). Uses the spacing scale e.g. "mb0 mr3"
• Overflow - Set overflow behaviour e.g. "overflow-hidden"
• Padding - Apply padding. Uses the spacing scale e.g. "pb4 px3"
• Position - Set position behaviour, 'pin' to top/bottom/left/right, set z-index e.g. "absolute z5 top-0 left-0"
• Type Setting - Adjust text-alignment, decoration & upper-/lowercase e.g. "ta-center td-underline tt-uppercase"

Components

• Grid Wrapper - Sets responsive width & padding and centers a grid. Two resizing options: -fluid or -stepped e.g. "grid-wrapper grid-wrapper-fluid"
• Grid System - Dan Eden's Toast Grid. See full docs

  <!-- Nest all grid__col inside of a .grid -->
  <div class="grid">
    <div class="grid__col grid__col--1-of-3">
      <!-- your content -->
    </div>
  </div>

• Balloon Tooltips - Nice tooltips by Claudio Holanda. See full docs e.g. data-balloon="I'm a tooltip" data-balloon-pos="up"

Other Directories

settings directory

The settings directory doesn't output any CSS. It contains only variables. Some settings (relating to color, typography & other misc-ui) are specific to Repositive, its brand & styleguide. Others (e.g. spacing & layout-and-breakpoints) are more design agnostic. All of these agnostic variables are flagged as !default - edit / override with your spacing scale as you desire.

reset directory

In the reset directory are two common/generic resets:

• box-sizing reset
• normalize.css

There is also a highly opinionated reset file to apply some base Repositive styles:

• custom-reset - users outside of Repositive may prefer not to import this file

Contribute

An issue with taking a functional CSS approach is that developers have to learn a new CSS API. It's therefore important to make the naming of utilities as intuitive as possible. Please open a PR if you want to suggest edits to any utility names.

Acknowledgements

This library has borrowed heavily from BassCSS by Brent Jackson. It also includes the simple toast grid developed by Dan Eden and Balloon CSS by Claudia Holanda.