Package Exports

seturon_design
seturon_design/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (seturon_design) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

yarn add seturon

Methodology

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

styled-components

seturon_design