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:
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.
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.
Every feature in Supple is extensively tested in browserstack:
npm install supple --save
Note: It is advised to add postcss-autoprefixer to automatically generate vendor prefixes.
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.
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.
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.
It contains ground-zero styles like Normalize.css, global box-sizing rules, CSS resets and so on.
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.
This layer is concerned with styling non-cosmetic design patterns, or ‘objects’. This can range from something as a
.o-wrapper element to
All Objects should be prefixed with
This layer contains our recognisable components, chunks of UI.
All Components should be prefixed with
NOTE: Because supple is a design-free framework this layer is completely empty. You can add your own components to your project.
this layer contains some handy helpers & overrides. This is the most specific layer of the application which trumps everything defined before.
margin-bottomfrom the last childs of a module.
(*) This set of utilities is only needed if you want to support browsers without custom property support.
All Utilities should be prefixed with
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.
Supple is derived by the ideas of many other developers:
And probably more…