A highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.

This project is implementation of creating simple usefull layout with simple usefull CSS property. Background use-cases of this project is based on this link https://1linelayouts.glitch.me/. And i try to implement that use-cases with real design reference from UI Design Daily, so hopefully it can be more easily understand how to create that cases.

Getting the design from UI Design Daily.

UI Design Daily is free, Open-source UI design resources updated daily.

Here's some design reference to create some layouts :

1. Design 1 reference

   

2. Design 2 reference

   

Here's some of tech-stack that used in development process :

Here's some cases that i choosed based on reference from glitch

This feature is to make the content has vertical & horizontal centered using CSS property grid also place-items: center

In any case, we create Centering Content layout either using absolute with transform combination, using margin: auto in some cases, or using flexbox But, now we can tackle this case more easily using css grid This is because grid supports for creating layout with 2 dimensional. Check it

Here's the shortcode

.l-center-content {
    display: grid;
    place-items: center;
}

This feature is to make the content has fixed width, stacked when on the mobile screen, also spanning into the same line.

Here's the shortcode

.l-deconstructed-pancake {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.l-deconstructed-pancake__item {
    flex: 0 1 220px;
    margin: 0 8px;
}

.l-deconstructed-pancake__item--stretch {
    flex: 1 1 220px;
}

This feature is to make the content has same dimension.

This case is very suitable when we create common layout that contains header, content, footer. It's gonna make header and footer stick in their position eventho the content is not fully cover the viewport. It can tackle issue if the website doesn't has any content to show such as search not found.

Here's the shortcode

.l-pancake-stack {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

Here's the shortcode

.l-ram {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

This feature is maintain ratio of content using CSS property aspect-ratio

Sometimes we create ratio content using combination between padding-top and position:absolute But, now we can create that case with only simple CSS code.

Here's the shortcode

.l-ratio-16x9 {
    aspect-ratio: 16 / 9;
}

Clone this repository.

Enter directory of project

cd one-line-layouts

...then install dependency

npm install

or

yarn install

Run local development

npm run serve

or

yarn serve

Build for development env

npm run dev

or

yarn dev

Build for production env

npm run build

or

yarn build