Such less. Many advance. So CSS. Wow.
To make setting up modern frontend CSS an efficient, structured and fun affair. To defeat the inherent complexity of modern web design with amazing best practices we have found while using LessCSS for frontend projects, from small to huge.
Imagine if you could just drop some modular less files into your project and define some variables to set up the typography, create a grid, re-usable responsive layouts, get styles for wireframing and of course many truly useful helpers.
This project works as a collection of separate bundles. It gives you structures and best practices rather than a styled framework. You set your configuration centrally in one file using less variables and then call the appropriate bundle mixins all in one place passing your variables into them. (After that you can tweak the libraries for your individual needs.) And your project's base styles are done!
Such less.
This project was originally created to collect, standardize and share our continually evolving CSS tooling. Also to brag about it.
such.less consists in a large part of .less "bundles" that define and structure different "areas" of a project's styles. The full list of components is...
Bundles are described in detail in the Wiki [todo].
variables.less
setup.less
and styles.less
Now you've got a clean and manageable setup. Such nice. Wow.
After that go and make a mess in styles.less
. And adapt the bundles to your needs.
If you need to support old IE versions you should probably include some polyfills like so:
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
Either use your own build setup including all .less
files in the such.less root and in lib/
. Typical build tools that people use are Gulp, Grunt and the venerable make
.
Or
Use the included Grunt build:
npm install
.npm run build
. Abort with [Ctrl + c].build/styles.css
and build/styles.min.css
. You're welcome.npm start
.localhost:3000
in a browser.