ueli

CSS Framework from Zeix

Installation

npm: npm i @zeix/ueli

Sass

Import ueli’s source files in your main.scss.

// main.scss

// 1. Include functions first (allows usage of to-rem or get-color in settings)
@import '../node_modules/@zeix/ueli/scss/01-tools/functions';

// 2. Add token and variable overrides here

// 3. Include remainder of required partials
@import '../node_modules/@zeix/ueli/scss/00-settings/tokens';
@import '../node_modules/@zeix/ueli/scss/00-settings/variables';
@import '../node_modules/@zeix/ueli/scss/01-tools/mixins';

// 4. Include any optional parts of ueli as needed
@import '../node_modules/@zeix/ueli/scss/02-generic';
@import '../node_modules/@zeix/ueli/scss/03-elements';
@import '../node_modules/@zeix/ueli/scss/04-objects';
@import '../node_modules/@zeix/ueli/scss/05-components';
@import '../node_modules/@zeix/ueli/scss/06-utilities';

// 5. Add your custom styles here

Media Queries

Media Queries are handled by Sass MQ.

Usage

// Load the sass module
@use 'sass-mq' as *;

// Include the media query mixin and pass a breakpoint key
@include mq(md) {
}

The snippet above compiles to the following CSS:

@media (min-width: 56.52em) {
}

NPM Scripts

Command	Description
npm run build	Build project in development mode
npm run watch	Watch files and build in development mode
npm run serve	Serve project in development mode
npm run prod	Build project in production mode
npm run lint	Run stylelint and fix errors
npm run prettier	Reformat files with prettier
npm run sassdoc	Generate sassdoc files
npm run test	Run sass-true tests via jest
npm run release	Run commands required for a release commit

Folder Structure

The folder structure inside the scss folder is based on Harry Robert’s ITCSS.

├── 00-settings    # Variables
├── 01-tools       # Functions and mixins
├── 02-generic     # Normalization styles
├── 03-elements    # Styles for bare HTML elements (h1, input, etc.)
├── 04-objects     # Class-based selectors for undecorated patterns
├── 05-components  # Specific UI components
├── 06-utilities   # Helper classes

Settings

Settings are split into tokens and variables.

Tools

Functions and mixins are annotated using sassdoc syntax. Please refer to the sassdoc page for their documentation.

Objects

Container

<div class="container"></div>

Related variables: $container, $container-gutter

Grid

Grid classes are generated depending on the $grid-mode.

CSS Grid (grid-mode: grid)

Related mixins: grid-row, grid-column, grid-column-start

Basic

<div class="grid-row">
  <div class="grid-col">Column A</div>
</div>

Responsive

<div class="grid-row">
  <div class="grid-col grid-col-md-6 grid-col-xl-9">Column A</div>
  <div class="grid-col grid-col-md-6 grid-col-xl-3">Column B</div>
</div>

Offset

<div class="grid-row">
  <div class="grid-col grid-col-5">Column A</div>
  <div class="grid-col grid-col-5 grid-col-start-8">Column B</div>
</div>

Nested

<div class="grid-row">
  <div class="grid-col grid-col-md-8">
    <div class="grid-row">
      <div class="grid-col grid-col-md-6">Nested column A</div>
      <div class="grid-col grid-col-md-6">Nested column B</div>
    </div>
  </div>
</div>

Flex Grid (grid-mode: flex)

Related mixins: flex-row, flex-column, flex-column-base, flex-column-push, flex-column-pull, flex-column-offset

Basic

<div class="row">
  <div class="col">Column A</div>
</div>

Responsive

<div class="row">
  <div class="col col-md-6 col-xl-9">Column A</div>
  <div class="col col-md-6 col-xl-3">Column B</div>
</div>

Offset

<div class="row">
  <div class="col col-5">Column A</div>
  <div class="col col-5 col-offset-2">Column B</div>
</div>

Push / Pull

<div class="row">
  <div class="col col-6 col-push-6">First column in markup</div>
  <div class="col col-6 col-pull-6">Second column in markup</div>
</div>

Nested

<div class="row">
  <div class="col col-md-8">
    <div class="row">
      <div class="col col-md-6">Nested column A</div>
      <div class="col col-md-6">Nested column B</div>
    </div>
  </div>
</div>

Related variables: $grid-mode, $grid-columns, $grid-gutter

Embed

<div class="embed-responsive"></div>

Related token: $ratios

Formatted Text

<div class="formatted-text"></div>

Related variables: $formatted-text-selector

Components

Button

<button type="button" class="button"></button>

<a class="button" href="#" role="button"></a>

<button type="button" class="button-link"></button>

Related variables: See section "Button Base" and "Button Variations" in _variables.scss

Input

<input type="text" class="form-control" />

<textarea class="form-control"></textarea>

Related variables: See section "Input" in _variables.scss

Select

<select class="select">
  <option>Option One</option>
  <option>Option Two</option>
  <option>Option Three</option>
</select>

Related variables: See section "Select" in _variables.scss

Selection

<div class="radio">
  <input type="radio" id="radio1" name="radio" />
  <label for="radio1">Option 1</label>
</div>

<div class="radio">
  <input type="radio" id="radio2" name="radio" />
  <label for="radio2">Option 2</label>
</div>

<div class="checkbox">
  <input type="checkbox" id="checkbox1" name="checkbox" />
  <label for="checkbox1">Choice A</label>
</div>

<div class="checkbox">
  <input type="checkbox" id="checkbox2" name="checkbox" />
  <label for="checkbox2">Choice B</label>
</div>

Related variables: See section "Checkbox & Radio" in _variables.scss

List

<ol class="list list--ordered">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>
    List Item 3
    <ol class="list list--ordered">
      <li>Nested List Item 1</li>
      <li>Nested List Item 2</li>
      <li>Nested List Item 3</li>
    </ol>
  </li>
</ol>

<ul class="list list--unordered">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>
    List Item 3
    <ul class="list list--unordered">
      <li>Nested List Item 1</li>
      <li>Nested List Item 2</li>
      <li>Nested List Item 3</li>
    </ul>
  </li>
</ul>

Related variables: See section "List" in _variables.scss

Utilities

Screenreader

<span class="sr-only"></span>

<span class="sr-only-focusable"></span>

Display

<div class="visible-xs">Visible only on the xs breakpoint</div>
<div class="visible-sm">Visible only on the sm breakpoint</div>
<div class="visible-md">Visible only on the md breakpoint</div>
<div class="visible-lg">Visible only on the lg breakpoint</div>
<div class="visible-xl">Visible only on the xl breakpoint</div>

<div class="visible-sm-up">Visible from the sm breakpoint</div>
<div class="visible-md-up">Visible from the md breakpoint</div>
<div class="visible-lg-up">Visible from the lg breakpoint</div>

<div class="hidden-xs">Hidden only on the xs breakpoint</div>
<div class="hidden-sm">Hidden only on the sm breakpoint</div>
<div class="hidden-md">Hidden only on the md breakpoint</div>
<div class="hidden-lg">Hidden only on the lg breakpoint</div>
<div class="hidden-xl">Hidden only on the xl breakpoint</div>

<div class="hidden-sm-up">Hidden from the sm breakpoint</div>
<div class="hidden-md-up">Hidden from the md breakpoint</div>
<div class="hidden-lg-up">Hidden from the lg breakpoint</div>