Genericcss

Genericcss is an implementation of style sheets using the theory of Atomic Design by Brad Frost. I highly recommend his book if you have never read it. Genericcss for the most part falls under the Atom level of the Atomic design theory.

The development of this implementation started from a need to boil down the styling for use with multiple CMS platforms meaning standardization and generic use cases were needed. Combine this with simple language allows for non-developers, for those who have Marketing or management making changes to the copy, who want to make style changes can add, change, or remove keywords to style page elements without developer intervention, if the CMS platform supports added styles. For those platforms that don't support CSS classes through the Admin GUI; this repository also functions as a Boostrap-esque developer tool for faster development and styling.

Codebase reduction and reuse was another focus for this project. By implementing a generic library of style sheets this shrank the standard style sheet from 100s of lines of code per page to 150 lines or less. This differs from current web standards of short CSS classes and long style sheets to longer CSS class names to smaller style files. Smaller style files transmit faster over the internet and even sped up page loads.

Some beneficial features include:

• CSS Grid support; I prefer 2D layouts as apposed to faked 2D using flex or Bootstrap.
• Most styling is HTML tag agnostic, e.g. the Button class will handle <div> and <a> as buttons.
• Dynamic color pallettes, if the color in the class matches a color on the Colors style sheet it'll work.
• Expandable. From this base Molecules, Organisms, etc. can be built with access to sub functions as needed by a simple @import.

Notes:

• IE and Edge are not 100% verified to work in current version
• In-depth documentation using DocumentCSS coming soon.
• Yarn management/workflow and a lightweight bundler/minification package like Parcel coming soon.