Skip to content

Latest commit

 

History

History
80 lines (57 loc) · 2.07 KB

README.md

File metadata and controls

80 lines (57 loc) · 2.07 KB
Raw

Supple CSS | utilities.columns

Utility which provides a columns custom property for use in objects or components which can handle those columns eg. object.mesh and object.layout.

Read more about Supple CSS.

Table of contents

Features

  • Easy & flexible columns in your objects & components
  • Works nicely with objects.mesh and objects.layout

Use

<div class="o-mesh  u-columns-10">
  <div class="u-colspan-3">spans 3 of 10 columns</div>
  <div class="u-colspan-7">spans 7 of 10 columns</div>
</div>

Available classes

By default we generate classes for 12 columns but it can be configured with the $columns setting.

  • .u-columns-X, spans over the designated number of columns
  • .u-columns-X@[QUERY-NAME]: applies colums at the given media query. (available in $in-query SCSS setting)

Configurable variables

SCSS variables

  • $columns, number of columns we generate classes for, defaults to defaults.$columns
  • $in-query: a list of breakpoints where .u-columns-X@[QUERY-NAME] is generated for, defaults to: ()

You can overwrite the SCSS variables the following ways:

// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/columns' with (
  $columns: 10,
  $in-query: (
    lap,
    desk,
  )
);

or

// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/columns/variables' with (
  $in-query: (
    lap,
    desk,
  )
);

// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/columns';

Installation

Make sure you've installed/downloaded the Supple CSS library: Supple CSS installation

Browser support

  • Chromium-based browsers (Chrome, Edge, Brave, Opera)
  • WebKit-based browsers (Safari, iOS Safari)
  • Firefox (Gecko)