supple-css

Supple (S)CSS framework supple Logo

npm (scoped) npm changelog

Introduction

Supple CSS is a reliable and testable Sass framework in its truest sense. It’s based on the ITCSS methodology and is suited very well for component-based UI development. Supple CSS plays well with React, Angular, Vue, Svelte, and every other component-based approach to UI development.

Table of contents

Why use Supple

It is a small but powerful (S)CSS framework designed especially with modern browsers in mind. The framework is made with an eye on the future. It uses new CSS webstandards like custom properties, Grid layout, Flexbox, logical properties.

Supple provides little to no design. This means that the style and design of your site are left entirely up to you. Because Supple gives you lots of customizable foundations you only need to add the final layer: UI.

Features

A grasp of Supple’s features:

Size

The framework including all modules weighs less than 1.6kB (GZIP-ed). With this small payload, you have the power to build an entire website without even writing a single line of CSS. You can reduce the payload even further by only including the modules you need, and configure those modules to your needs.

Browser support

Supple supports all major browsers which can render the following features:

Basically that comes down to:

Note: Internet Explorer is not supported. Supple relies mostly on CSS Custom Properties, which are not supported and cannot be polyfilled.

Installation

Prerequisites

Supple is built with the latest version of Sass so your build-pipeline must be equipped with Dart Sass.

Install

Getting started

Supple is built using the Sass module system and it is advised to structure your application the same way.

Below are some examples of how to use and structure the framework:

With 1 manifest file, eg. styles.scss

// styles.scss
@use 'settings/your-own-vars';
@use 'node_modules/@supple-kit/supple-css/objects/mesh';
@use 'components/your-own-component';
@use 'node_modules/@supple-kit/supple-css/utilities/colspan';

// settings/_your-own-vars.scss
@use 'node_modules/@supple-kit/supple-css/settings/defaults' with (
  $font-size: 20px,
  $columns: 10,
  $breakpoints: (
    lap: 320px,
    desk: 960px,
  )
);

@use 'node_modules/@supple-kit/supple-css/objects/mesh/variables' with (
  $columns: 24
);

// components/_your-own-component.scss
@use 'node_modules/@supple-kit/supple-css/settings/defaults';
@use 'node_modules/@supple-kit/supple-css/tools/space';
@use 'settings/your-own-vars';

.your-own-component {
  margin-inline-start: space.get('base');
  transition-timing-function: your-own-vars.$animation-timing-function;
  font-size: defaults.$font-size;
}

In a component-based setup like React, Vue, Svelte, etc.

// settings/_your-own-vars.scss
@use 'node_modules/@supple-kit/supple-css/settings/defaults' with (
  $font-size: 20px,
  $columns: 10,
  $breakpoints: (
    lap: 320px,
    desk: 960px,
  )
);

// components/your-own-component/index.js
import './index.scss';

// rest of your javascript code

// components/your-own-component/index.scss
@use 'settings/your-own-vars';
@use 'node_modules/@supple-kit/supple-css/tools/space';

.your-own-component {
  margin-inline-start: space.get('base');
  transition-timing-function: your-own-vars.$animation-timing-function;
}

Available modules

All Supple’s modules are created based on the ITCSS methodology. It is advised you to read ITCSS documentation to fully grasp the ideas about the methodology.

Settings

This layer is the first layer and holds any global settings for your project. It should only house settings that need to be accessed from anywhere.

Note: Any variable that does not need to be accessed globally should belong in the module to which it relates.

Tools

The tools layer houses your globally available tooling, mixins, and functions.

Note: Any mixin or function that does not need to be accessed globally should belong in the module template to which it relates.

Generic

It contains ground-zero styles like global box-sizing rules, CSS resets, and so on.

Elements

These are bare, unclassed HTML elements. The Elements layer binds onto HTML element (or ‘type’) selectors only.

Elements are most likely the last layer in which we’d find element-based selectors, and is very rarely added to or changed after initial setup. Once we have defined element-level styles, all additions and deviations should be implemented using classes.

Note: Because Supple is a design-free framework this layer is empty.

Objects

This layer is concerned with styling non-cosmetic design patterns, or ‘objects’.

All Objects are prefixed with o-.

Components

This layer contains our recognizable components, chunks of UI.

All Components are prefixed with c-.

Note: Because Supple is a design-free framework this layer is empty. You can add your own components to your project.

Utilities

This layer contains some handy helpers & overrides. This is the most specific layer of the application which overrides everything defined before.

All Utilities are prefixed with u-.

Browserstack

Every feature in Supple is extensively tested in Browserstack:

browserstack logo

Credits

Supple is derived from the ideas of many other developers:

And probably more…

This site is open source. Improve this page.