One Line Layouts

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

Intro

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.

Design Reference

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

   

Tech Stack

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

List	Description
Gulp	A toolkit to automate & enhance your workflow. Using it as task runner.
AtomicCSS	Utility first CSS like inline styles, offers single-purpose units of style, but applied via classes.
SASS	CSS-preproceccor. Using it to tackle undefined CSS-property in Atomizer such as grid, aspect-ratio, etc.
Vercel	Serverless hosting for host websites and web services that deploy instantly and scale automatically – all without any configuration.

Cases

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

1. Super Centered layout

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;
}

2. The Deconstructed Pancake layout

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;
}

3. Pancake Stack Pancake layout

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;
}

4. RAM (Repeat, Auto, Minmax) Pancake layout

Here's the shortcode

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

5. Respect for Aspect layout

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;
}

Get started

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