https://github.com/opr/bloc-legacy
A collection of files that make it easy to rapidly prototype front-end components using JavaScript, Sass and CSStyle's implementation of the BEM methodology.
https://github.com/opr/bloc-legacy
bem-methodology cstyle sass
Last synced: 6 months ago
JSON representation
A collection of files that make it easy to rapidly prototype front-end components using JavaScript, Sass and CSStyle's implementation of the BEM methodology.
- Host: GitHub
- URL: https://github.com/opr/bloc-legacy
- Owner: opr
- Created: 2016-05-19T14:10:02.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-28T18:06:38.000Z (over 7 years ago)
- Last Synced: 2025-03-31T04:05:24.237Z (7 months ago)
- Topics: bem-methodology, cstyle, sass
- Language: CSS
- Homepage:
- Size: 35.6 MB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Synopsis
A collection of files that make it easy to rapidly prototype front-end components using JavaScript, Sass and [CSStyle's](https://github.com/geddski/csstyle) implementation of the BEM methodology.
## Code Example
HTML to make a component called "my fancy component" with two pieces of text in, one with a fancy option and one without.
File: **components/my-fancy-component.php**
```html
Hello
Hello
```
The sass below sets up the component: "my-fancy-component", the parts of the component: "my-fancy-part" and an option that can be applied to the parts: "inactive".
File: **assets/styles/scss/components/_my-fancy-component.scss**
```sass
@include component('my-fancy-component') {
@include part('my-fancy-part') {
color: green;
@include option('inactive') {
color: #444;
}
}
}
```
## Installation
Clone/download the repo into a folder somewhere on your machine. Open a command window, [Git Bash](https://git-for-windows.github.io/) is recommended if you're using windows.
Open **gulpfile.js** and check that the "appUrl" variable on line 4 is set to where you access the project in your browser.
## License
Do what you want.