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
Type this command inside your terminal at the root of your project :
npm i reactoms
-
If you change the components code, you need to compile them :
npm run build -
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
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)