Gemma
Functional/atomic/whatever-we’re-calling-it CSS for fun and (complete lack of) profit
Built for performance and (re)usability, Gemma is a collection of foundational styles and classes for creating beautifully simple, highly effective CSS.
Philosophy
Gemma’s philosophical approach to CSS is nothing new, but tried and true. It favours:
- mobile-first, lightweight styles
- responsive design as a default
- forming both basic and more nuanced components from independent, highly recombinable pieces (think Lego!)
- designing systems that are easy for developers and designers to learn and use
- keeping CSS bundles compact and quick to deliver to users
Usage
You can clone or download the Gemma repo directly, or install it into your project via NPM:
npm i --save gemma
Either way, all you need to do is import the minified CSS file in the public directory:
;Class naming
Class names in Gemma follow these naming conventions:
- For classes which deal with properties that take named attributes, e.g.
text-align, the class name will begin with that property’s name as an acronym, e.g.ta, followed by a dash, and an acronym for the attribute name, e.g.cforcenter. Full example:ta-c=text-align: center - For classes which deal with properties that take numerical attributes, e.g.
padding-right, the class name will begin with that property’s name as an acronym, followed by the number (without units, and not preceded by a dash). Full example:pr1=padding-right: 1<unit/increment>
(Note: where several property names are part of a larger CSS module, e.g. flexbox, classes are preceded with a letter to indicate this module. Therefore the flexbox-related property align-content can be set with classes beginning with fac for (flex) align-content.)
This system may seem overly concise at first, but after using the system for awhile, it should start to feel natural. The brevity of this naming system saves you from typing more characters than necessary, and saves space in your markup. (On a personal note, previous CSS libraries that I’ve worked on have erred more on the side of verbosity, where the class for text-align: left would be align-left. While this felt fool-proof at first, after several months of usage, typing such a comparatively long class name became annoying, especially once the library classes had become memorised.)
Development
Full disclosure: I built Gemma primarily as a personal exercise. If you’re looking for something that will be regularly updated, you might consider something more active and full-featured, like Tachyons.
With that said, if you want to work on Gemma as a fork or to submit a contribution:
- Clone the latest master branch of the repository (
git clone https://github.com/colepeters/gemma.git) cdto the repository and install dependencies via npm (cd gemma && npm i)
Development tasks are currently managed with npm scripts:
npm run lint
Gemma ships with a linting configuration which is passed to Stylelint. The lint task will examine all CSS files in the source directory, and output any linting errors to the command line via postcss-reporter.
npm run compile
Passes all source CSS files to postcss-cssnext, via postcss-cli. This transforms source CSS custom properties to their computed values and minifies the output, resulting in a gemma.min.css file.
Additional useful information can be found in the source files readme.
Inspiration
Gemma’s philosophical and stylistic leanings have been heavily influenced by the following projects:
and the following people:
(and likely more whom I’ve forgotten to mention).
A gemma (/ˈdʒɛmə/ with a soft "g", as in "general") is a single cell, or a mass of cells, that detaches from the parent and develops into a new individual.