https://github.com/cluzier/prefacecss

A CSS Boilerplate for minimalists
https://github.com/cluzier/prefacecss

boilerplate css minimal prefacecss

Last synced: 3 months ago
JSON representation

A CSS Boilerplate for minimalists

• Host: GitHub
• URL: https://github.com/cluzier/prefacecss
• Owner: cluzier
• License: mit
• Created: 2019-06-22T00:44:14.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-16T19:30:45.000Z (9 months ago)
• Last Synced: 2024-05-16T20:39:25.095Z (9 months ago)
• Topics: boilerplate, css, minimal, prefacecss
• Language: SCSS
• Homepage: https://cluzier.github.io/PrefaceCSS/dist/index.html
• Size: 872 KB
• Stars: 29
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `PrefaceCSS`

[![GitHub issues](https://img.shields.io/github/issues/cluzier/PrefaceCSS.svg)](https://github.com/cluzier/PrefaceCSS/issues)

[![GitHub forks](https://img.shields.io/github/forks/cluzier/PrefaceCSS.svg)](https://github.com/cluzier/PrefaceCSS/network)

[![GitHub stars](https://img.shields.io/github/stars/cluzier/PrefaceCSS.svg)](https://github.com/cluzier/PrefaceCSS/stargazers)

[![GitHub license](https://img.shields.io/github/license/cluzier/PrefaceCSS.svg)](https://github.com/cluzier/PrefaceCSS/blob/master/LICENSE)

[![HitCount](http://hits.dwyl.io/cluzier/PrefaceCSS.svg)](http://hits.dwyl.io/cluzier/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

[![Image of PrefaceCSS](./screenshots/screenshot.png)](https://cluzier.github.io/PrefaceCSS/dist/index.html)

*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 `` or `` to your ``.

### 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:

- `scss` compiles the scss to css

- `scss:min` compress the compiled css files

- `watch` executes `scss` and `scss:min` on any file change

**Note**

```diff

- 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](https://github.com/oltdaniel/skeleton-plus) by [oltdaniel](https://github.com/oltdaniel).  

CSS loaders from [Spinkit](https://tobiasahlin.com/spinkit/) & [Loading.io](https://loading.io/css/)

## Credits

A project by [Conner Luzier](https://github.com/cluzier).

Other amazing contributors [here](https://github.com/cluzier/PrefaceCSS/graphs/contributors).