来自： https://estkin.github.io/reindeer.css/
reindeer.css
前端开发人员的轻量级可定制css框架。
# status at the time we are working on reindeer as much as possible, some components are missing, but we will add them very soon!
this documentation is updated for reindeer's version 0.1.3
# install reindeer recommended installation is with node package manager
run this command in terminal:
npm install --save reindeer.css or just download master branch from github repository (newest versions/releases are there quicker than on npm; but they could be broken or not production ready)
https://github.com/estkin/reindeer.css/archive/master.zip # use reindeer if you succesfully get reindeer, you can now link it with your html document
this comes into tag:
# how to customize customization is pretty easy, you just need those three things:
gulp installed reindeer's source code some text editor (even textedit on mac/notepad on windows) if you have all these things, open src/base/_var.css , in this file, you can customize everything what is included. more customization coming soon...
example:
$link-color: #333333; change to $link-color: #d2436d;
for changing color after your customizing open terminal in root directory of reindeer's source code and run command npm run both , this command will produce compiled + minified file with your custom variables
# typography nothing special at the moment
heading 1 heading 2 heading 3 heading 4 heading 5
heading 6 paragraph
# buttons stylized for use with link and button [not input] (you can use it with div, but it has cursor: pointer on it)
example:
red button!
green button!
orange button!
violet button!
gray button!
asphalt button! # boxes same as buttons but for blocking use, like layout things, etc. (no cursor: pointer on it)
red box!
green box!
orange box!
violet box!
gray box!
asphalt box!
example:
red box!
green box!
orange box!
violet box!
gray box!
asphalt box!
# grid reindeer is based on flexbox magic
we have 2 row types: .row - just normal display: flex row .row-center - display: flex row with centering objects and lot of .row-item-* classes: .row-item .row-item--(from 2 to 12) .row-item--half .row-item--third .row-item--quarter
item 1
item 5
item 1
item 4
item 1
item 3
item 1
item 2
item 2
item 3
item half
item 1
or just do crazy things like this (not really crazy tho, haha)
item 1
item 1
item 1
item 2
item 2
item 10
item 2
item 2
item 2
item 4
item 10
example:
item 2
item 10
item 2