https://github.com/superfly-css/superfly-css
CSS components, utilities, their foundation, and corresponding structural and build methodology
https://github.com/superfly-css/superfly-css
consistency css-components css-modules gulp methodology
Last synced: 3 months ago
JSON representation
CSS components, utilities, their foundation, and corresponding structural and build methodology
- Host: GitHub
- URL: https://github.com/superfly-css/superfly-css
- Owner: superfly-css
- License: mit
- Created: 2015-10-06T15:13:47.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-06-06T16:49:45.000Z (about 8 years ago)
- Last Synced: 2025-04-15T08:58:22.038Z (3 months ago)
- Topics: consistency, css-components, css-modules, gulp, methodology
- Size: 15.6 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Deprecated
All modules are being moved to [superflycss](https://github.com/superflycss/) and will be published under the `@superflycss` organization on NPM.
# superfly-css
Modularized, [composable](https://en.wikipedia.org/wiki/Composability#System_Design), 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](https://developers.google.com/web/fundamentals/getting-started/primers/customelements).
## Objectives
The aim of [superfly-css](https://github.com/superfly-css/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](https://github.com/superfly-css/superfly-css/blob/master/naming-conventions.md) 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](https://github.com/substack/browserify-handbook#module-philosophy), and are free of [side effects](https://philipwalton.com/articles/side-effects-in-css/) and [naming collisions](https://philipwalton.com/articles/side-effects-in-css/)
- 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](https://github.com/postcss/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](https://github.com/superfly-css/superfly-css-pli) for all project repositories
- [Gulp](http://gulpjs.com) 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:
```console
npm install --save-dev superfly-css-variables-colors
```
### Gulp Build Tasks
The **superfly-css** [Gulp](http://gulpjs.com) tasks can be installed via NPM. To install the [`superfly-css-task-test`](https://github.com/superfly-css/superfly-css-task-test) gulp task as a development dependency run:
```console
npm install --save-dev superfly-css-task-test
```
## Usage
### CSS Modules
Import the module using `@import `. For example:
```css
@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:
```console
gulp build:css
```
### Build Tasks
Once the task is NPM installed require it in the `gulpfile.js` file like this:
`require()`
For example:
```js
require('superfly-css-task-build');
```
Your css can now be built by running:
```console
gulp build:css
```
### Foundation
All superfly-css modules assume the utilization of the [superfly-css-foundation](https://github.com/superfly-css/superfly-css-foundation) module in order to keep code [DRY](https://en.wikipedia.org/wiki/Don't_repeat_yourself). Thus in order to guarantee consistent results always include the [superfly-css-foundation](https://github.com/superfly-css/superfly-css-foundation) module import first.