An open API service indexing awesome lists of open source software.

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.

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.