Skip to content

philippebeck/reactoms

Repository files navigation

Welcome to Reactoms !

A React Components Library made with TypeScript, Sass, Vite & Atomic Design : Card, Collapse, Icon, Image, Link, List for Atoms & Button, Footer, Gallery, Navbar, Slider, Title for Molecules

NPM Version

GitHub Top Language Code Size

GitHub Last Commit Codacy Badge


Installation

Type this command inside your terminal at the root of your project :
npm i reactoms


Usage

  1. If you change the components code, you need to compile them :
    npm run build

  2. Then use the compiles files of the dist folder for your prod UI like this (choose the components you want) :

  • inside your pages : import { Button, Card, Collapse, Footer, Gallery, Icon, Image, Link, List, Navbar, Slider, Title } from 'reactoms' for the components
  • inside your index.html : <style rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"></style> for the icons
  • inside your index.html again : <style rel="stylesheet" href="node_modules/reactoms/dist/style.css"></style> for the style

Content

Assets :

  • Style => imports variables & mixins + common styles
  • Style Variables => breakpoints, fonts, colors, transforms
  • Style Mixins => font-face & keyframes

Atoms :

  • Card => figure -> (figcaption)
  • Collapse => details -> summary + figure
  • Icon => i
  • Image => img
  • Link => a
  • List => ul -> li

Molecules :

  • Button => Link -> Icon + (b)
  • Footer => footer -> List -> Button
  • Gallery => List -> Link -> (Card -> Image + Title + List -> Icon)
  • Navbar => nav -> Button + (List -> Button) + Button
  • Slider => figure -> (nav -> Icon) + progress
  • Title => hgroup -> (p -> Icon) + h1 | h2 | h3 | h4 + (p)

Documentation

About

React Components Library made with TypeScript, Sass & Vite

Resources

License

Stars

Watchers

Forks

Packages

No packages published