Giter Club home page Giter Club logo

react-pure's Introduction

react-pure

React components using Pure CSS.

Install

npm install react-pure

React is also required as a peer dependency.

Components

Button

Pure CSS reference

Properties

  • active: bool (optional, defaults to false): adds the pure-button-active class.
  • disabled: bool (optional, defaults to false): adds the pure-button-disabled class.
  • primary: bool (optional, defaults to false): adds the pure-button-primary class.
  • href: string (optional): if set, renders a <a> element instead of <button>.

Cell

A Cell is an element of a Pure CSS Grid

Properties

  • size: string (optional, defaults to 1): adds the pure-u-{size} class. You can use the / separator instead of -, ex: <Cell size='1/3'>.
  • sm: string (optional): adds the pure-u-sm-{sm} class.
  • md: string (optional): adds the pure-u-md-{md} class.
  • lg: string (optional): adds the pure-u-lg-{lg} class.
  • xl: string (optional): adds the pure-u-xl-{xl} class.

Menu

Pure CSS reference

Properties

  • horizontal: bool (optional, defaults to false): adds the pure-menu-horizontal class.
  • scrollable: bool (optional, defaults to false): adds the pure-menu-scrollable class.

MenuItem

Renders a <li> node with the pure-menu-item class by default.

Properties

  • allowHover: bool (optional, defaults to false): adds the pure-menu-allow-hover class.
  • disabled: bool (optional, defaults to false): adds the pure-menu-disabled class.
  • hasChildren: bool (optional, defaults to false): adds the pure-menu-has-children class.
  • selected: bool (optional, defaults to false): adds the pure-menu-selected class.

Table

Pure CSS reference

Properties

  • bordered: bool (optional, defaults to false): adds the pure-table-bordered class.
  • horizontal: bool (optional, defaults to false): adds the pure-table-horizontal class.
  • striped: bool (optional, defaults to false): adds the pure-table-striped class.

Changelog

v0.3.0 (15/04/15)

  • Updated Babel to v5.
  • Removed size property from Button as it is not a default Pure class.

v0.2.4 (23/03/15)

Fixed MenuItem export.

v0.2.3 (18/03/15)

Added babel-runtime as a dependency to avoid duplicate declarations in modules.

v0.2.2 (12/03/15)

Publish source in npm package so that apps can use their own transpiler.

v0.2.0 (11/03/15)

This version is meant to be used with React v0.13 and Pure v0.6.

  • Added MenuItem element.
  • Added scrollable property to Menu (Pure v0.6).
  • Removed open property from Menu (Pure v0.6).
  • Removed the joinClasses() util, classnames is used internally instead.

v0.1.0 (21/01/15)

Initial release, using React v0.12 and Pure v0.5.

License

Apache 2.0
Copyright 2015 Hailo

react-pure's People

Contributors

saulhoward avatar

Watchers

Stuart Grimshaw avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.