Seturon

Seturon Atomic Design System.

About methodology

Atomic Design is a methodology that helps us to think about the user interface (UI) in a hierarchical way and reinforces the importance of the quality of effective pattern libraries, and presents techniques to optimize the design and team development workflow. Atomic Design also details what happens during the creation and maintenance of design systems, allowing the implementation of UIs with more consistency and quality.

Installation

npm i seturon -S

or

yarn add seturon

Example

import { Button, Card } from 'seturon';

...

export const atom = (props) => (
  <Button>Hello, World!</Button>
);


export const molecule = (props) => (
    <Card>
        <Button>Hello, World!</Button>
    </Card>
);

export const organism = (props) => (
    <CustomList
        data={props.items}
        renderItem={<Card />}
        keyExtractor={item => item.id}
    />
);

Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure. To build on our previous example, we can take the header organism and apply it to a homepage template.

Pages are specific instances of templates that show what a UI looks like with real representative content in place. Building on our previous example, we can take the homepage template and pour representative text, images, and media into the template to show real content in action.

Atoms

• Alert
• Badge
• Base
• Breadcrumb
• Button
• Card
• Container
• Dropdown
• Form
• Grid
• Jumbotron
• Listgroup
• Modal
• Nav
• Navbar
• Popover
• Table
• Tooltip
• Icons
• Spinner
• Wrap
• Utilities
• Range
• Switch

Molucules

• AlertIcon
• BadgeIcon
• ButtonIcon
• InputIcon
• TableCard

Related

• styled-components