What is Sheer?
Why another css framework?
Already there are quite a few CSS frameworks available. However most of them come with a default themed version. In order to customize, for example, brand specific color, spacing, padding, font family, font sizes, one end up overriding and bloating the CSS.
With sheer, one generates the CSS from the multiple modular, variables driven, boilerplates. So one gets, only what is desired, with out any overhead.
So, theme based, customized CSS can be generated, won't that induce bloat and override?
Not really, Sheer is completely configurable and driven by variables. One can override the variables and the generated CSS will be based on the overridden value of the variables. No extra, overridden statements.
Hmm, does that imply, one has to hand code CSS?
May be. Sheer provides basic modular CSS, which might not address all the use case. One might have to hand code as per the need, and generate the combined CSS.
Basic modules provided by Sheer
Please refer generator-sheer for further details.
If you prefer to hand craft the boilerplates please follow the below instructions:
$ mkdir my-awesome-app; cd $_$ npm install sheer
.|____Gruntfile.js|____gulpfile.js|____package.json|____src| |____main.css| |____modules| | |_____module.css| |____variables| | |_____variables.css
Please refer the below links for the contents of the boilerplates.
Once the package.json is updated, the dependencies can be installed using the following command.
$ npm install
Once the boilerplates (Gruntfile.js, [gulpfile.js, main.css](https://github.com/sarbbottam/generator-sheer/blob/master/app/templates/_gulpfile.js)) are created, please run either of the below commands to generate the css.
Any customization required, need be carried out at
All the Sheer variables currently in use are listed at
src/variables/variable.cssshould be updated for any custom requirement (color, spacing, padding, font) .
src/modules/modules.cssneeds to updated for new rules/styles.
Should there be need to create mutiple files at
src/variables/, they need to be included at
Customize selector names
You can also customize the selctor names, for example,
.btn instead of the default
Copy the content of button.css to a file (
and update the selctor name to
.btn instead of
import the newly created file in the
main.css instead of the existing
Copyright (c) 2015, Sarbbottam Bandyopadhyay. All rights reserved. Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.