css-skeleton

A css module compatible version of skeleton.

You will need to use react-css-modules to make use of the class names as skeleton classes are not camelCase.

It would be possible to make a version compatible to just css modules in the future.

Installation

npm install css-skeleton --save-dev

Usage

Simply import your skeleton css modules

import { base, buttons, grid } from 'css-skeleton'

Then use it for styling your elements.

  <div styleName='container'>
    <div styleName='row'>
      <div styleName='six column'>
        <h2>Heading</h2>
      </div>
      <div styleName='six columns'>
        <input type='button' value='button input' />
      </div>
    </div>
  </div>

Example

Check out the full working example here

import React from 'react'
import CSSModules from 'react-css-modules'

import { base, buttons, grid } from 'css-skeleton'
let styles = {}
Object.assign(styles, base, buttons, grid)

class Test extends React.Component {
    render () {
        return (
        <div styleName='container'>
          <div styleName='row'>
            <div styleName='six column'>
              <h2>Heading</h2>
            </div>
            <div styleName='six columns'>
              <input type='button' value='button input' />
            </div>
          </div>
        </div>
        );
    }
}

export default CSSModules(Test, styles);

modules

You should include the font on the page as follows if you want Raleway as is used in CSS Skeleton's examples:

<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>

• normalize
• base (this includes misc and clearing)
• grid
• typography
• links
• buttons
• forms
• lists
• code
• tables
• spacing
• utilities
• media queries (no need to import these, you just use them in your own modules)

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

License

MIT