https://github.com/react-spectre/react-spectre
React components for Spectre.css - a Lightweight, Responsive and Modern CSS Framework
https://github.com/react-spectre/react-spectre
component-library react-components spectre-css
Last synced: 12 months ago
JSON representation
React components for Spectre.css - a Lightweight, Responsive and Modern CSS Framework
- Host: GitHub
- URL: https://github.com/react-spectre/react-spectre
- Owner: react-spectre
- License: mit
- Created: 2018-01-02T22:31:54.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T04:51:58.000Z (over 3 years ago)
- Last Synced: 2024-11-22T01:02:36.588Z (over 1 year ago)
- Topics: component-library, react-components, spectre-css
- Language: JavaScript
- Size: 6.12 MB
- Stars: 65
- Watchers: 6
- Forks: 13
- Open Issues: 47
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-spectre
React components for Spectre.css - a Lightweight, Responsive and Modern CSS Framework
[](https://lernajs.io/)
[](https://travis-ci.org/react-spectre/react-spectre)
# This project is under development.
## Not ready for production use.
### [Check the roadmap](#roadmap)
## Packages
### Elements
Package | Size (min+gzip) 1 | Components
:------ | :--------------------------- | :---------
||
[**Elements**](packages/elements) | **3.98 kB** | **Contains all subsequent elements packages.**
||
[**Typography**](packages/typography) | 1.67 kB | `H1`, `H2`, `H3`, `H4`, `H5`, `H6`, `Label`.
[**Table**](packages/table) | 1.67 kB | `Table`, `Header`, `Body`, `Row`, `Heading`, `Cell`.
[**Button**](packages/button) | 1.74 kB | `Button`, `Group`.
[**Form**](packages/form) | 1.82 kB | `FormGroup`, `Input`, `TextArea`, `Select`, `Radio`, `CheckBox`, `Switch`.
[**Icon**](packages/icon) | 1.49 kB | `Icon`.
[**Label**](packages/label) | 1.6 kB | `Label`.
[**Media**](packages/media) | 1.82 kB | `Image`, `Figure`, `Video`, `Container`.
### Layout
Package | Size (min+gzip) 1 | Components
:------ | :--------------------------- | :---------
||
[**Layout**](packages/layout) | **2.07 kB** | **Contains all subsequent layout packages.**
||
[**Grid**](packages/grid) | 1.77 kB | `Grid`, `Row`, `Col`.
[**Navbar**](packages/navbar) | 1.59 kB | `Navbar`, `Section`, `Brand`.
### Components
Package | Size (min+gzip) 1 | Components
:------ | :--------------------------- | :---------
||
[**Components**](packages/components) | **3.11 kB** | **Contains all subsequent components packages.**
||
[**Accordion**](packages/accordion) | 1.6 kB | `Accordion`, `Header`, `Body`.
[**Autocomplete**](packages/autocomplete) | 1.58 kB | `Autocomplete`, `Input`, `Menu`.
[**Avatar**](packages/avatar) | 1.75 kB | `Avatar`, `Icon`, `Presence`.
[**Badge**](packages/badge) | 1.4 kB | `Badge`.
[**Bar**](packages/bar) | 1.75 kB | `Bar`, `Slider`.
[**Toast**](packages/toast) | 1.62 kB | `Toast`.
**Note:** 1 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**:
```shell
yarn package:create --
```
**The manual way**:
1. Create a directory inside [`packages`](packages).
2. Copy [`LICENSE`](packages/typography/LICENSE) file from another package.
3. Copy [`README.md`](packages/typography/README.md) file from another package and modify it.
4. Copy [`assets`](packages/typography/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**
- [x] Typography
- [x] Tables
- [x] Buttons
- [x] Forms
- [x] Icons
- [x] Labels
- [ ] ~Code~
- [x] Media
- **Layout**
- [x] Flexbox Grid
- [x] Responsive
- [x] Navbar
- **Components**
- [x] Accordions
- [x] Autocomplete
- [x] Avatars
- [x] Badges
- [x] Bars
- [ ] Breadcrumbs - [View issue](https://github.com/react-spectre/react-spectre/issues/9)
- [x] Cards
- [ ] Chips - [View issue](https://github.com/react-spectre/react-spectre/issues/11)
- [ ] Empty states - [View issue](https://github.com/react-spectre/react-spectre/issues/12)
- [ ] Menus - [View issue](https://github.com/react-spectre/react-spectre/issues/13)
- [ ] Modals - [View issue](https://github.com/react-spectre/react-spectre/issues/14)
- [ ] Navs - [View issue](https://github.com/react-spectre/react-spectre/issues/15)
- [ ] Pagination - [View issue](https://github.com/react-spectre/react-spectre/issues/16)
- [x] Panels
- [ ] Popovers - [View issue](https://github.com/react-spectre/react-spectre/issues/18)
- [x] Steps
- [ ] Tabs - [View issue](https://github.com/react-spectre/react-spectre/issues/20)
- [ ] Tiles - [View issue](https://github.com/react-spectre/react-spectre/issues/21)
- [x] Toasts
- [ ] Tooltips - [View issue](https://github.com/react-spectre/react-spectre/issues/23)
- **Utilities**:
- [ ] ~Colors~
- [ ] ~Cursors~
- [ ] ~Display~
- [ ] Divider - [View issue](https://github.com/react-spectre/react-spectre/issues/24)
- [ ] Loading - [View issue](https://github.com/react-spectre/react-spectre/issues/25)
- [ ] ~Position~
- [ ] ~Shapes~
- [ ] ~Text~
Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).
[MIT License](LICENSE)