refactornator / minimal-components

A minimal set of styled components for building a webapp.

Home Page:https://wl3.me/minimal-components/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A set of minimal styled components useful for providing layout in a React web app.

Styled components are great for isolating your CSS which makes it easier to maintain. This library provides a minimal set of styled components that are designed to be extended. Rather than dictating the style of your web app, these minimal components just provide a useful layout to build your web app off of.

Example

import React from 'react';

import { Grid, Row, Column } from 'minimal-components';

const Menu = Row.extend`
  height: 45px;
  line-height: 41px;
  background-color: #ced1d6;
`;

const Item = Column.extend`
  margin: 2px;
  cursor: pointer;
  justify-content: center;
  background-color: #ffb83f;

  &:hover {
    background-color: #ec5252;
  }

  &:active {
    color: white;
    background-color: #2955ae;
  }
`;

const Header = () => (
  <Menu>
    <Item size={1}>Home</Item>
    <Item size={1}>About</Item>
    <Item size={1}>Projects</Item>
  </Menu>
);

export default Header;

About

A minimal set of styled components for building a webapp.

https://wl3.me/minimal-components/


Languages

Language:JavaScript 100.0%