DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Makoto Tateno
Makoto Tateno

Posted on • Updated on

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

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.

Top comments (0)

Want to rep DEV and be comfy at the same time?

Check out our classic DEV shirt β€” available in multiple colors.