bloc-legacy

KO | EN

gitlite — search

#tailwindcss #graphql #kubernetes #awesome-list #machine-learning #proxy #kotlin #rust #html #ai

(★ 8)

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.

File Explorer

ZIP Download

- - .gitkeep
  - DarwinLight.eot
  - DarwinLight.ttf
  - DarwinLight.woff
  - fontawesome-webfont.eot
  - fontawesome-webfont.svg
  - fontawesome-webfont.ttf
  - fontawesome-webfont.woff
  - fontawesome-webfont.woff2
  - FontAwesome.otf
  - Graphik-Bold.eot
  - Graphik-Bold.ttf
  - Graphik-Bold.woff
  - Graphik-Light.eot
  - Graphik-Light.ttf
  - Graphik-Light.woff
  - Graphik-Medium.eot
  - Graphik-Medium.ttf
  - Graphik-Medium.woff
  - Graphik-Regular.eot
  - Graphik-Regular.ttf
  - Graphik-Regular.woff
  - Graphik-Semibold.eot
  - Graphik-Semibold.ttf
  - Graphik-Semibold.woff
  - InteloBold.eot
  - InteloBold.ttf
  - InteloItalic.eot
  - InteloItalic.ttf
  - InteloRegular.eot
  - InteloRegular.ttf
  - TiemposHeadline-Light.eot
  - TiemposHeadline-Light.ttf
  - TiemposHeadline-Light.woff
  - TiemposHeadline-Medium.eot
  - TiemposHeadline-Medium.ttf
  - TiemposHeadline-Medium.woff
  - TiemposHeadline-Regular.eot
  - TiemposHeadline-Regular.otf
  - TiemposHeadline-Regular.ttf
  - TiemposHeadline-Regular.woff
  - TiemposHeadline-Semibold.ttf
  - TiemposHeadline-Semibold.woff
  - Univers-Bold.eot
  - Univers-Bold.otf
  - Univers-Bold.ttf
  - Univers-Bold.woff
  - Univers-Light.eot
  - Univers-Light.otf
  - Univers-Light.ttf
  - Univers-Light.woff
  - Univers-Oblique.eot
  - Univers-Oblique.otf
  - Univers-Oblique.ttf
  - Univers-Oblique.woff
  - univers.eot
  - Univers.otf
  - Univers.ttf
  - Univers.woff
- - logo-white.png
  - logo.png
  - overlay.png
- - main.js
  - normalizeElementHeights.js
- manifest.json
- .gitkeep
- - bloc.min.css
.babelrc
.bowerrc
.gitignore
favicon.ico
gulpfile.js
index.html
package-lock.json
package.json
README.md
webpack.config.js
webpack.production.config.js

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## 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
<div class="my-fancy-component">
    <span class="my-fancy-component__my-fancy-part">Hello</span>
    <span class="my-fancy-component__my-fancy-part --inactive">Hello</span>
</div>
```

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.

bloc-legacy

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README