@superflycss/superflycss

superflycss

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.

This is the uber repository providing and overview and description of the the facets of the superflycss project. All components and utilities reside in their own repository. To see all repositories related to this project click here.

Blog

Builds

• Build Speed

Design Rationale

• Merging of Variable Repositories
• Container vs. Item

Objectives

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

• SuperflyCSS 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 can be installed with a package manager (NPM), are easily customizable, live in their own repository, are updated and semver versioned independently of other components or utilities, adhere to a Module philosophy, and are free of side effects and naming collisions. Small modules are less intimidating for new users to get started with and allow developers to find and review code as quickly as possible.
• 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 superflycss/cli live reload build examples
• Well documented and tested code that incorporates design rationale
• A standardized project layout for all project repositories
• Project initiation and live reload building and workflow automation provided by superflycss/cli
• Adherence to semver guidelines for update releases
• RxJS style module imports for all css sub modules
• Asset grouping. Since each component, utility, or tool has its own repository, any javascript, image, or other resource that is used for functional or demo purposes is easy to find.
• Filtered communication and updates. If you are only interested in watching for changes to the Header Component, click the github watch button for that repository only.

The framework will also help you become a better programmer as the design of and utilization of components and utilities mirrors how object oriented and functional programmers think.

Installation

SuperflyCSS CLI (Command Line Interface)

npm -i -g @superflycss/cli

SuperflyCSS Variables, Components, and Utilities

SuperflyCSS css modules can be installed via NPM. For example install the color module by running:

npm i @superflycss/variables-colors

Usage

New Project Creation

Create a project name component-super:

sfc new -t c  component-super

CLI Live Reload

To build, serve, and live reload the component-super project run:

cd component-super
sfc s component-super

Browser-Sync is now serving the 'serve' directory. The directories src/main/css, src/test/css, and src/test/html are watched, file changes are compiled to serve and the browser is refreshed automatically. Happy live reloading!

Creating a Composite Build from CSS Modules

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

@import '@superflycss/variables-colors';

Then customize by overriding CSS variables and/or extending the CSS. Once your CSS file is complete, build it using the CLI by running:

sfc build:main:css

Or use the abbreviated version:

sfc bmc

Prepublishing Variables, Components, or Utilities

sfc dist

Or use the abbreviated version:

sfc d

Foundation

All superflycss rendering assumes the utilization of the superflycss/foundation module in order to keep code DRY. Thus in order to guarantee consistent results always include the superflycss/foundation module import first.