PrefaceCSS
PrefaceCSS copied to clipboard
cluzier
A CSS Boilerplate for minimalists
PrefaceCSS
PrefaceCSS is a fresh looking simple css framework.
About
PrefaceCSS is a fresh looking simple css framework that should be taken as the basis for your next website. We designed it to be flexible but still small, thanks to scss all you need to change are some variables and you have your own flavor of PrefaceCSS.
Screenshot
Hint: Click the image to view a web page full of HTML examples.
How to use it
Thanks to the opportunities the open-source development offers us, there are thousand ways to use this libary or change it. Below here I list only a few of them.
Use
Add <link rel="stylesheet" href="css/preface.css"> or <link rel="stylesheet" href="css/preface.min.css"> to your <head>.
Download
Download from Github with the following command:
GitHub: $ git clone https://github.com/cluzier/PrefaceCSS
Contribute
Clone and mix up things. If you think your edits are interesting for the public, just open a new pull request on that.
Here a brief overview of our folder structure:
PrefaceCSS
├── dist # Our destination folder
│ ├── preface.css
│ ├── preface.min.css
│ └── index.html
├── screenshots # Houses screenshots
├── src # Our source folder
│ ├── _base.scss
│ ├── _button.scss
│ ├── _extra.scss
│ ├── _grid.scss
│ ├── _input.scss
│ ├── _loaders.scss
│ ├── _navigation.scss
│ ├── _scrollbars.scss
│ ├── _table.scss
│ ├── _typography.scss
│ └── style.scss
├── LICENSE
├── README.md
├── gulpfile.js
└── package.json
Some gulp task you should know about:
scsscompiles the scss to cssscss:mincompress the compiled css fileswatchexecutesscssandscss:minon any file change
Note
- when running `gulp scss` you will notice a warning, just disregard it.
Required tools for development:
- Node.js
- NPM
- Gulp installed globally (
npm install gulp -g)
Acknowledgements
Based off Skeleton-plus by oltdaniel.
CSS loaders from Spinkit & Loading.io
Credits
A project by Conner Luzier. Other amazing contributors here.
cluzier