A minimal SaSS framework to help deploy fast pages
There are two ways of using Clear.
Clone the repo: ``.
Globally installing the neccesary tools
npm -g i node-sass npm -g i nodemonCompiling
npm run build-css
minifying css not yet available..
- Installing neccesary modules
To get node to install the neccesary modules run npm i from the root directory
- Running the project
Run the project via node index.js
Any compiled css can be found under css/
To create a webpage with this framework start with this skeleton:
<!DOCTYPE html><html><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>Clear</title><linkrel="stylesheet" href="./css/main.css"></head><body><!-- start building --></body></html>| class | x-small | small | medium | large | x-large |
|---|---|---|---|---|---|
.visible-xsmall-up | y | y | y | y | y |
.visible-small-up | x | y | y | y | y |
.visible-medium-up | x | x | y | y | y |
.visible-large-up | x | x | x | y | y |
.visible-xlarge-up | x | x | x | x | y |
| class | x-small | small | medium | large | x-large |
|---|---|---|---|---|---|
.hidden-xsmall-up | x | x | x | x | x |
.hidden-small-up | y | x | x | x | x |
.hidden-medium-up | y | y | x | x | x |
.hidden-large-up | y | y | y | x | x |
.hidden-xlarge-up | y | y | y | y | x |
remember that all responsive classes must be wrapped around div.row in order to behave as expected