README
Neckbeard
Neckbeard is an Atomic CSS in JS Framework highly inspired by Beard and powered by Aphrodite. Neckbeard provides common CSS utility classes to help you scaffold components quickly.
Documentation Site
Benefits
- Works great with component based frameworks / libraries like React or standalone.
- No longer worry about naming CSS selectors.
- No more CSS selector specificity collisions.
- Injects only the exact styles needed to render into the DOM. (Aphrodite).
- Easily extensible by adding your own helpers or overwrite existing ones.
- Installable via NPM (import or require) or just drop it in via CDN (umd).
- 11.5kb gzipped
Installation
npm install neckbeard --save-dev
CDN (umd version)
Development
- Clone
npm install
npm start (Starts Neckbeard Docs Site - http://localhost:8080)
npm run build - (Builds umd version of Neckbeard and CSS file)
npm run build:docs - (Builds docs / demo site)
Example
import React, { Component } from 'react';
import Neckbeard from 'neckbeard'
const settings = {
...Neckbeard.defaultSettings
// new settings here
}
const nb = Neckbeard.create(settings)
class App extends Component {
render() {
return (
<div className={ nb("flex jcc aic absolute h100 w100") }>
<p className={ nb("ft5 tc1 tac fwthin") }>
Neckbeard
</p>
</div>
)
}
}
export default App