All Projects → blueberryapps → radium-bootstrap-grid

blueberryapps / radium-bootstrap-grid

Licence: MIT license
Bootstrap grid system as React components with inline styles!

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to radium-bootstrap-grid

bootstrap-grid-ms
Missing grid range in Bootstrap 3, micro-small from 480-767px.
Stars: ✭ 34 (+88.89%)
Mutual labels:  bootstrap-grid
template-mundana-bootstrap-html
Free blogging template by Sal (@wowthemesnet). Beautifully crafted with the latest technologies, SASS & Bootstrap 4.1.3, Mundana is the perfect design for your professional blog.
Stars: ✭ 39 (+116.67%)
Mutual labels:  bootstrap-grid
lambda-wallpapers
All of my wallpapers in one repo.
Stars: ✭ 123 (+583.33%)
Mutual labels:  radium
Sketch-Guides
Quickly generate Guides for a selected element in Sketch
Stars: ✭ 74 (+311.11%)
Mutual labels:  bootstrap-grid
frontie
Frontie is a front-end boilerplate. Gulp | Twig.js | Sass | Autoprefixer | Browsersync | Bootstrap 4 Grid System & Responsive Breakpoints
Stars: ✭ 28 (+55.56%)
Mutual labels:  bootstrap-grid
react-svg-icon-generator
Generate React Icon Component from SVG icons to show, resize and recolor them.
Stars: ✭ 65 (+261.11%)
Mutual labels:  radium
sketch-bootstrap-helpers
Helpers plugin to work with bootstrap grid in Sketch
Stars: ✭ 16 (-11.11%)
Mutual labels:  bootstrap-grid

Radium Bootstrap Grid Dependency Status

Grid system based on Twitter Bootstrap but with additional 480px breakpoint.

Install

$ npm install --save radium-bootstrap-grid

Add it to your project

Look at example directory and you need to add only:

import Component from 'react-pure-render/component';
import Radium from 'radium';
import React from 'react';
import { Column, Container, Row } from 'radium-bootstrap-grid';

@Radium
export default class Page extends Component {

  render() {
    return (
      <Container>
        <Row>
          <Column
            ms={4}
            xsHidden
          >
            Make a column
          </Column>
        </Row>
      </Container>
    );
  }

}

Supported features

Multiple stacking option

<Column lg={1} md={3} ms={6} sm={4} xs={12}>Adjust to the device</Column>

Hiding columns

<Column lgHidden mdHidden msHidden smHidden xsHidden>Hidden forever</Column>

Example app

$ npm install
$ cd ./example_app
$ npm install
$ npm start

This will start development server at http://localhost:3001/ and you can check the grid.

License

MIT © Jiri Orsag

Made with love by

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].