Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

styled-minimal

Package Overview
Dependencies
3
Maintainers
1
Versions
50
Issues
File Explorer

Advanced tools

styled-minimal

Minimal UI theme with styled-components

    0.9.0latest

Version published
Maintainers
1
Yearly downloads
11,190
decreased by-26.28%

Weekly downloads

Changelog

Source

0.9.0

  • ♻️ Refactor getTheme and baseStyles: 47fc8469fdc7932cb20cfcf3892dd9a803dadec4
  • ♻️ Rename Heading size to level: d175691aecda66c22555e2bdf0415d5907855781
  • ♻️ Refactor breakpoints to an object instead of an array: fdfeeb327f19ec248706c9cc1455fa462fac382a
  • 💄 Update requiredColor to #999: 0d6cc1d280e7e1ab3b6b7c34ea7aca27cb756941
  • 🔅 Minor fixes: c4409c815acb71b8bd87640d700bb40f4e85663e
  • 🔧 Fix .eslintignore: 642005a1e52f299d33adc1c10509df0bc32139b2
  • 📚 Update storybook: 6dd5e16bfb11a55746d1c718dba2fefaa6392400

Breaking changes

  • Heading uses a prop called level instead of size to set the font-size
  • The theme's breakpoints scale is an object

Readme

Source

styled-minimal

Build Status Dependencies Maintainability Test Coverage

Minimal UI theme with styled-components, styled-system and polished.

Demo

Storybook: https://gilbarbara.github.io/styled-minimal/
Sandbox: https://k958nr9lno.codesandbox.io/

Setup

npm i styled-minimal styled-components

Warning: styled-minimal is intended to be used with styled-components v4. Some features may not work with older versions.

import { Box, Button, Container, Flex, Heading } from 'styled-minimal'; const MyComponent = () => { return ( <Container> <Flex> <Heading>Hello</Heading> <Box mx="auto" /> <Button>Click Me</Button> </Flex> </Container> ); };

Theming

Wrap your app in a ThemeProvider with a theme object.

All components have style-system css props, like display, fontSize and much more that are also responsive. For more information on these props, read styled-system API docs.

import { ThemeProvider } from 'styled-components'; import { Container } from 'styled-minimal'; const theme = { button: { borderRadius: { xs: '2px', sm: '3px', md: '4px', lg: '6px', xl: '8px', }, }, space: [0, 4, 8, 12, 16, 24, 32, 64, 128], breakpoints: { xs: 0, ix: 400, md: 768, lg: 1024, xl: 1360, xxl: 1920, }, fontSizes: [12, 14, 16, 18, 22, 26, 32, 48], }; const MyComponent = () => { return ( <ThemeProvider theme={theme}> <Container display="flex">...</Container> </ThemeProvider> ); };

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc