Deprecated

All modules are being moved to superflycss and will be published under the @superflycss organization on NPM.

superfly-css

Modularized, composable, and responsive CSS variables, components, utilities, typography, their foundation, and corresponding structural, build, and test methodology designed to be forward compatible with custom elements / web components.

Objectives

The aim of superfly-css is to maximize designer and developer productivity, cross eco system utilization, and to minimize maintenance effort by providing:

• SUPERFLY CSS Component and Utility Naming Conventions that provide predictability, clarity, transparency, simplicity, and consistency to the CSS markup and the corresponding end result.
• A la carte flexibility. Use only the parts that you want to use.
• A robust CSS foundation / base
• Small focused CSS modules that are easily customizable, adhere to a Module philosophy, and are free of side effects and naming collisions
• Dependency management for CSS modules and build tools
• Test cases clearly illustrating how to utilize the css module features and how to got about customization
• The ability to incorporate future CSS specification features, such as variables, now using PostCSS.
• Naming and structural conventions for CSS elements, components, utilities, and repositories
• End to end Gulp based build pipeline examples
• Well documented and tested code that incorporates design rationale
• A standardized project layout for all project repositories
• Gulp tasks providing workflow automation

Installation

CSS Modules

The superfly-css css modules can be installed via NPM. For example install the color module as a dev dependency by running:

npm install --save-dev superfly-css-variables-colors

Gulp Build Tasks

The superfly-css Gulp tasks can be installed via NPM. To install the superfly-css-task-test gulp task as a development dependency run:

npm install --save-dev superfly-css-task-test

Usage

CSS Modules

Import the module using @import <module_name>. For example:

@import superfly-css-variables-colors;

Then customize by overriding CSS variables and/or extending the CSS. Once your CSS file is complete, build by setting up your gulpfile.js and running:

gulp build:css

Build Tasks

Once the task is NPM installed require it in the gulpfile.js file like this: require(<name_of_task>)

For example:

require('superfly-css-task-build');

Your css can now be built by running:

gulp build:css

Foundation

All superfly-css modules assume the utilization of the superfly-css-foundation module in order to keep code DRY. Thus in order to guarantee consistent results always include the superfly-css-foundation module import first.