An open API service indexing awesome lists of open source software.

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

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.