veRepo is a SASS library of modules and mixins for robust and maintainable front-end development using SASS. Most of the modular items/objects in this repo will work by just adding 1 class name to the html element you desire to style (although there are some exceptions).
Visit this link to read the online version, or follow the next steps to get a local version:
-
To generate the docs you have to use the grunt command that generates the docs mentioned here.
-
To view the docs you need to serve them in an http server. One of the fastest ways to do that is via python's httpserver:
cd docsand thenpython -m http.server
(It is highly recommended to use veRepo via bower)
Assuming that your current file structure looks like this:
assets
└──css
├── _style.scss
└── _verepo.scss
Where style.scss is the main stylesheet of your project and verepo is the distributable verepo library file found in the root directory of this repository. Now all you have to do is to import the _verepo.scss file inside of style.scss and then use it's components by using @include.
example #1:
@import "_verepo";
@include normalize;This will include the latest normalize.css version
example #2:
@import "_verepo";
.blue-flat-button{
@include button(#fff, #09f, 0);
}The above will be processed into the following:
.blue-flat-button {
position: relative;
display: inline-block;
padding: 0.5em 1em;
color: white;
text-decoration: none;
background-color: #0099ff;
border: 1px solid #007acc;
border-radius: 0;
background-clip: padding-box;
transition: 150ms ease-in-out background-color, 150ms ease-in-out box-shadow;
}
.blue-flat-button:hover,
.blue-flat-button:focus {
cursor: pointer;
background-color: #4db8ff;
}
.blue-flat-button:active {
cursor: pointer;
box-shadow: 0 0 3px #0099ff, 0 0 0.5em rgba(0, 0, 0, 0.25) inset;
}veRepo is now in the bower package directory and you can install it by simply running this command:
bower install verepo
While being in the root directory of the repository you need to run npm install which will allow you to use gruntjs by installing all the dependencies of the current project. After that, you can perform one of these tasks:
grunt update-docsto compile the docsgrunt update-distto compile the distributable_verepo.scssfilegrunt update-exampleto compile the sass file for the example pagegrunt updateorgruntto run the 3 tasks above.grunt connectto initiate a simple http server at http://localhost:8000 which will server a local viewer for the example website and docs
to stop the tasks, you need to press CTRL + C
For the SASS syntax lovers or the SCSS syntax haters, you can use sass-convert to convert the scss files to sass. Later on I might write a script to automate it but currently it doesn't seem wise to develop a tool which will most probably be rewriten again due to this repository's current state (alpha phase).
- Read CONTRIBUTE.md
- When creating a new verepo "object", you need to:
- include the
.scssfile inside the verepo library's directory - name it after it's mixin but since it's a partial, prepend a
_in the name (for example_grid.scss)
- include the
- Inside the file you just created:
- Include the documentation declaration (for syntax and information, read here)
- Include any import declarations
- Include any
TODO:declarations - Include the code (mixins, functions etc)
- If the mixin you've created takes no parameters, then create an
@extenddeclaration with the same name which will include the mixin you've just created (for example:%clearfix{ @include @clearfix; }) - If you create more than 1 mixin in the file, then repeat the previous steps for each mixin
- Finally you need to do the following to submit your changes:
- Re-generate the verepo documentation locally (there is a guide for this which is mentioned above)
- Run
grunt updateto update the documentation, example page and distributable_verepo.scssfile - Push the changes
- Update ghpages by running this command while in the root of the verepo repository directory:
git checkout gh-pages && git merge master && git push && git checkout master - Finally bump the project version by doing the following:
- Read semver's spec and deside whether the changes you've made are considered
patch,minorormajor - Then use grunt bump to update the project verion with the following command:
grunt bump:patchorgrunt bump:minororgrunt bump:major
- Read semver's spec and deside whether the changes you've made are considered
- Do a Pull-Request
From v0.0.3 and onwards prefixes will be removed. Please Autoprefixer instead!
The MIT License (MIT)
Copyright (c) 2013 Adonis K.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
- The
CONTRIBUTE.mdfile of this project is a slightly modified copyCONTRIBUTE.mdfile from the normalize.css project. - Some of the partials in this repo were inspired by scut
- Stubbornella for the media object
- TODO add more