supple

Supple (S)CSS framework supple Logo

npm (scoped) npm changelog

Why use supple:

It is a small but powerfull (S)CSS framework designed specially with the latest browsers in mind. The framework is made with an eye on the future. It uses custom properties for configuration and utilises new CSS webstandards.

Supple provides little to no design wich means no undoing other peoples design decisions.

Use supple if:

Size

The core framework including all modules without fallbacks for custom-properties weighs about 2.15kB. You can reduce the payload by only including the modules you need, and configure those modules to your needs.

If you want the framework to include all fallbacks for custom-properties the framework comes in at 2.48kB.

Browser support

Supple supports all major browsers which can render CSS custom properties.

If you want to support older browsers (mostly IE11) you’ll need to include the _fractions.scss utility to support our _layout.scss grid system. Other modules also have some configuration to support older browsers, please refer to their own readme files.

Browserstack

Every feature in Supple is extensively tested in browserstack:

browserstack logo

Installation

Note: It is advised to add postcss-autoprefixer to automatically generate vendor prefixes.

Available modules

All supple submodules are created based on the ITCSS methodology.

ITCSS stands for Inverted Triangle CSS and it helps you organize your project’s CSS files in such a way that you can better deal with CSS specifics like global namespace, the cascade and selector specificity.

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 Normalize.css, 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.

Objects

This layer is concerned with styling non-cosmetic design patterns, or ‘objects’. This can range from something as a .o-wrapper element to .o-layout systems.

All Objects should be prefixed with o-.

Components

This layer contains our recognisable components, chunks of UI.

All Components should be prefixed with c-.

NOTE: Because supple is a design-free framework this layer is completely 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 trumps everything defined before.

(*) This set of utilities is only needed if you want to support browsers without custom property support.

All Utilities should be prefixed with u-.

Getting started

Supple is a very design-free framework. This means that the style and design of your site is left entirely up to you. Because supple gives you lots of customisable foundations, you need to add the final layer: UI.

It is advised that you will use supple code throughout your own styles, a sample styles.scss file would look like this:

/* Settings */
@import "node_modules/supple/lib/settings/defaults";
@import "settings/vars";
@import "settings/colors";

/* Tools */
@import "node_modules/supple/lib/tools/functions";
@import "node_modules/supple/lib/tools/mixins";

/* Generic */
@import "normalize";
@import "node_modules/supple/lib/generic/reset";

/* Elements */
@import "node_modules/supple/lib/elements/headings";
@import "elements/links";

/* Objects */
@import "node_modules/supple/lib/objects/list-clean";
@import "node_modules/supple/lib/objects/layout";
@import "node_modules/supple/lib/objects/flexembed";
@import "objects/box";
@import "objects/media";

/* Components */
@import "components/buttons";
@import "components/masthead";
@import "components/navigation.main";

/* Utilities */
@import "node_modules/supple/lib/utilities/fractions";
@import "node_modules/supple/lib/utilities/module";
@import "node_modules/supple/lib/utilities/visually-hidden";
@import "node_modules/supple/lib/utilities/hidden";
@import "utilities/visibility";
@import "utilities/text";

The file index.scss is added as a reference file on how you could implement the smaller modules.

Credits

Supple is derived by the ideas of many other developers:

And probably more…