react-spectre

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

This project is under development.

Not ready for production use.

Check the roadmap

Packages

Elements

Package	Size (min+gzip) 1	Components
Elements	3.98 kB	Contains all subsequent elements packages.
Typography	1.67 kB	H1, H2, H3, H4, H5, H6, Label.
Table	1.67 kB	Table, Header, Body, Row, Heading, Cell.
Button	1.74 kB	Button, Group.
Form	1.82 kB	FormGroup, Input, TextArea, Select, Radio, CheckBox, Switch.
Icon	1.49 kB	Icon.
Label	1.6 kB	Label.
Media	1.82 kB	Image, Figure, Video, Container.

Layout

Package	Size (min+gzip) 1	Components
Layout	2.07 kB	Contains all subsequent layout packages.
Grid	1.77 kB	Grid, Row, Col.
Navbar	1.59 kB	Navbar, Section, Brand.

Components

Package	Size (min+gzip) 1	Components
Components	3.11 kB	Contains all subsequent components packages.
Accordion	1.6 kB	Accordion, Header, Body.
Autocomplete	1.58 kB	Autocomplete, Input, Menu.
Avatar	1.75 kB	Avatar, Icon, Presence.
Badge	1.4 kB	Badge.
Bar	1.75 kB	Bar, Slider.
Toast	1.62 kB	Toast.

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

Made with ❤️ by Rubens Mariuzzo.

MIT License