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)

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>

@zeix/ueli

ueli

Installation

Sass

Media Queries

Usage

NPM Scripts

Folder Structure

Settings

Tools

Objects

Container

Grid

CSS Grid (grid-mode: grid)

Basic

Responsive

Offset

Nested

Flex Grid (grid-mode: flex)

Basic

Responsive

Offset

Push / Pull

Nested

Embed

Formatted Text

Components

Button

Input

Select

Selection

List

Utilities

Screenreader

Display

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads