https://github.com/leecheneler/easy-css
A simple ITCSS & BEM CSS framework written in Sass
https://github.com/leecheneler/easy-css
bem itcss sass sass-framework
Last synced: 6 months ago
JSON representation
A simple ITCSS & BEM CSS framework written in Sass
- Host: GitHub
- URL: https://github.com/leecheneler/easy-css
- Owner: LeeCheneler
- License: mit
- Archived: true
- Created: 2016-12-28T19:00:57.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-24T21:50:56.000Z (over 8 years ago)
- Last Synced: 2024-12-15T09:40:53.406Z (over 1 year ago)
- Topics: bem, itcss, sass, sass-framework
- Language: CSS
- Homepage: https://leecheneler.github.io/easy-css/demo/
- Size: 184 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# easy-css
easy-css is a simple, layout only ITCSS and BEMIT SASS framework. It does not extend beyond the object layer in ITCSS and so has no visual styling.
#### Demo
[https://leecheneler.github.io/easy-css/demo/](https://leecheneler.github.io/easy-css/demo/)
## Getting Started
easy-css is designed to be extended, not consumed. If you just compiled and used it in your site you will find that you hit specificity issues when placing your own CSS beneath it.
#### Install easy-css
```
npm install easy-css --save
```
#### Setup ITCSS Folders
You need to set up your own ITCSS architecture within your app. Then import each layer of easy-css into each of your layers one by one to serve as the bedrock of you ITCSS project.
##### src/sass/_base.scss
```
@import 'easy-css/base';
```
##### src/sass/_objects.scss
```
@import 'easy-css/objects';
```
##### src/sass/_resets.scss
```
@import 'easy-css/resets';
```
##### src/sass/_settings.scss
```
@import 'easy-css/settings';
```
##### src/sass/_tools.scss
```
@import 'easy-css/tools';
```
##### src/sass/_utilities.scss
```
@import 'easy-css/utilities';
```
##### src/sass/main.scss
```
@import 'settings';
@import 'tools';
@import 'resets';
@import 'base';
@import 'objects';
@import 'utilities';
```
#### Compiling You SASS
This library won't have widespread use so I'm going to assume you're familiar with webpack and how to load CSS via it. (I recommend css-loader/postcss-loader/sass-loader).
Here is some example config to configure webpack:
```
{
// Load .scss and .css files through the following loaders:
// - sass-loader (compiles sass to css)
// - postcss-loader (applies autoprefixer plugin to css)
// - css-loader
// - loads css as plain text
// Then the ExtractTextPlugin swallows the output and injects it as a css file on the web page
test: /\.s?css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
autoprefixer({
browsers: ['last 2 versions', 'ie 9-11']
})
]
}
},
{
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, './node_modules/easy-css')
]
}
}
]
})
},
```
## Inspiration
Great inspiration was taken from the [nebula-css](https://github.com/rbrtsmith/nebula-css) framework written by a great CSS author Robert Smith. He's been a great mentor throughout its development.