Built for performance and (re)usability, Gemma is a collection of foundational styles and classes for creating beautifully simple, highly effective CSS.
Gemma’s philosophical approach to CSS is nothing new, but tried and true. It favours:
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 names in Gemma follow these naming conventions:
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.
center. Full example:
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:
(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
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.)
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:
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:
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.
Additional useful information can be found in the source files readme.
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.