PrefaceCSS is a fresh looking simple css framework.
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.
Hint: Click the image to view a web page full of HTML examples.
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.
Add <link rel="stylesheet" href="css/preface.css"> or <link rel="stylesheet" href="css/preface.min.css"> to your <head>.
Download from Github with the following command:
GitHub: $ git clone https://github.com/cluzier/PrefaceCSS
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)
Based off Skeleton-plus by oltdaniel.
CSS loaders from Spinkit & Loading.io
A project by Conner Luzier. Other amazing contributors here.