Introducing Undecorated: Collection of reusable layout pattern of CSS and styled-components

Makoto Tateno — Sat, 12 Oct 2019 13:07:34 +0000

Introducing new project called Undecorated. This is available at https://makotot.github.io/undecorated/.

I made Undecorated mainly for the following two purposes.

To be able to browse a variety of reusable CSS layout patterns and make them available for instant copy and paste.
Just import it with npm so that you can create the layout you want.

There are multiple sites that list layout patterns in grid and sites that introduce layout patterns in flexbox, but I could not find any sites that could view various layout patterns (regardless of properties such as flexbox, grid, table, etc) .
So I wanted to create a site where I could browse various CSS layout patterns.

In addition, I want to make those layout patterns available anywhere just by import(
For now with styled-components).
For example, if you want to center an element vertically and horizontally, you can do it by just following.

import { Centered } from 'undecorated'

<Centered>
  <SomethingYouWantToCenter />
</Centered>

Unlike the existing flexbox and grid utility libraries that leave the layout to the user, it only provides patterns that achieve a specific CSS layout.

The source code is on Github.

DEV Community: Makoto Tateno

Introducing Undecorated: Collection of reusable layout pattern of CSS and styled-components