All modules are being moved to superflycss and will be published under the @superflycss
organization on NPM.
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.
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
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
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
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
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
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.