react-spectre

React components for Spectre.css - a Lightweight, Responsive and Modern CSS Framework

Packages

Elements

Layout

Components

Note: ¹ the gzipped size of the UMD build.

Development

It is recommended to use yarn for easy development.

Setup

1. yarn or npm install
2. yarn lerna -- bootstrap o npm run lerna -- bootstrap

Creating a new package

The script way:

yarn package:create -- <name-of-package>

The manual way:

1. Create a directory inside packages.
2. Copy LICENSE file from another package.
3. Copy README.md file from another package and modify it.
4. Copy assets directory from another package.
5. Run yarn init or npm package (don't worry for the version, it will be overriden on publishing).
6. Modify the package.json file and add { "publishConfig": { "access": "public" } } (this allow the package to be published with lerna as scoped package).

Roadmap

• Elements

  • Typography
  • Tables
  • Buttons
  • Forms
  • Icons
  • Labels
  • ~Code~
  • Media

• Layout

  • Flexbox Grid
  • Responsive
  • Navbar

• Components

  • Accordions
  • Autocomplete
  • Avatars
  • Badges
  • Bars
  • Breadcrumbs - View issue
  • Cards
  • Chips - View issue
  • Empty states - View issue
  • Menus - View issue
  • Modals - View issue
  • Navs - View issue
  • Pagination - View issue
  • Panels
  • Popovers - View issue
  • Steps
  • Tabs - View issue
  • Tiles - View issue
  • Toasts
  • Tooltips - View issue

• Utilities:

  • ~Colors~
  • ~Cursors~
  • ~Display~
  • Divider - View issue
  • Loading - View issue
  • ~Position~
  • ~Shapes~
  • ~Text~