Showing preview only (454K chars total). Download the full file or copy to clipboard to get everything.
Repository: phuocng/csslayout
Branch: master
Commit: ecf92df03a34
Files: 120
Total size: 424.4 KB
Directory structure:
gitextract_eojep_s2/
├── .gitignore
├── LICENSE
├── README.md
└── contents/
├── accordion.mdx
├── arrow-buttons.mdx
├── avatar-list.mdx
├── avatar.mdx
├── badge.mdx
├── box-selector.mdx
├── breadcrumb.mdx
├── button-with-icon.mdx
├── calendar.mdx
├── card-layout.mdx
├── card.mdx
├── carousel-slider.mdx
├── center-align-one-and-left-align-the-other.mdx
├── centering.mdx
├── chip.mdx
├── circular-navigation.mdx
├── close-button.mdx
├── color-swatch.mdx
├── concave-corners.mdx
├── cookie-banner.mdx
├── corner-ribbon.mdx
├── curved-background.mdx
├── custom-checkbox-button.mdx
├── custom-radio-button.mdx
├── diagonal-section.mdx
├── docked-at-corner.mdx
├── dot-leader.mdx
├── dot-navigation.mdx
├── drawer.mdx
├── drop-area.mdx
├── drop-cap.mdx
├── dropdown.mdx
├── fading-long-section.mdx
├── feature-comparison.mdx
├── feature-list.mdx
├── fixed-at-corner.mdx
├── fixed-at-side.mdx
├── flipping-number.mdx
├── floating-label.mdx
├── folded-corner.mdx
├── folder-structure.mdx
├── frame-corners.mdx
├── full-background.mdx
├── full-screen-menu.mdx
├── grid-lines-background.mdx
├── grid-without-double-borders.mdx
├── holy-grail.mdx
├── indeterminate-progress-bar.mdx
├── initial-avatar.mdx
├── input-addon.mdx
├── inverted-corners.mdx
├── keyboard-shortcut.mdx
├── layered-card.mdx
├── linear-gauge.mdx
├── lined-paper.mdx
├── masonry-grid.mdx
├── media-object.mdx
├── mega-menu.mdx
├── menu.mdx
├── modal.mdx
├── nested-dropdowns.mdx
├── notification.mdx
├── overlay-play-button.mdx
├── pagination.mdx
├── pie-chart.mdx
├── popover-arrow.mdx
├── presence-indicator.mdx
├── previous-next-buttons.mdx
├── price-tag.mdx
├── pricing-table.mdx
├── progress-bar.mdx
├── property-list.mdx
├── questions-and-answers.mdx
├── radial-progress-bar.mdx
├── radio-button-group.mdx
├── radio-switch.mdx
├── rating.mdx
├── resizable-element.mdx
├── ribbon.mdx
├── same-height-columns.mdx
├── search-box.mdx
├── separator.mdx
├── sidebar.mdx
├── simple-grid.mdx
├── slider.mdx
├── speech-bubble.mdx
├── spin-button.mdx
├── spinner.mdx
├── split-navigation.mdx
├── split-screen.mdx
├── stacked-cards.mdx
├── stamp-border.mdx
├── statistic.mdx
├── status-light.mdx
├── stepper-input.mdx
├── sticky-footer.mdx
├── sticky-header.mdx
├── sticky-sections.mdx
├── sticky-table-column.mdx
├── sticky-table-headers.mdx
├── switch.mdx
├── tab.mdx
├── teardrop.mdx
├── three-dimensions-card.mdx
├── timeline.mdx
├── toggle-password-visibility.mdx
├── tooltip.mdx
├── tree-diagram.mdx
├── triangle-buttons.mdx
├── upload-button.mdx
├── validation-icon.mdx
├── video-background.mdx
├── voting.mdx
├── watermark.mdx
├── wizard.mdx
├── zebra-like-background.mdx
└── zigzag-timeline.mdx
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2019 phuocng
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# CSS Layout
As a front-end engineer, I deal with a lot of layouts and components. While there are plenty of CSS frameworks out there that provide these, I don't always want to include them all in my project.
That's why I've put together a collection of the most popular layouts and components that can be built with pure CSS.
These layouts and components are powered by modern CSS features like flexbox and grid, and can be easily customized to fit your specific needs. By combining them, you can create any possible layout you need.
The best part? This collection has zero dependencies, no frameworks, and no CSS hacks. These are real use cases that can save you time and effort in your projects.
## About
This project is developed by _Nguyen Huu Phuoc_. I love building products and sharing knowledge.
Be my friend on
- [Twitter](https://twitter.com/nghuuphuoc)
- [Github](https://github.com/phuocng)
================================================
FILE: contents/accordion.mdx
================================================
---
category: Display
created: '2019-12-04'
description: Create an accordion with CSS flexbox
keywords: css accordion, css flexbox
thumbnail: /assets/css-layout/thumbnails/accordion.png
title: Accordion
---
## HTML
```html index.html
<!-- Container -->
<div class="accordion">
<!-- Collapsed item -->
<div class="accordion__item accordion__item--collapsed">
<!-- Heading -->
<div class="accordion__header">
<!-- The toggle icon -->
<div class="accordion__toggle">...</div>
<!-- The title -->
<div class="accordion__title">...</div>
</div>
<!-- The content -->
<div class="accordion__content">...</div>
</div>
<!-- Expanded item -->
<div class="accordion__item accordion__item--expanded">...</div>
<!-- Repeat other item -->
...
</div>
```
## CSS
```css styles.css
.accordion {
/* Border */
border: 1px solid #d1d5db;
border-bottom-color: transparent;
border-radius: 4px;
}
.accordion__item {
border-bottom: 1px solid #d1d5db;
}
.accordion__header {
/* Center the content horizontally */
align-items: center;
display: flex;
cursor: pointer;
padding: 16px;
}
.accordion__toggle {
margin-right: 12px;
}
.accordion__title {
/* Take remaining width */
flex: 1;
}
.accordion__content {
border-top: 1px solid #d1d5db;
padding: 16px;
}
.accordion__item--collapsed .accordion__content {
display: none;
}
.accordion__item--expanded .accordion__content {
display: block;
}
```
<Playground>
```css placeholders.css hidden
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
.rectangle {
background: #d1d5db;
border-radius: 0.25rem;
height: var(--rectangle-height);
width: var(--rectangle-width);
}
.rectangle--hor.rectangle--20 {
--rectangle-width: 20%;
}
.rectangle--hor.rectangle--40 {
--rectangle-width: 40%;
}
.rectangle--hor.rectangle--60 {
--rectangle-width: 60%;
}
.rectangle--hor.rectangle--80 {
--rectangle-width: 80%;
}
.rectangle--hor.rectangle--100 {
--rectangle-width: 100%;
}
.rectangle--hor.rectangle--sm {
--rectangle-height: 0.5rem;
}
.rectangle--hor.rectangle--md {
--rectangle-height: 2rem;
}
.rectangle--hor.rectangle--lg {
--rectangle-height: 4rem;
}
.rectangle--ver.rectangle--20 {
--rectangle-height: 20%;
}
.rectangle--ver.rectangle--40 {
--rectangle-height: 40%;
}
.rectangle--ver.rectangle--60 {
--rectangle-height: 60%;
}
.rectangle--ver.rectangle--80 {
--rectangle-height: 80%;
}
.rectangle--ver.rectangle--100 {
--rectangle-height: 100%;
}
.rectangle--ver.rectangle--sm {
--rectangle-width: 0.5rem;
}
.rectangle--ver.rectangle--md {
--rectangle-width: 2rem;
}
.rectangle--ver.rectangle--lg {
--rectangle-width: 4rem;
}
.triangle {
border-style: solid;
height: 0;
width: 0;
}
.triangle--t {
border-color: transparent transparent #d1d5db transparent;
border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
}
.triangle--r {
border-color: transparent transparent transparent #d1d5db;
border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
}
.triangle--b {
border-color: #d1d5db transparent transparent transparent;
border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
}
.triangle--l {
border-color: transparent #d1d5db transparent transparent;
border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
}
.triangle--tr {
border-color: transparent #d1d5db transparent transparent;
border-width: 0 var(--triangle-size) var(--triangle-size) 0;
}
.triangle--br {
border-color: transparent transparent #d1d5db transparent;
border-width: 0 0 var(--triangle-size) var(--triangle-size);
}
.triangle--bl {
border-color: transparent transparent transparent #d1d5db;
border-width: var(--triangle-size) 0 0 var(--triangle-size);
}
.triangle--tl {
border-color: #d1d5db transparent transparent transparent;
border-width: var(--triangle-size) var(--triangle-size) 0 0;
}
.triangle--sm {
--triangle-size: 0.5rem;
}
.triangle--md {
--triangle-size: 2rem;
}
.triangle--lg {
--triangle-size: 4rem;
}
```
```css styles.css hidden
.accordion {
border: 1px solid #d1d5db;
border-radius: 4px;
height: 100%;
width: 100%;
}
.accordion__item:not(:last-child) {
border-bottom: 1px solid #d1d5db;
}
.accordion__header {
align-items: center;
display: flex;
justify-content: center;
cursor: pointer;
padding: 0.5rem;
}
.accordion__toggle {
margin-right: 0.25rem;
}
.accordion__title {
flex: 1;
}
.accordion__content {
padding: 0.5rem;
}
.accordion__item--collapsed .accordion__content {
display: none;
}
.accordion__item--expanded .accordion__content {
display: block;
}
```
```html index.html hidden
<div class="accordion">
<div class="accordion__item accordion__item--collapsed">
<div class="accordion__header">
<div class="accordion__toggle">
<div class="triangle triangle--r triangle--sm"></div>
</div>
<div class="accordion__title">
<div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div>
</div>
</div>
</div>
<div class="accordion__item accordion__item--expanded">
<div class="accordion__header">
<div class="accordion__toggle">
<div class="triangle triangle--b triangle--sm"></div>
</div>
<div class="accordion__title">
<div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div>
</div>
</div>
<div class="accordion__content">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/arrow-buttons.mdx
================================================
---
category: Display
created: '2020-01-21'
description: Create arrow buttons with CSS
keywords: css arrow buttons
thumbnail: /assets/css-layout/thumbnails/arrow-buttons.png
title: Arrow buttons
updated: '2021-04-01'
---
## HTML
```html index.html
<!-- Up arrow button -->
<button class="arrow-buttons">
<!-- Arrow -->
<div class="arrow-button arrow-button--t"></div>
<!-- Content -->
...
</button>
<!-- Right arrow button -->
<button class="arrow-buttons">
<!-- Content -->
...
<!-- Arrow -->
<div class="arrow-button arrow-button--r"></div>
</button>
<!-- Down arrow button -->
<button class="arrow-buttons">
<!-- Arrow -->
<div class="arrow-button arrow-button--b"></div>
<!-- Content -->
...
</button>
<!-- Left arrow button -->
<button class="arrow-buttons">
<!-- Arrow -->
<div class="arrow-button arrow-button--l"></div>
<!-- Content -->
...
</button>
```
## CSS
```css styles.css
.arrow-button {
/* Transparent background */
background-color: transparent;
/* Size */
height: 12px;
width: 12px;
}
.arrow-button--t {
/* Edges */
border-left: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translateY(25%) rotate(45deg);
}
.arrow-button--r {
/* Edges */
border-right: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translateX(-25%) rotate(45deg);
}
.arrow-button--b {
/* Edges */
border-bottom: 1px solid #d1d5db;
border-right: 1px solid #d1d5db;
transform: translateY(-25%) rotate(45deg);
}
.arrow-button--l {
/* Edges */
border-bottom: 1px solid #d1d5db;
border-left: 1px solid #d1d5db;
transform: translateX(25%) rotate(45deg);
}
```
<Playground>
```css styles.css hidden
.arrow-buttons {
position: relative;
height: 100%;
width: 100%;
}
.arrow-button {
/* Transparent background */
background-color: transparent;
/* Size */
height: 12px;
width: 12px;
}
.arrow-button--t {
/* Edges */
border-left: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translateY(25%) rotate(45deg);
}
.arrow-button--r {
/* Edges */
border-right: 1px solid #d1d5db;
border-top: 1px solid #d1d5db;
transform: translateX(-25%) rotate(45deg);
}
.arrow-button--b {
/* Edges */
border-bottom: 1px solid #d1d5db;
border-right: 1px solid #d1d5db;
transform: translateY(-25%) rotate(45deg);
}
.arrow-button--l {
/* Edges */
border-bottom: 1px solid #d1d5db;
border-left: 1px solid #d1d5db;
transform: translateX(25%) rotate(45deg);
}
/* Demo */
.arrow-buttons__corner {
position: absolute;
}
.arrow-buttons__corner--t {
left: 50%;
top: 0;
transform: translate(-50%, 0%);
}
.arrow-buttons__corner--r {
right: 0;
top: 50%;
transform: translate(0%, -50%);
}
.arrow-buttons__corner--b {
bottom: 0;
left: 50%;
transform: translate(-50%, 0%);
}
.arrow-buttons__corner--l {
left: 0;
top: 50%;
transform: translate(0%, -50%);
}
```
```html index.html hidden
<div class="arrow-buttons">
<div class="arrow-buttons__corner arrow-buttons__corner--t">
<div class="arrow-button arrow-button--t"></div>
</div>
<div class="arrow-buttons__corner arrow-buttons__corner--r">
<div class="arrow-button arrow-button--r"></div>
</div>
<div class="arrow-buttons__corner arrow-buttons__corner--b">
<div class="arrow-button arrow-button--b"></div>
</div>
<div class="arrow-buttons__corner arrow-buttons__corner--l">
<div class="arrow-button arrow-button--l"></div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/avatar-list.mdx
================================================
---
category: Display
created: '2019-11-29'
description: Create an avatar list with CSS flexbox
keywords: css avatar, css flexbox
thumbnail: /assets/css-layout/thumbnails/avatar-list.png
title: Avatar list
---
## HTML
```html index.html
<div class="avatars">
<!-- Avatar item -->
<div class="avatars__item">
<div class="avatars__image">
<!-- Image -->
...
</div>
</div>
<!-- Repeat other avatars -->
...
</div>
```
## CSS
```css styles.css
.avatars {
display: flex;
}
.avatars__item {
/* Nagative margin make avatar overlap to previous one */
margin-left: -0.25rem;
}
.avatars__image {
/* Add a white curve between avatars */
box-shadow: 0 0 0 0.25rem #fff;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
border-radius: 9999px;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.avatars {
display: flex;
justify-content: center;
height: 2rem;
width: 100%;
}
.avatars__item {
margin-left: -0.25rem;
}
.avatars__image {
background-color: #d1d5db;
box-shadow: 0 0 0 0.25rem #fff;
color: #fff;
font-size: 0.75rem;
/* Rounded border */
border-radius: 50%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Size */
height: 2rem;
width: 2rem;
}
```
```html index.html hidden
<div class="avatars">
<div class="avatars__item">
<div class="avatars__image">A</div>
</div>
<div class="avatars__item">
<div class="avatars__image">B</div>
</div>
<div class="avatars__item">
<div class="avatars__image">C</div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/avatar.mdx
================================================
---
category: Display
created: '2019-12-04'
description: Create an avatar component with CSS flexbox
keywords: css avatar, css flexbox
thumbnail: /assets/css-layout/thumbnails/avatar.png
title: Avatar
---
## HTML
```html index.html
<div class="avatar">
<!-- Avatar image -->
<img class="avatar__image" src="..." />
</div>
```
## CSS
```css styles.css
.avatar {
/* Rounded border */
border-radius: 50%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Size */
height: 4rem;
width: 4rem;
}
.avatar__image {
/* Size */
height: 50%;
width: 50%;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.avatar {
height: 4rem;
width: 4rem;
background-color: #d1d5db;
/* Rounded border */
border-radius: 50%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.avatar__image {
height: 50%;
width: 50%;
}
```
```html index.html hidden
<div class="avatar">
<div class="avatar__image">
<svg viewBox="0 0 24 24" fill="none" height="100%" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" width="100%">
<path d="M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z M5,20.5 c0-3.866,3.134-7,7-7s7,3.134,7,7H5z"></path>
</svg>
</div>
</div>
```
</Playground>
================================================
FILE: contents/badge.mdx
================================================
---
category: Display
created: '2019-11-16'
description: Create a badge component with CSS flexbox
keywords: css badge, css flexbox
thumbnail: /assets/css-layout/thumbnails/badge.png
title: Badge
---
## HTML
```html index.html
<div class="badge">...</div>
```
## CSS
```css styles.css
.badge {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Colors */
background-color: #d1d5db;
color: #fff;
/* Rounded border */
border-radius: 9999px;
height: 3rem;
width: 3rem;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.badge {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Colors */
background-color: #d1d5db;
color: #fff;
/* Rounded border */
border-radius: 9999px;
height: 3rem;
width: 3rem;
}
```
```html index.html hidden
<div class="badge">9+</div>
```
</Playground>
================================================
FILE: contents/box-selector.mdx
================================================
---
category: Input
created: '2022-09-24'
description: Create a box selector with CSS
keywords: css box selector
thumbnail: /assets/css-layout/thumbnails/box-selector.png
title: Box selector
---
## HTML
```html index.html
<div class="box-selector">...</div>
<!-- The selected variant -->
<div class="box-selector box-selector--selected">...</div>
```
## CSS
```css styles.css
.box-selector {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.5rem;
}
.box-selector--selected {
/* Change the border color */
border: 2px solid #3b82f6;
/* Used to position the tick */
position: relative;
}
/* The tick */
.box-selector--selected:before {
/* Absolute position */
content: '';
left: 0.25rem;
position: absolute;
top: 0.25rem;
/* Size */
height: 1rem;
width: 1rem;
/* Background */
background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
}
```
<Playground>
```css placeholders.css hidden
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
```
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.box-selector-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 1rem;
row-gap: 1rem;
width: 16rem;
}
.box-selector {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.5rem;
}
.box-selector--selected {
border: 2px solid #3b82f6;
position: relative;
&:before {
content: '';
left: 0.25rem;
position: absolute;
top: 0.25rem;
height: 1rem;
width: 1rem;
background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
}
}
```
```html index.html hidden
<div class="box-selector-container">
<div class="box-selector box-selector--selected">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
<div class="box-selector">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
<div class="box-selector">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
<div class="box-selector">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
</div>
```
</Playground>
## See also
- [Custom checkbox button](https://phuoc.ng/collection/css-layout/custom-checkbox-button/)
- [Custom radio button](https://phuoc.ng/collection/css-layout/custom-radio-button/)
================================================
FILE: contents/breadcrumb.mdx
================================================
---
category: Navigation
created: '2019-11-17'
description: Create a breadcrumb with CSS flexbox
keywords: css breadcrumb, css flexbox
thumbnail: /assets/css-layout/thumbnails/breadcrumb.png
title: Breadcrumb
---
## HTML
```html index.html
<div class="breadcrumb">
<!-- Breadcrumb item -->
<div class="breadcrumb__item">...</div>
<!-- Repeat other items -->
...
</div>
```
## CSS
```css styles.css
.breadcrumb {
/* Content is centered vertically */
align-items: center;
display: flex;
}
.breadcrumb__item {
margin: 0 0.5rem;
/* Used to position the separator between items */
position: relative;
}
.breadcrumb__item:not(:last-child)::after {
/* Absolute position */
position: absolute;
right: 0;
top: 0;
transform: translate(0.5rem, 0px);
content: '/';
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.breadcrumb {
/* Content is centered vertically */
align-items: center;
display: flex;
}
.breadcrumb__item {
margin: 0 0.5rem;
position: relative;
}
.breadcrumb__item:not(:last-child)::after {
/* Absolute position */
position: absolute;
right: 0;
top: 0;
transform: translate(0.5rem, 0px);
content: '/';
}
```
```html index.html hidden
<div class="breadcrumb">
<div class="breadcrumb__item">A</div>
<div class="breadcrumb__item">B</div>
<div class="breadcrumb__item">C</div>
<div class="breadcrumb__item">D</div>
</div>
```
</Playground>
================================================
FILE: contents/button-with-icon.mdx
================================================
---
category: Input
created: '2019-11-17'
description: Create an icon button with CSS flexbox
keywords: css flexbox, css icon button
thumbnail: /assets/css-layout/thumbnails/button-with-icon.png
title: Button with icon
---
## HTML
```html index.html
<button class="button-with-icon">
<!-- Icon -->
...
<!-- Label -->
<div class="button-with-icon__label">...</div>
</button>
```
## CSS
```css styles.css
.button-with-icon {
/* Center the content */
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
.button-with-icon__label {
margin-left: 0.5rem;
}
```
<Playground>
```css placeholders.css hidden
.circle {
background: #d1d5db;
border-radius: 9999px;
height: var(--circle-size);
width: var(--circle-size);
}
.circle--sm {
--circle-size: 0.5rem;
}
.circle--md {
--circle-size: 1.5rem;
}
.circle--lg {
--circle-size: 4rem;
}
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
```
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.button-with-icon {
/* Center the content */
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
/* Demo */
background: #fff;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
width: 8rem;
}
.button-with-icon__label {
flex: 1;
margin-left: 0.5rem;
}
```
```html index.html hidden
<button class="button-with-icon">
<div class="circle circle--md"></div>
<div class="button-with-icon__label">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
</div>
</div>
</button>
```
</Playground>
================================================
FILE: contents/calendar.mdx
================================================
---
category: Display
created: '2022-09-24'
description: Create a calendar with CSS grid
keywords: css calendar, css grid
thumbnail: /assets/css-layout/thumbnails/calendar.png
title: Calendar
---
## HTML
```html index.html
<div class="calendar">
<!-- Week days -->
<div class="calendar__weekday">Mon</div>
<div class="calendar__weekday">Tue</div>
<div class="calendar__weekday">Wed</div>
<div class="calendar__weekday">Thu</div>
<div class="calendar__weekday">Fri</div>
<div class="calendar__weekday">Sat</div>
<div class="calendar__weekday">Sun</div>
<!-- Days of the previous month -->
<div class="calendar__day calendar__day--disabled">30</div>
<div class="calendar__day calendar__day--disabled">31</div>
<!-- Days of the current month -->
<div class="calendar__day">1</div>
<div class="calendar__day">2</div>
<!-- The current day -->
<div class="calendar__day calendar__day--current">...</div>
<!-- Days of the next month -->
<div class="calendar__day calendar__day--disabled">1</div>
<div class="calendar__day calendar__day--disabled">2</div>
</div>
```
## CSS
```css styles.css
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.calendar__weekday {
border-bottom: 1px solid #d1d5db;
padding: 0.125rem;
}
.calendar__day {
border-bottom: 1px solid #d1d5db;
border-right: 1px solid #d1d5db;
padding: 0.25rem;
text-align: center;
}
.calendar__day--current {
background-color: #3b82f6;
color: #fff;
}
.calendar__day:nth-child(7n + 1) {
border-left: 1px solid #d1d5db;
}
.calendar__day--disabled {
color: #d1d5db;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
width: 16rem;
}
.calendar__weekday {
border-bottom: 1px solid #d1d5db;
padding: 0.5rem;
text-align: center;
}
.calendar__day {
border-bottom: 1px solid #d1d5db;
border-right: 1px solid #d1d5db;
padding: 0.5rem;
text-align: center;
}
.calendar__day--current {
background-color: #3b82f6;
color: #fff;
}
.calendar__day:nth-child(7n + 1) {
border-left: 1px solid #d1d5db;
}
.calendar__day--disabled {
color: #e5e7eb;
}
```
```html index.html hidden
<div class="calendar">
<div class="calendar__weekday">Mon</div>
<div class="calendar__weekday">Tue</div>
<div class="calendar__weekday">Wed</div>
<div class="calendar__weekday">Thu</div>
<div class="calendar__weekday">Fri</div>
<div class="calendar__weekday">Sat</div>
<div class="calendar__weekday">Sun</div>
<div class="calendar__day calendar__day--disabled">29</div>
<div class="calendar__day calendar__day--disabled">30</div>
<div class="calendar__day calendar__day--disabled">31</div>
<div class="calendar__day">1</div>
<div class="calendar__day">2</div>
<div class="calendar__day">3</div>
<div class="calendar__day">4</div>
<div class="calendar__day">5</div>
<div class="calendar__day">6</div>
<div class="calendar__day">7</div>
<div class="calendar__day">8</div>
<div class="calendar__day">9</div>
<div class="calendar__day">10</div>
<div class="calendar__day">11</div>
<div class="calendar__day">12</div>
<div class="calendar__day">13</div>
<div class="calendar__day">14</div>
<div class="calendar__day">15</div>
<div class="calendar__day">16</div>
<div class="calendar__day">17</div>
<div class="calendar__day">18</div>
<div class="calendar__day">19</div>
<div class="calendar__day">20</div>
<div class="calendar__day">21</div>
<div class="calendar__day">22</div>
<div class="calendar__day calendar__day--current">23</div>
<div class="calendar__day">24</div>
<div class="calendar__day">25</div>
<div class="calendar__day">26</div>
<div class="calendar__day">27</div>
<div class="calendar__day">28</div>
<div class="calendar__day">29</div>
<div class="calendar__day">30</div>
<div class="calendar__day">31</div>
<div class="calendar__day calendar__day--disabled">1</div>
<div class="calendar__day calendar__day--disabled">2</div>
<div class="calendar__day calendar__day--disabled">3</div>
</div>
```
</Playground>
================================================
FILE: contents/card-layout.mdx
================================================
---
category: Layout
created: '2019-12-25'
description: Create a card layout with CSS flexbox
keywords: css card layout, css flexbox, css layout
thumbnail: /assets/css-layout/thumbnails/card-layout.png
title: Card layout
---
## HTML
```html index.html
<div class="card-layout">
<!-- A card with given width -->
<div class="card-layout__item">...</div>
<!-- Repeat other cards -->
...
</div>
```
## CSS
```css styles.css
.card-layout {
display: flex;
/* Put a card in the next row when previous cards take all width */
flex-wrap: wrap;
margin-left: -0.25rem;
margin-right: -0.25rem;
}
.card-layout__item {
/* There will be 3 cards per row */
flex-basis: 33.33333%;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
```
<Playground>
```css placeholders.css hidden
.rectangle {
background: #d1d5db;
border-radius: 0.25rem;
height: var(--rectangle-height);
width: var(--rectangle-width);
}
.rectangle--hor.rectangle--20 {
--rectangle-width: 20%;
}
.rectangle--hor.rectangle--40 {
--rectangle-width: 40%;
}
.rectangle--hor.rectangle--60 {
--rectangle-width: 60%;
}
.rectangle--hor.rectangle--80 {
--rectangle-width: 80%;
}
.rectangle--hor.rectangle--100 {
--rectangle-width: 100%;
}
.rectangle--hor.rectangle--sm {
--rectangle-height: 0.5rem;
}
.rectangle--hor.rectangle--md {
--rectangle-height: 2rem;
}
.rectangle--hor.rectangle--lg {
--rectangle-height: 4rem;
}
.rectangle--ver.rectangle--20 {
--rectangle-height: 20%;
}
.rectangle--ver.rectangle--40 {
--rectangle-height: 40%;
}
.rectangle--ver.rectangle--60 {
--rectangle-height: 60%;
}
.rectangle--ver.rectangle--80 {
--rectangle-height: 80%;
}
.rectangle--ver.rectangle--100 {
--rectangle-height: 100%;
}
.rectangle--ver.rectangle--sm {
--rectangle-width: 0.5rem;
}
.rectangle--ver.rectangle--md {
--rectangle-width: 2rem;
}
.rectangle--ver.rectangle--lg {
--rectangle-width: 4rem;
}
```
```css styles.css hidden
body {
height: 24rem;
}
.card-layout {
display: flex;
/* Put a card in the next row when previous cards take all width */
flex-wrap: wrap;
margin-left: -0.25rem;
margin-right: -0.25rem;
}
.card-layout__item {
/* There will be 3 cards per row */
flex-basis: 33.33333%;
padding-left: 0.25rem;
padding-right: 0.25rem;
/* Demo */
margin: 0.25rem 0;
}
```
```html index.html hidden
<div class="card-layout">
<div class="card-layout__item"><div class="rectangle rectangle--hor rectangle--md rectangle--100"></div></div>
<div class="card-layout__item"><div class="rectangle rectangle--hor rectangle--md rectangle--100"></div></div>
<div class="card-layout__item"><div class="rectangle rectangle--hor rectangle--md rectangle--100"></div></div>
<div class="card-layout__item"><div class="rectangle rectangle--hor rectangle--md rectangle--100"></div></div>
<div class="card-layout__item"><div class="rectangle rectangle--hor rectangle--md rectangle--100"></div></div>
<div class="card-layout__item"><div class="rectangle rectangle--hor rectangle--md rectangle--100"></div></div>
<div class="card-layout__item"><div class="rectangle rectangle--hor rectangle--md rectangle--100"></div></div>
<div class="card-layout__item"><div class="rectangle rectangle--hor rectangle--md rectangle--100"></div></div>
<div class="card-layout__item"><div class="rectangle rectangle--hor rectangle--md rectangle--100"></div></div>
</div>
```
</Playground>
================================================
FILE: contents/card.mdx
================================================
---
category: Display
created: '2019-11-17'
description: Create a card with CSS flexbox
keywords: css card, css flexbox
thumbnail: /assets/css-layout/thumbnails/card.png
title: Card
---
## HTML
```html index.html
<div class="card">
<!-- Cover -->
<div class="card__cover">...</div>
<!-- Content -->
<div class="card__content">...</div>
...
</div>
```
## CSS
```css styles.css
.card {
display: flex;
flex-direction: column;
}
.card__cover {
height: 20rem;
width: 100%;
}
.card__content {
/* Take available height */
flex: 1;
}
```
<Playground>
```css placeholders.css hidden
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
```
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
width: 16rem;
height: 100%;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
}
.card__cover {
background: #d1d5db;
border-radius: 0.25rem;
height: 40%;
width: 100%;
}
.card__content {
/* Take available height */
flex: 1;
padding: 0.5rem;
}
```
```html index.html hidden
<div class="card">
<div class="card__cover">
</div>
<div class="card__content">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/carousel-slider.mdx
================================================
---
category: Navigation
created: '2023-10-14'
description: Create a carousel slider with CSS
openGraphCover: /og/css-layout/carousel-slider.png
thumbnail: /assets/css-layout/thumbnails/carousel-slider.png
title: Carousel slider
---
A carousel slider is a component that lets users browse a collection of items, usually images or cards, by sliding them horizontally or vertically. It's commonly used in websites and mobile apps to showcase products, features, or news articles.
You can find carousel sliders in all kinds of websites and apps, like e-commerce platforms, news portals, and social media sites. They offer an interactive and engaging way for users to navigate content without taking up too much screen space.
On top of that, carousel sliders can be customized with different transition effects, autoplay options, and navigation controls. This makes for an even better user experience.
In this post, we'll show you how to create a carousel slider with CSS.
## HTML markup
Let's talk about organizing the markup for a slider with five items. The slider consists of a `div` element with the class `slider__inner` that displays the list of items, each with a `slider__item` class.
```html
<div class="slider">
<div class="slide__inner">
<div class="slider__item"></div>
<div class="slider__item"></div>
<div class="slider__item"></div>
<div class="slider__item"></div>
<div class="slider__item"></div>
</div>
</div>
```
For simplicity, let's assume all slider items have the same dimensions as the slider container. The `.slider` class sets the dimensions of the slider container to a `width` and `height` of 100%, taking up all available space in its parent element. The `overflow` property is set to `hidden` to ensure that any content that overflows the slider container is not visible.
```css
.slider {
overflow: hidden;
position: relative;
width: 100%;
height: 20rem;
}
```
Meanwhile, the `.slider__inner` class positions the list of items inside the slider container. It has an absolute position with `top` and `left` properties set to 0, placing it at the top left corner of its parent element (the slider container). The `width` and `height` are also set to 100%, filling up all available space inside its parent element.
```css
.slide__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
To position the items inside the slider container, we use absolute positioning with `top`, `left`, `width`, and `height` properties set to 0 and 100% respectively, ensuring that each item takes up all available space inside the slider container.
```css
.slider__item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
Now, to achieve the sliding effect, we use the `translateX()` function of CSS `transform` property. This function moves an element horizontally by a given percentage or pixel value. In our case, we want to move each item to the right so that only one item is visible at a time.
```html
<div class="slider__item" style="transform: translateX(0%)">1</div>
<div class="slider__item" style="transform: translateX(100%)">2</div>
<div class="slider__item" style="transform: translateX(200%)">3</div>
<div class="slider__item" style="transform: translateX(300%)">4</div>
<div class="slider__item" style="transform: translateX(400%)">5</div>
```
To activate a specific item in the carousel slider, we shift the whole inner container to the left by a value that moves the target item into view. One way to achieve this is by setting the `transform` property of the `.slider__inner` element to `translateX(-300%)`. This will move the inner container three times its width to the left, which positions the fourth item at the beginning of the slider.
```html
<div class="slider__inner" style="transform: translateX(-300%)">
<div class="slider__item" style="transform: translateX(0%)">1</div>
<div class="slider__item" style="transform: translateX(100%)">2</div>
<div class="slider__item" style="transform: translateX(200%)">3</div>
<div class="slider__item" style="transform: translateX(300%)">4</div>
<div class="slider__item" style="transform: translateX(400%)">5</div>
</div>
```
By adjusting this value, we can easily activate any other item in our carousel slider. This technique allows us to create an interactive and engaging carousel slider that users can navigate through with ease.
## Adding navigation
Now that we have placed the slider items in the right spot, it's time to add navigation so users can easily move between them.
To do this, we'll create an additional element with the `slider__navigation` CSS class. This element contains multiple dots that users can click to jump to the corresponding item.
Here is the updated markup:
```html
<div class="slider">
<div class="slider__items">
<!-- Slider items go here -->
</div>
<div class="slider__navigation">
<div class="slider__dot"></div>
<div class="slider__dot"></div>
<div class="slider__dot"></div>
<!-- Add more dots as needed -->
</div>
</div>
```
The `slider__navigation` element has a position of `absolute`, which means it's positioned relative to the nearest positioned ancestor (in this case, the `.slider` element). We set `bottom: 1rem` to position it at the bottom of the slider container, and `left: 50%` is used to center it horizontally.
To center its content horizontally, we use `transform: translateX(-50%)`, which moves it left by half of its own width.
```css
.slider__navigation {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
}
```
The navigation dots inside the `slider__navigation` are created using individual elements with a class of `slider__dot`. To space them out evenly, we use the CSS property `gap: 0.5rem`, which adds a gap between each item. The items are aligned along the horizontal axis using flexbox properties such as `display: flex`, `align-items: center`, and `justify-content: center`.
```css
.slider__navigation {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
```
The `slider__dot` class is used to style the navigation dots inside the `slider__navigation` element. It has a background color of `rgb(203 213 225)` and a border radius of `50%`, which gives it a circular shape. It also has a `cursor` property set to `pointer`, which changes the mouse cursor when hovering over the element, indicating that it can be clicked. Finally, its dimensions are set to `height: 0.5rem` and `width: 0.5rem`, making it small enough to fit inside the navigation container but large enough to be clickable.
```css
.slider__dot {
background-color: rgb(203 213 225);
border-radius: 50%;
cursor: pointer;
height: 0.5rem;
width: 0.5rem;
}
```
To indicate the currently active dot, we can add a separate class named `slider__dot--active` and apply it to the corresponding dot element. This class will have a different background color than the inactive dots, making it clear which item is currently active.
```css
.slider__dot--active {
background-color: rgb(100 116 139);
}
```
When an item is activated in the slider, we can remove the `slider__dot--active` class from all dots and then add it only to the dot that corresponds to the currently active item. This ensures that only one dot is highlighted at any given time.
## Adding arrows for easy navigation
In addition to the navigation we created earlier, we can further enhance the user experience by adding two buttons that allow users to quickly move to the previous and next items.
Here's the updated markup:
```html
<div class="slider">
...
<div class="slider__prev"></div>
<div class="slider__next"></div>
</div>
```
To create these buttons, we use the `.slider__prev` and `.slider__next` classes. We set their position to absolute so that they're positioned relative to the slider container. We also set the top position to `50%` and use `transform: translateY(-50%)` to center them vertically inside the slider container.
Here's how they are positioned:
```css
.slider__prev,
.slider__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 1rem;
width: 0.5rem;
}
```
To add arrow navigation to the carousel slider, we can use CSS pseudo-elements `::before` and `::after`. These elements allow us to add content before or after an element's content, which in our case will be arrows.
If you're not familiar with how to create arrows using CSS, you can check out this [post](https://phuoc.ng/collection/css-layout/triangle-buttons/) for guidance.
With these CSS rules in place, you should now have fully functional arrow navigation for your carousel slider. 
## Demo
Let's take a look at the final result. Check out the code to see how we shifted the whole inner element to activate the fourth item. It's important to note that this is purely for layout purposes only. Clicking on the dots or arrows won't navigate to the corresponding item. Check out this [post](https://phuoc.ng/collection/css-animation/navigate-to-a-specific-item-in-a-carousel-slider/) to learn how we can make it happen.
<Playground>
```css styles.css
.slider {
overflow: hidden;
position: relative;
width: 100%;
height: 20rem;
}
.slider__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider__item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Demo purpose */
background: rgb(241 245 249);
align-items: center;
display: flex;
justify-content: center;
font-size: 2.5rem;
font-weight: 500;
}
.slider__navigation {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
align-items: center;
display: flex;
justify-content: center;
gap: 0.5rem;
}
.slider__dot {
background: rgb(203 213 225);
border-radius: 50%;
cursor: pointer;
height: 0.5rem;
width: 0.5rem;
}
.slider__dot--active {
background: rgb(100 116 139);
}
.slider__prev,
.slider__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 1rem;
width: 0.5rem;
}
.slider__prev::before,
.slider__next::before {
cursor: pointer;
content: '';
position: absolute;
border-style: solid;
height: 0;
width: 0;
}
.slider__prev::before {
border-color: transparent rgb(148 163 184) transparent transparent;
border-width: 0.5rem 0.5rem 0.5rem 0;
}
.slider__next::before {
border-color: transparent transparent transparent rgb(148 163 184);
border-width: 0.5rem 0 0.5rem 0.5rem;
}
.slider__prev {
left: 0.5rem;
}
.slider__next {
right: 0.5rem;
}
```
```html index.html
<div class="slider">
<div class="slider__inner" style="transform: translateX(-300%)">
<div class="slider__item" style="transform: translateX(0%)">1</div>
<div class="slider__item" style="transform: translateX(100%)">2</div>
<div class="slider__item" style="transform: translateX(200%)">3</div>
<div class="slider__item" style="transform: translateX(300%)">4</div>
<div class="slider__item" style="transform: translateX(400%)">5</div>
</div>
<div class="slider__navigation">
<div class="slider__dot"></div>
<div class="slider__dot"></div>
<div class="slider__dot"></div>
<div class="slider__dot slider__dot--active"></div>
<div class="slider__dot"></div>
</div>
<div class="slider__prev"></div>
<div class="slider__next"></div>
</div>
```
</Playground>
## See also
- [Dot navigation](https://phuoc.ng/collection/css-layout/dot-navigation/)
- [Fixed at side](https://phuoc.ng/collection/css-layout/fixed-at-side/)
- [Navigate to a specific item in a carousel slider](https://phuoc.ng/collection/css-animation/navigate-to-a-specific-item-in-a-carousel-slider/)
- [Triangle buttons](https://phuoc.ng/collection/css-layout/triangle-buttons/)
================================================
FILE: contents/center-align-one-and-left-align-the-other.mdx
================================================
---
category: Display
created: '2023-08-27'
description: How to center align one element and left align the other
keywords: css flexbox, css grid
openGraphCover: /og/css-layout/center-align-one-left-align-other.png
thumbnail: /assets/css-layout/thumbnails/center-align-one-left-align-other.png
title: Center align one and left align the other
---
Using a single row to display all elements is a common pattern in web design. These elements can be divided into different groups and arranged on the left, center, or right side of the row.
You've probably seen this pattern before, like in a toolbar where the main actions are grouped and displayed at the center. Meanwhile, less important buttons are located on the left side, like a button to toggle the sidebar.
Another example is the header of a web application, where the main title is displayed at the center, and a button to go back to the previous page is on the left side.
In this post, we'll learn how to create this kind of layout. To keep it simple, let's assume that the layout consists of only two elements.
```html
<div class="container">
<div class="container__left"></div>
<div class="container__center"></div>
</div>
```
## Using CSS flexbox
Initially, our first idea might be to use flexbox to arrange the layout.
```css
.container {
display: flex;
justify-content: center;
}
```
To align the first element to the left and center the remaining items, we can use the margin property. Here's an example:
```css
.container__left {
margin-right: auto;
}
.container__center {
margin-right: auto;
}
```
Let's take a look at what it looks like:
<Playground>
```css demo.css hidden
:root {
--placeholder-size: 1rem;
}
body {
align-items: center;
display: flex;
justify-content: center;
}
.circle {
background-color: rgb(203 213 225);
border-radius: 9999px;
height: var(--placeholder-size);
width: var(--placeholder-size);
margin-right: 0.125rem;
}
.square {
background-color: rgb(203 213 225);
border-radius: 0.25rem;
height: var(--placeholder-size);
width: var(--placeholder-size);
margin: 0 0.125rem;
}
.container {
border: 1px solid rgb(203 213 225);
border-radius: 0.25rem;
padding: 0.5rem;
width: 16rem;
}
.container__left,
.container__center {
align-items: center;
display: flex;
justify-content: center;
}
```
```css styles.css
.container {
display: flex;
}
.container__left {
margin-right: auto;
}
.container__center {
margin-right: auto;
}
```
```html index.html
<div class="container">
<div class="container__left">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container__center">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
```
</Playground>
Unfortunately, our expectation doesn't match reality. The main element is centered only within the available space, not the entire container. Let's move on to the next section to find a solution to this issue.
## Using CSS grid
In addition to CSS flexbox, CSS offers another powerful tool for creating layouts: CSS grid. We can use this technique to solve the issue we talked about earlier.
Let's say we now have three elements in our layout instead of two, and we need to add an empty element on the right-hand side.
```css
.container {
display: grid;
grid-template-columns: 1fr repeat(1, auto) 1fr;
}
```
Let's dive into some CSS talk. The first CSS declaration is simple: it replaces the `flex` value with `grid`, which tells the browser to create a grid layout.
Now, the second CSS declaration might seem confusing, but it's actually quite easy to understand. The `1fr` means that the first and last columns should take up an equal amount of space. The `repeat(1, auto)` declaration means that there should be one column with a width of `auto`.
So, in simpler terms, this CSS declaration creates a layout with three columns. The first and last columns will have equal width, while the middle column will adjust its width to fit its content.
Lastly, we want the main element to start at the second column. So, we can set the `grid-column-start` property to 2.
```css
.container__center {
grid-column-start: 2;
}
```
Now, it's a breeze to move the first column to the left.
```css
.container__left {
margin-right: auto;
}
```
Finally, let's check out the demonstration to see the progress we've made so far!
<Playground>
```css demo.css hidden
:root {
--placeholder-size: 1rem;
}
body {
align-items: center;
display: flex;
justify-content: center;
}
.circle {
background-color: rgb(203 213 225);
border-radius: 9999px;
height: var(--placeholder-size);
width: var(--placeholder-size);
margin-right: 0.125rem;
}
.square {
background-color: rgb(203 213 225);
border-radius: 0.25rem;
height: var(--placeholder-size);
width: var(--placeholder-size);
margin: 0 0.125rem;
}
.container {
border: 1px solid rgb(203 213 225);
border-radius: 0.25rem;
padding: 0.5rem;
width: 16rem;
}
.container__left,
.container__center {
align-items: center;
display: flex;
justify-content: center;
}
```
```css styles.css
.container {
display: grid;
grid-template-columns: 1fr repeat(1, auto) 1fr;
}
.container__left {
margin-right: auto;
}
.container__center {
grid-column-start: 2;
}
```
```html index.html
<div class="container">
<div class="container__left">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container__center">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
```
</Playground>
Replacing the non-existing third column with the real one is a piece of cake. All you need to do is push it to the right using a single CSS declaration.
```css
.container__right {
margin-left: auto;
}
```
<Playground>
```css demo.css hidden
:root {
--placeholder-size: 1rem;
}
body {
align-items: center;
display: flex;
justify-content: center;
}
.circle {
background-color: rgb(203 213 225);
border-radius: 9999px;
height: var(--placeholder-size);
width: var(--placeholder-size);
margin-right: 0.125rem;
}
.square {
background-color: rgb(203 213 225);
border-radius: 0.25rem;
height: var(--placeholder-size);
width: var(--placeholder-size);
margin: 0 0.125rem;
}
.container {
border: 1px solid rgb(203 213 225);
border-radius: 0.25rem;
padding: 0.5rem;
width: 16rem;
}
.container__left,
.container__center,
.container__right {
align-items: center;
display: flex;
justify-content: center;
}
```
```css styles.css hidden
.container {
display: grid;
grid-template-columns: 1fr repeat(1, auto) 1fr;
}
.container__left {
margin-right: auto;
}
.container__center {
grid-column-start: 2;
}
.container__right {
margin-left: auto;
}
```
```html index.html hidden
<div class="container">
<div class="container__left">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="container__center">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="container__right">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
```
</Playground>
## Usages
In addition to the sample usages mentioned earlier, I've been using this technique to create a layout that centers the main content of the page while aligning the sidebar to the right side of the screen.
Here's an example of what the layout looks like:
<Playground>
```css demo.css hidden
.container {
border: 1px solid rgb(203 213 225);
width: 100%;
height: 16rem;
}
.container__main {
align-items: center;
display: flex;
justify-content: center;
background: rgb(203 213 225);
width: 9rem;
}
.container__sidebar {
align-items: center;
display: flex;
justify-content: center;
background: rgb(226 232 240);
width: 4rem;
}
@media (min-width: 600px) {
.container__main {
width: 15rem;
}
.container__sidebar {
width: 8rem;
}
}
```
```css styles.css
.container {
display: grid;
grid-template-columns: 1fr repeat(1, auto) 1fr;
}
.container__main {
grid-column-start: 2;
}
.container__sidebar {
margin-left: auto;
}
```
```html index.html
<div class="container">
<div class="container__main">Main</div>
<div class="container__sidebar">Sidebar</div>
</div>
```
</Playground>
================================================
FILE: contents/centering.mdx
================================================
---
category: Display
created: '2019-11-15'
description: Center an element with CSS flexbox
keywords: css centering, css flexbox
thumbnail: /assets/css-layout/thumbnails/centering.png
title: Centering
---
## HTML
```html index.html
<div class="centering">...</div>
```
## CSS
```css styles.css
.centering {
align-items: center;
display: flex;
justify-content: center;
}
```
<Playground>
```css placeholders.css hidden
.circle {
background: #d1d5db;
border-radius: 9999px;
height: var(--circle-size);
width: var(--circle-size);
}
.circle--sm {
--circle-size: 0.5rem;
}
.circle--md {
--circle-size: 1.5rem;
}
.circle--lg {
--circle-size: 4rem;
}
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
```
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.centering {
align-items: center;
display: flex;
justify-content: center;
/* Demo */
flex-direction: column;
width: 16rem;
}
```
```html index.html hidden
<div class="centering">
<div class="circle circle--md"></div>
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/chip.mdx
================================================
---
category: Input
created: '2019-12-21'
description: Create a chip component with CSS flexbox
keywords: css chip, css flexbox, css tag
thumbnail: /assets/css-layout/thumbnails/chip.png
title: Chip
---
## HTML
```html index.html
<div class="chip">
<!-- Content -->
<div class="chip__content">...</div>
<!-- The close button -->
<button class="chip__button">
<div class="chip__button-line chip__button-line--first"></div>
<div class="chip__button-line chip__button-line--second"></div>
</button>
</div>
```
## CSS
```css styles.css
.chip {
/* Center the content */
align-items: center;
display: inline-flex;
justify-content: center;
/* Background color */
background-color: #d1d5db;
/* Rounded border */
border-radius: 9999px;
/* Spacing */
padding: 0.25rem 0.5rem;
}
.chip__content {
margin-right: 0.25rem;
}
```
The [close button](https://phuoc.ng/collection/css-layout/close-button/) is used to create a button for removing the chip:
```css
.chip__button {
/* Reset */
background-color: transparent;
border-color: transparent;
/* Cursor */
cursor: pointer;
/* Size */
height: 1rem;
width: 1rem;
/* Used to position the inner */
position: relative;
}
.chip__button-line {
/* Background color */
background-color: #9ca3af;
/* Position */
position: absolute;
/* Size */
height: 1px;
width: 100%;
}
.chip__button-line--first {
/* Position */
left: 0px;
top: 50%;
transform: translate(0%, -50%) rotate(45deg);
/* Size */
height: 1px;
width: 100%;
}
.chip__button-line--second {
/* Position */
left: 50%;
top: 0px;
transform: translate(-50%, 0%) rotate(45deg);
/* Size */
height: 100%;
width: 1px;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.chip {
/* Center the content */
align-items: center;
display: inline-flex;
justify-content: center;
/* Background color */
background-color: #d1d5db;
/* Rounded border */
border-radius: 9999px;
/* Spacing */
padding: 0.25rem 0.5rem;
}
.chip__content {
margin-right: 0.25rem;
}
.chip__button {
/* Reset */
background-color: transparent;
border-color: transparent;
/* Cursor */
cursor: pointer;
/* Size */
height: 1rem;
width: 1rem;
/* Used to position the inner */
position: relative;
}
.chip__button-line {
/* Background color */
background-color: #9ca3af;
/* Position */
position: absolute;
/* Size */
height: 1px;
width: 100%;
}
.chip__button-line--first {
/* Position */
left: 0px;
top: 50%;
transform: translate(0%, -50%) rotate(45deg);
/* Size */
height: 1px;
width: 100%;
}
.chip__button-line--second {
/* Position */
left: 50%;
top: 0px;
transform: translate(-50%, 0%) rotate(45deg);
/* Size */
height: 100%;
width: 1px;
}
```
```html index.html hidden
<div class="chip">
<div class="chip__content">CSS</div>
<button class="chip__button">
<div class="chip__button-line chip__button-line--first"></div>
<div class="chip__button-line chip__button-line--second"></div>
</button>
</div>
```
</Playground>
================================================
FILE: contents/circular-navigation.mdx
================================================
---
category: Navigation
created: '2019-11-30'
description: Create a circular navigation with CSS flexbox
keywords: css circular navigation, css flexbox
thumbnail: /assets/css-layout/thumbnails/circular-navigation.png
title: Circular navigation
---
## HTML
```html index.html
<div class="circular-navigation">
<!-- The trigger element that will show all circles when user clicks it -->
...
<!-- A circle menu item -->
<div class="circular-navigation__circle">
<!-- The content -->
<div class="circular-navigation__content">...</div>
</div>
<!-- Repeat menu items -->
...
</div>
```
## CSS
```css styles.css
.circular-navigation {
position: relative;
}
.circular-navigation__circle {
/* Position */
position: absolute;
top: 0;
/*
3rem is the distance from the item to the trigger element.
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
in case you want to have a total of 6 menu items.
The formulation is 360 / numberOfItems * indexOfItem
*/
transform: rotate(0deg) translateX(-3rem);
/* Must have the same size as the trigger element */
height: 2rem;
width: 2rem;
}
.circular-navigation__content {
/*
Rotate it to make it displayed vertically
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
in case you want to have a total of 6 menu items.
The formulation is -(360 / numberOfItems * indexOfItem)
*/
transform: rotate(-0deg);
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Take full size */
height: 100%;
width: 100%;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.circular-navigation-container {
/* Demo */
align-items: center;
display: flex;
justify-content: center;
height: 8rem;
width: 8rem;
}
.circular-navigation {
position: relative;
height: 2rem;
width: 2rem;
}
.circular-navigation__circle {
/* Position */
position: absolute;
top: 0;
/*
3rem is the distance from the item to the trigger element.
Replace 0deg with 60deg, 180deg, 240deg, 300deg for another item
in case you want to have a total of 6 menu items.
The formulation is 360 / numberOfItems * indexOfItem
*/
transform: rotate(var(--circular-navigation__circle-degree)) translateX(-3rem);
/* Must have the same size as the trigger element */
height: 2rem;
width: 2rem;
/* Demo */
background-color: #d1d5db;
border-radius: 9999px;
}
.circular-navigation__content {
/*
Rotate it to make it displayed vertically
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item
in case you want to have a total of 6 menu items.
The formulation is -(360 / numberOfItems * indexOfItem)
*/
transform: rotate(var(--circular-navigation__content-degree));
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Take full size */
height: 100%;
width: 100%;
}
.circular-navigation__circle--1 {
--circular-navigation__circle-degree: 0deg;
--circular-navigation__content-degree: -0deg;
}
.circular-navigation__circle--2 {
--circular-navigation__circle-degree: 60deg;
--circular-navigation__content-degree: -60deg;
}
.circular-navigation__circle--3 {
--circular-navigation__circle-degree: 120deg;
--circular-navigation__content-degree: -120deg;
}
.circular-navigation__circle--4 {
--circular-navigation__circle-degree: 180deg;
--circular-navigation__content-degree: -180deg;
}
.circular-navigation__circle--5 {
--circular-navigation__circle-degree: 240deg;
--circular-navigation__content-degree: -240deg;
}
.circular-navigation__circle--6 {
--circular-navigation__circle-degree: 300deg;
--circular-navigation__content-degree: -300deg;
}
```
```html index.html hidden
<div class="circular-navigation-container">
<div class="circular-navigation">
<div class="circular-navigation__circle circular-navigation__circle--1">
<div class="circular-navigation__content">1</div>
</div>
<div class="circular-navigation__circle circular-navigation__circle--2">
<div class="circular-navigation__content">2</div>
</div>
<div class="circular-navigation__circle circular-navigation__circle--3">
<div class="circular-navigation__content">3</div>
</div>
<div class="circular-navigation__circle circular-navigation__circle--4">
<div class="circular-navigation__content">4</div>
</div>
<div class="circular-navigation__circle circular-navigation__circle--5">
<div class="circular-navigation__content">5</div>
</div>
<div class="circular-navigation__circle circular-navigation__circle--6">
<div class="circular-navigation__content">6</div>
</div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/close-button.mdx
================================================
---
category: Display
created: '2019-12-11'
description: Create a close button with CSS flexbox
keywords: css close button, css flexbox
thumbnail: /assets/css-layout/thumbnails/close-button.png
title: Close button
---
## HTML
```html index.html
<button class="close-button">
<div class="close-button__line close-button__line--first"></div>
<div class="close-button__line close-button__line--second"></div>
</button>
```
## CSS
```css styles.css
.close-button {
/* Reset */
background-color: transparent;
border-color: transparent;
/* Cursor */
cursor: pointer;
/* Size */
height: 3rem;
width: 3rem;
/* Used to position the inner */
position: relative;
}
.close-button__line {
/* Background color */
background-color: #d1d5db;
/* Position */
position: absolute;
/* Size */
height: 1px;
width: 100%;
}
.close-button__line--first {
/* Position */
left: 0px;
top: 50%;
transform: translate(0%, -50%) rotate(45deg);
/* Size */
height: 1px;
width: 100%;
}
.close-button__line--second {
/* Position */
left: 50%;
top: 0px;
transform: translate(-50%, 0%) rotate(45deg);
/* Size */
height: 100%;
width: 1px;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.close-button {
/* Reset */
background-color: transparent;
border-color: transparent;
/* Cursor */
cursor: pointer;
/* Size */
height: 3rem;
width: 3rem;
/* Used to position the inner */
position: relative;
}
.close-button__line {
/* Background color */
background-color: #d1d5db;
/* Position */
position: absolute;
/* Size */
height: 1px;
width: 100%;
}
.close-button__line--first {
/* Position */
left: 0px;
top: 50%;
transform: translate(0%, -50%) rotate(45deg);
/* Size */
height: 1px;
width: 100%;
}
.close-button__line--second {
/* Position */
left: 50%;
top: 0px;
transform: translate(-50%, 0%) rotate(45deg);
/* Size */
height: 100%;
width: 1px;
}
```
```html index.html hidden
<button class="close-button">
<div class="close-button__line close-button__line--first"></div>
<div class="close-button__line close-button__line--second"></div>
</button>
```
</Playground>
================================================
FILE: contents/color-swatch.mdx
================================================
---
category: Display
created: '2021-05-08'
description: Create a color swatch with CSS flexbox
keywords: css color swatch, css flexbox
thumbnail: /assets/css-layout/thumbnails/color-swatch.png
title: Color swatch
---
## HTML
```html index.html
<div class="swatch">
<div class="swatch__item" style="background-color: ..."></div>
<!-- Repeat other items -->
...
</div>
```
## CSS
```css styles.css
.swatch {
/* Wrap the items */
display: flex;
flex-wrap: wrap;
}
.swatch__item {
/* Rounded border */
border-radius: 9999px;
height: 1.5rem;
width: 1.5rem;
/* Space between items */
margin: 0.5rem;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.swatch {
/* Wrap the items */
align-items: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.swatch__item {
/* Rounded border */
border-radius: 9999px;
height: 1.5rem;
width: 1.5rem;
/* Space between items */
margin: 0.5rem;
}
.swatch__item--1st {
background-color: rgba(0, 0, 0, 0.1);
}
.swatch__item--2nd {
background-color: rgba(0, 0, 0, 0.2);
}
.swatch__item--3rd {
background-color: #d1d5db;
}
.swatch__item--4th {
background-color: rgba(0, 0, 0, 0.4);
}
.swatch__item--5th {
background-color: rgba(0, 0, 0, 0.5);
}
.swatch__item--6th {
background-color: rgba(0, 0, 0, 0.6);
}
```
```html index.html hidden
<div class="swatch">
<div class="swatch__item swatch__item--1st"></div>
<div class="swatch__item swatch__item--2nd"></div>
<div class="swatch__item swatch__item--3rd"></div>
<div class="swatch__item swatch__item--4th"></div>
<div class="swatch__item swatch__item--5th"></div>
<div class="swatch__item swatch__item--6th"></div>
</div>
```
</Playground>
================================================
FILE: contents/concave-corners.mdx
================================================
---
category: Display
created: '2021-05-09'
description: Create concave corners with CSS
keywords: css border radius, css concave border radius, css concave corners
thumbnail: /assets/css-layout/thumbnails/concave-corners.png
title: Concave corners
---
## HTML
```html index.html
<div class="concave-corners">
<!-- The top-left corner -->
<div class="concave-corners__corner concave-corners__corner--tl"></div>
<!-- The top-right corner -->
<div class="concave-corners__corner concave-corners__corner--tr"></div>
<!-- The bottom-left corner -->
<div class="concave-corners__corner concave-corners__corner--bl"></div>
<!-- The bottom-right corner -->
<div class="concave-corners__corner concave-corners__corner--br"></div>
<!-- Content -->
...
</div>
```
## CSS
```css styles.css
.concave-corners {
background-color: #d1d5db;
/* Used to position the corners */
position: relative;
}
.concave-corners__corner {
/* Absolute position */
position: absolute;
/* Size */
height: 1rem;
width: 1rem;
background: #fff;
}
.concave-corners__corner--tl {
/* Position */
left: 0;
top: 0;
/* Border radius */
border-radius: 0 0 1rem 0;
}
.concave-corners__corner--tr {
/* Position */
right: 0;
top: 0;
/* Border radius */
border-radius: 0 0 0 1rem;
}
.concave-corners__corner--bl {
/* Position */
bottom: 0;
left: 0;
/* Border radius */
border-radius: 0 1rem 0 0;
}
.concave-corners__corner--br {
/* Position */
bottom: 0;
right: 0;
/* Border radius */
border-radius: 1rem 0 0 0;
}
```
<Playground>
```css styles.css hidden
body {
height: 24rem;
}
.concave-corners {
background-color: #d1d5db;
/* Used to position the corners */
position: relative;
/* Misc */
height: 100%;
width: 100%;
}
.concave-corners__corner {
/* Absolute position */
position: absolute;
/* Size */
height: 1rem;
width: 1rem;
background: #fff;
}
.concave-corners__corner--tl {
/* Position */
left: 0;
top: 0;
/* Border radius */
border-radius: 0 0 1rem 0;
}
.concave-corners__corner--tr {
/* Position */
right: 0;
top: 0;
/* Border radius */
border-radius: 0 0 0 1rem;
}
.concave-corners__corner--bl {
/* Position */
bottom: 0;
left: 0;
/* Border radius */
border-radius: 0 1rem 0 0;
}
.concave-corners__corner--br {
/* Position */
bottom: 0;
right: 0;
/* Border radius */
border-radius: 1rem 0 0 0;
}
```
```html index.html hidden
<div class="concave-corners">
<div class="concave-corners__corner concave-corners__corner--tl"></div>
<div class="concave-corners__corner concave-corners__corner--tr"></div>
<div class="concave-corners__corner concave-corners__corner--bl"></div>
<div class="concave-corners__corner concave-corners__corner--br"></div>
</div>
```
</Playground>
================================================
FILE: contents/cookie-banner.mdx
================================================
---
category: Display
created: '2019-11-30'
description: Create a cookie banner with CSS flexbox
keywords: css cookie banner, css flexbox
thumbnail: /assets/css-layout/thumbnails/cookie-banner.png
title: Cookie banner
---
## HTML
```html index.html
<div class="cookie-banner">
<!-- Tells visitors that the website uses cookie -->
<div class="cookie-banner__content">...</div>
<!-- Close button -->
...
</div>
```
## CSS
```css styles.css
.cookie-banner {
/* Banner is displayed at the bottom */
bottom: 0;
left: 0;
position: fixed;
width: 100%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.cookie-banner__content {
/* Take available width */
flex: 1;
}
```
<Playground>
```css placeholders.css hidden
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
```
```css styles.css hidden
body {
height: 24rem;
}
.cookie-banner {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
height: 100%;
width: 100%;
align-items: end;
display: flex;
}
.cookie-banner__content {
border-top: 1px solid #d1d5db;
/* Take available width */
flex: 1;
padding: 0 0.5rem;
}
```
```html index.html hidden
<div class="cookie-banner">
<div class="cookie-banner__content">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/corner-ribbon.mdx
================================================
---
category: Display
created: '2019-12-01'
description: Create a corner ribbon with CSS flexbox
keywords: css flexbox, css ribbon
thumbnail: /assets/css-layout/thumbnails/corner-ribbon.png
title: Corner ribbon
---
## HTML
```html index.html
<div class="corner-ribbon">
<!-- The container -->
<div class="corner-ribbon__inner">
<!-- The ribbon -->
<div class="corner-ribbon__ribbon"></div>
</div>
</div>
```
## CSS
```css styles.css
.corner-ribbon {
position: relative;
}
.corner-ribbon__inner {
/* Displayed at the top left corner */
left: 0px;
position: absolute;
top: 0px;
/* Size */
height: 4rem;
width: 4rem;
/* Hide the part of its children which is displayed outside */
overflow: hidden;
}
.corner-ribbon__ribbon {
/* Position */
left: 1rem;
position: absolute;
top: 1rem;
/* Size */
height: 1.5rem;
width: 5.656rem;
/* Displayed diagonally */
transform: translate(-38px, -8px) rotate(-45deg);
/* Background color */
background-color: #d1d5db;
/* Centerize the text content */
text-align: center;
}
```
<Playground>
```css styles.css hidden
body {
height: 24rem;
}
.corner-ribbon {
position: relative;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
height: 100%;
width: 100%;
}
.corner-ribbon__inner {
/* Displayed at the top left corner */
left: 0px;
position: absolute;
top: 0px;
/* Size */
height: 4rem;
width: 4rem;
/* Hide the part of its children which is displayed outside */
overflow: hidden;
}
.corner-ribbon__ribbon {
/* Position */
left: 1rem;
position: absolute;
top: 1rem;
/* Size */
height: 1.5rem;
width: 5.656rem;
/* Displayed diagonally */
transform: translate(-38px, -8px) rotate(-45deg);
/* Background color */
background-color: #d1d5db;
/* Centerize the text content */
text-align: center;
}
```
```html index.html hidden
<div class="corner-ribbon">
<div class="corner-ribbon__inner">
<div class="corner-ribbon__ribbon">
</div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/curved-background.mdx
================================================
---
category: Display
created: '2020-01-17'
description: Create an element with curved background
keywords: css border radius, css curved background
thumbnail: /assets/css-layout/thumbnails/curved-background.png
title: Curved background
---
## HTML
```html index.html
<div class="curved-background">
<div class="curved-background__curved"></div>
</div>
```
## CSS
```css styles.css
.curved-background__curved {
/* Background color */
background-color: #d1d5db;
/* You can use gradient background color such as */
/* background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */
/* Curved corners */
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
/* Size */
height: 50%;
width: 100%;
}
```
<Playground>
```css styles.css hidden
body {
height: 24rem;
}
.curved-background {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
height: 100%;
width: 100%;
}
.curved-background__curved {
background-color: #d1d5db;
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
height: 8rem;
width: 100%;
}
```
```html index.html hidden
<div class="curved-background">
<div class="curved-background__curved"></div>
</div>
```
</Playground>
================================================
FILE: contents/custom-checkbox-button.mdx
================================================
---
category: Input
created: '2019-12-01'
description: Create a custom checkbox button with CSS flexbox
keywords: css checkbox, css flexbox
thumbnail: /assets/css-layout/thumbnails/custom-checkbox-button.png
title: Custom checkbox button
---
## HTML
```html index.html
<label class="custom-checkbox-button">
<!-- The real checkbox -->
<input type="checkbox" class="custom-checkbox-button__input" />
<!-- The fake square -->
<div class="custom-checkbox-button__square">
<!-- The inner square -->
<div class="custom-checkbox-button__checkbox custom-checkbox-button__checkbox--selected"></div>
</div>
<!-- The text -->
...
</label>
```
## CSS
```css styles.css
.custom-checkbox-button {
/* Center the content horizontally */
align-items: center;
display: inline-flex;
/* Cursor */
cursor: pointer;
}
.custom-checkbox-button__input {
/* Hide it */
display: none;
}
.custom-checkbox-button__square {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
/* Spacing */
margin-right: 0.5rem;
padding: 0.25rem;
}
.custom-checkbox-button__checkbox {
background-color: transparent;
border-radius: 0.25rem;
height: 1rem;
width: 1rem;
}
.custom-checkbox-button__checkbox--selected {
/* For selected checkbox */
background-color: #3b82f6;
}
```
<Playground>
```css placeholders.css hidden
.rectangle {
background: #d1d5db;
border-radius: 0.25rem;
height: var(--rectangle-height);
width: var(--rectangle-width);
}
.rectangle--hor.rectangle--20 {
--rectangle-width: 20%;
}
.rectangle--hor.rectangle--40 {
--rectangle-width: 40%;
}
.rectangle--hor.rectangle--60 {
--rectangle-width: 60%;
}
.rectangle--hor.rectangle--80 {
--rectangle-width: 80%;
}
.rectangle--hor.rectangle--100 {
--rectangle-width: 100%;
}
.rectangle--hor.rectangle--sm {
--rectangle-height: 0.5rem;
}
.rectangle--hor.rectangle--md {
--rectangle-height: 2rem;
}
.rectangle--hor.rectangle--lg {
--rectangle-height: 4rem;
}
.rectangle--ver.rectangle--20 {
--rectangle-height: 20%;
}
.rectangle--ver.rectangle--40 {
--rectangle-height: 40%;
}
.rectangle--ver.rectangle--60 {
--rectangle-height: 60%;
}
.rectangle--ver.rectangle--80 {
--rectangle-height: 80%;
}
.rectangle--ver.rectangle--100 {
--rectangle-height: 100%;
}
.rectangle--ver.rectangle--sm {
--rectangle-width: 0.5rem;
}
.rectangle--ver.rectangle--md {
--rectangle-width: 2rem;
}
.rectangle--ver.rectangle--lg {
--rectangle-width: 4rem;
}
```
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.custom-checkbox-button {
/* Center the content horizontally */
align-items: center;
display: flex;
/* Cursor */
cursor: pointer;
/* Demo */
margin: 0.25rem 0;
width: 16rem;
}
.custom-checkbox-button__input {
/* Hide it */
display: none;
}
.custom-checkbox-button__square {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
/* Spacing */
margin-right: 0.5rem;
padding: 0.25rem;
}
.custom-checkbox-button__checkbox {
background-color: transparent;
border-radius: 0.25rem;
height: 1rem;
width: 1rem;
}
.custom-checkbox-button__checkbox--selected {
/* For selected checkbox */
background-color: #3b82f6;
}
```
```html index.html hidden
<label class="custom-checkbox-button">
<input type="checkbox" class="custom-checkbox-button__input" />
<div class="custom-checkbox-button__square">
<div class="custom-checkbox-button__checkbox custom-checkbox-button__checkbox--selected"></div>
</div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--60"></div>
</label>
<label class="custom-checkbox-button">
<input type="checkbox" class="custom-checkbox-button__input" />
<div class="custom-checkbox-button__square">
<div class="custom-checkbox-button__checkbox custom-checkbox-button__checkbox--selected"></div>
</div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--80"></div>
</label>
<label class="custom-checkbox-button">
<input type="checkbox" class="custom-checkbox-button__input" />
<div class="custom-checkbox-button__square">
<div class="custom-checkbox-button__checkbox custom-checkbox-button__checkbox--selected"></div>
</div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--40"></div>
</label>
```
</Playground>
## See also
- [Box selector](https://phuoc.ng/collection/css-layout/box-selector/)
- [Custom radio button](https://phuoc.ng/collection/css-layout/custom-radio-button/)
================================================
FILE: contents/custom-radio-button.mdx
================================================
---
category: Input
created: '2019-12-01'
description: Create a custom radio button with CSS flexbox
keywords: css flexbox, css radio
thumbnail: /assets/css-layout/thumbnails/custom-radio-button.png
title: Custom radio button
---
## HTML
```html index.html
<label class="custom-radio-button">
<!-- The real radio -->
<input type="radio" class="custom-radio-button__input" />
<!-- The fake circle -->
<div class="custom-radio-button__circle">
<!-- The inner circle -->
<div class="custom-radio-button__radio custom-radio-button__radio--selected"></div>
</div>
<!-- The text -->
...
</label>
```
## CSS
```css styles.css
.custom-radio-button {
/* Center the content horizontally */
align-items: center;
display: inline-flex;
/* Cursor */
cursor: pointer;
}
.custom-radio-button__input {
/* Hide it */
display: none;
}
.custom-radio-button__circle {
/* Rounded border */
border: 1px solid #d1d5db;
border-radius: 9999px;
/* Spacing */
margin-right: 0.5rem;
padding: 0.25rem;
}
.custom-radio-button__radio {
/* Rounded border */
border-radius: 9999px;
height: 1rem;
width: 1rem;
/* For not selected radio */
background-color: transparent;
}
.custom-radio-button__radio--selected {
/* For selected radio */
background-color: #3b82f6;
}
```
<Playground>
```css placeholders.css hidden
.rectangle {
background: #d1d5db;
border-radius: 0.25rem;
height: var(--rectangle-height);
width: var(--rectangle-width);
}
.rectangle--hor.rectangle--20 {
--rectangle-width: 20%;
}
.rectangle--hor.rectangle--40 {
--rectangle-width: 40%;
}
.rectangle--hor.rectangle--60 {
--rectangle-width: 60%;
}
.rectangle--hor.rectangle--80 {
--rectangle-width: 80%;
}
.rectangle--hor.rectangle--100 {
--rectangle-width: 100%;
}
.rectangle--hor.rectangle--sm {
--rectangle-height: 0.5rem;
}
.rectangle--hor.rectangle--md {
--rectangle-height: 2rem;
}
.rectangle--hor.rectangle--lg {
--rectangle-height: 4rem;
}
.rectangle--ver.rectangle--20 {
--rectangle-height: 20%;
}
.rectangle--ver.rectangle--40 {
--rectangle-height: 40%;
}
.rectangle--ver.rectangle--60 {
--rectangle-height: 60%;
}
.rectangle--ver.rectangle--80 {
--rectangle-height: 80%;
}
.rectangle--ver.rectangle--100 {
--rectangle-height: 100%;
}
.rectangle--ver.rectangle--sm {
--rectangle-width: 0.5rem;
}
.rectangle--ver.rectangle--md {
--rectangle-width: 2rem;
}
.rectangle--ver.rectangle--lg {
--rectangle-width: 4rem;
}
```
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.custom-radio-button {
/* Center the content horizontally */
align-items: center;
display: flex;
/* Cursor */
cursor: pointer;
/* Demo */
margin: 0.25rem 0;
width: 16rem;
}
.custom-radio-button__input {
/* Hide it */
display: none;
}
.custom-radio-button__circle {
/* Rounded border */
border: 1px solid #d1d5db;
border-radius: 9999px;
/* Spacing */
margin-right: 0.5rem;
padding: 0.25rem;
}
.custom-radio-button__radio {
/* Rounded border */
border-radius: 9999px;
height: 1rem;
width: 1rem;
/* For not selected radio */
background-color: transparent;
}
.custom-radio-button__radio--selected {
/* For selected radio */
background-color: #3b82f6;
}
```
```html index.html hidden
<label class="custom-radio-button">
<input type="radio" class="custom-radio-button__input" />
<div class="custom-radio-button__circle">
<div class="custom-radio-button__radio custom-radio-button__radio--selected"></div>
</div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--40"></div>
</label>
<label class="custom-radio-button">
<input type="radio" class="custom-radio-button__input" />
<div class="custom-radio-button__circle">
<div class="custom-radio-button__radio custom-radio-button__radio--selected"></div>
</div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--80"></div>
</label>
<label class="custom-radio-button">
<input type="radio" class="custom-radio-button__input" />
<div class="custom-radio-button__circle">
<div class="custom-radio-button__radio custom-radio-button__radio--selected"></div>
</div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--60"></div>
</label>
```
</Playground>
## See also
- [Box selector](https://phuoc.ng/collection/css-layout/box-selector/)
- [Custom checkbox button](https://phuoc.ng/collection/css-layout/custom-checkbox-button/)
================================================
FILE: contents/diagonal-section.mdx
================================================
---
category: Display
created: '2019-12-25'
description: Create a diagonal section with CSS
keywords: css diagonal section, css transform skew
thumbnail: /assets/css-layout/thumbnails/diagonal-section.png
title: Diagonal section
---
## HTML
```html index.html
<div class="diagonal-section">
<!-- The diagonal area -->
<div class="diagonal-section__diagonal"></div>
<!-- Content -->
...
</div>
```
## CSS
```css styles.css
.diagonal-section {
/* Used to position the diagonal area */
position: relative;
}
.diagonal-section__diagonal {
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;
/* Take full size */
height: 100%;
width: 100%;
/* Create diagonal sides */
transform: skewY(-5deg);
/* Background color */
background-color: #d1d5db;
/* Displayed under the main content */
z-index: -1;
}
```
<Playground>
```css styles.css hidden
body {
height: 24rem;
}
.diagonal-section {
/* Used to position the diagonal area */
position: relative;
height: 100%;
width: 100%;
}
.diagonal-section__diagonal {
/* Absolute position */
left: 0px;
position: absolute;
top: 50%;
/* Take full size */
height: 2rem;
width: 100%;
/* Create diagonal sides */
transform: translate(0, -50%) skewY(-15deg);
/* Background color */
background-color: #d1d5db;
}
```
```html index.html hidden
<div class="diagonal-section">
<div class="diagonal-section__diagonal"></div>
</div>
```
</Playground>
================================================
FILE: contents/docked-at-corner.mdx
================================================
---
category: Display
created: '2019-11-23'
description: Dock an element at corner with CSS
keywords: css docked, css flexbox
thumbnail: /assets/css-layout/thumbnails/docked-at-corner.png
title: Docked at corner
---
## HTML
```html index.html
<div class="docked-at-corner">
<!-- Docked at the top right corner -->
<div class="docked-at-corner__docker"></div>
</div>
```
## CSS
```css styles.css
.docked-at-corner {
position: relative;
}
.docked-at-corner__docker {
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
height: 24rem;
justify-content: center;
}
.docked-at-corner {
position: relative;
height: 16rem;
width: 20rem;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
}
.docked-at-corner__docker {
background-color: #22c55e;
border-radius: 9999px;
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Size */
height: 1rem;
width: 1rem;
}
```
```html index.html hidden
<div class="docked-at-corner">
<div class="docked-at-corner__docker"></div>
</div>
```
</Playground>
## See also
- Discover how to animate a docked element using the [pulse animation](https://phuoc.ng/collection/css-animation/pulse-animation/)
================================================
FILE: contents/dot-leader.mdx
================================================
---
category: Display
created: '2019-11-27'
description: Create dot leaders with CSS flexbox
keywords: css dot leader, css flexbox
thumbnail: /assets/css-layout/thumbnails/dot-leader.png
title: Dot leader
---
## HTML
```html index.html
<div class="dot-leader">
<!-- Left side -->
<div>...</div>
<!-- Dots -->
<div class="dot-leader__dots"></div>
<!-- Right side -->
<div>...</div>
</div>
```
## CSS
```css styles.css
.dot-leader {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.dot-leader__dots {
/* Bottom border */
border-bottom: 1px dotted #d1d5db;
/* Take remaining width */
flex: 1;
/* Spacing */
margin: 0 0.25rem;
}
```
<Playground>
```css placeholders.css hidden
.circle {
background: #d1d5db;
border-radius: 9999px;
height: var(--circle-size);
width: var(--circle-size);
}
.circle--sm {
--circle-size: 0.5rem;
}
.circle--md {
--circle-size: 1.5rem;
}
.circle--lg {
--circle-size: 4rem;
}
.rectangle {
background: #d1d5db;
border-radius: 0.25rem;
height: var(--rectangle-height);
width: var(--rectangle-width);
}
.rectangle--hor.rectangle--20 {
--rectangle-width: 20%;
}
.rectangle--hor.rectangle--40 {
--rectangle-width: 40%;
}
.rectangle--hor.rectangle--60 {
--rectangle-width: 60%;
}
.rectangle--hor.rectangle--80 {
--rectangle-width: 80%;
}
.rectangle--hor.rectangle--100 {
--rectangle-width: 100%;
}
.rectangle--hor.rectangle--sm {
--rectangle-height: 0.5rem;
}
.rectangle--hor.rectangle--md {
--rectangle-height: 2rem;
}
.rectangle--hor.rectangle--lg {
--rectangle-height: 4rem;
}
.rectangle--ver.rectangle--20 {
--rectangle-height: 20%;
}
.rectangle--ver.rectangle--40 {
--rectangle-height: 40%;
}
.rectangle--ver.rectangle--60 {
--rectangle-height: 60%;
}
.rectangle--ver.rectangle--80 {
--rectangle-height: 80%;
}
.rectangle--ver.rectangle--100 {
--rectangle-height: 100%;
}
.rectangle--ver.rectangle--sm {
--rectangle-width: 0.5rem;
}
.rectangle--ver.rectangle--md {
--rectangle-width: 2rem;
}
.rectangle--ver.rectangle--lg {
--rectangle-width: 4rem;
}
```
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.dot-leader {
width: 16rem;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
margin: 1rem 0;
}
.dot-leader__dots {
/* Bottom border */
border-bottom: 1px dotted #d1d5db;
/* Take remaining width */
flex: 1;
/* Spacing */
margin: 0 0.25rem;
}
```
```html index.html hidden
<div class="dot-leader">
<div class="rectangle rectangle--hor rectangle--sm rectangle--20"></div>
<div class="dot-leader__dots"></div>
<div class="circle circle--sm"></div>
</div>
<div class="dot-leader">
<div class="rectangle rectangle--hor rectangle--sm rectangle--60"></div>
<div class="dot-leader__dots"></div>
<div class="circle circle--sm"></div>
</div>
<div class="dot-leader">
<div class="rectangle rectangle--hor rectangle--sm rectangle--80"></div>
<div class="dot-leader__dots"></div>
<div class="circle circle--sm"></div>
</div>
<div class="dot-leader">
<div class="rectangle rectangle--hor rectangle--sm rectangle--40"></div>
<div class="dot-leader__dots"></div>
<div class="circle circle--sm"></div>
</div>
<div class="dot-leader">
<div class="rectangle rectangle--hor rectangle--sm rectangle--20"></div>
<div class="dot-leader__dots"></div>
<div class="circle circle--sm"></div>
</div>
```
</Playground>
================================================
FILE: contents/dot-navigation.mdx
================================================
---
category: Navigation
created: '2019-11-22'
description: Create dot navigation with CSS flexbox
keywords: css dot navigation, css flexbox
thumbnail: /assets/css-layout/thumbnails/dot-navigation.png
title: Dot navigation
---
## HTML
```html index.html
<div class="dot-navigation">
<div class="dot-navigation__item"></div>
<!-- Repeat other dots -->
...
</div>
```
## CSS
```css styles.css
.dot-navigation {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
.dot-navigation__item {
/* Rounded border */
border-radius: 9999px;
height: 0.75rem;
width: 0.75rem;
/* Inactive dot */
background-color: transparent;
border: 1px solid #d1d5db;
/* OPTIONAL: Spacing between dots */
margin: 0 0.25rem;
}
/* Active dot */
.dot-navigation__item--active {
background-color: #d1d5db;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.dot-navigation {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
.dot-navigation__item {
/* Rounded border */
border-radius: 9999px;
height: 0.75rem;
width: 0.75rem;
/* Inactive dot */
background-color: transparent;
border: 1px solid #d1d5db;
/* OPTIONAL: Spacing between dots */
margin: 0 0.25rem;
}
.dot-navigation__item--active {
background-color: #d1d5db;
}
```
```html index.html hidden
<div class="dot-navigation">
<div class="dot-navigation__item"></div>
<div class="dot-navigation__item dot-navigation__item--active"></div>
<div class="dot-navigation__item"></div>
<div class="dot-navigation__item"></div>
<div class="dot-navigation__item"></div>
</div>
```
</Playground>
## See also
- [Carousel slider](https://phuoc.ng/collection/css-layout/carousel-slider/)
================================================
FILE: contents/drawer.mdx
================================================
---
category: Navigation
created: '2019-12-13'
description: Create a drawer navigation with CSS
keywords: css drawer, css off-canvas
thumbnail: /assets/css-layout/thumbnails/drawer.png
title: Drawer
---
This pattern is also known as off-canvas.
## HTML
```html index.html
<div class="drawer">
<!-- Backdrop -->
<div class="drawer__overlay"></div>
<!-- Sidebar -->
<div class="drawer__sidebar">...</div>
</div>
```
## CSS
```css styles.css
.drawer {
/* Take full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.drawer__overlay {
/* Take full size */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
/* User still can see the content of main page */
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
}
.drawer__sidebar {
/* Take full height */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 200px;
/* Background */
background-color: #fff;
}
```
<Playground>
```css placeholders.css hidden
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
```
```css styles.css hidden
body {
height: 24rem;
}
.drawer {
/* Demo */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
height: 100%;
width: 100%;
display: flex;
}
.drawer__sidebar {
/* Demo */
border-right: 1px solid #d1d5db;
width: 25%;
}
.drawer__overlay {
/* Demo */
background: #4b5563;
flex: 1;
}
```
```html index.html hidden
<div class="drawer">
<div class="drawer__sidebar">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
<div class="drawer__overlay"></div>
</div>
```
</Playground>
================================================
FILE: contents/drop-area.mdx
================================================
---
category: Display
created: '2019-11-27'
description: Create a dropping area with CSS flexbox
keywords: css dropping area, css flexbox
thumbnail: /assets/css-layout/thumbnails/drop-area.png
title: Drop area
---
## HTML
```html index.html
<div class="drop-area">...</div>
```
## CSS
```css styles.css
.drop-area {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Border */
border: 0.25rem dashed #d1d5db;
border-radius: 0.25rem;
}
```
<Playground>
```css placeholders.css hidden
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
```
```css styles.css hidden
body {
height: 24rem;
}
.drop-area {
padding: 0.5rem;
height: 100%;
width: 100%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Border */
border: 0.25rem dashed #d1d5db;
border-radius: 0.25rem;
}
```
```html index.html hidden
<div class="drop-area">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/drop-cap.mdx
================================================
---
category: Display
created: '2019-11-29'
description: Create a drop cap with CSS
keywords: css drop cap, css :first-letter
thumbnail: /assets/css-layout/thumbnails/drop-cap.png
title: Drop cap
---
## HTML
```html index.html
<div class="drop-cap">...</div>
```
## CSS
```css styles.css
.drop-cap:first-letter {
/* Display at the left */
float: left;
line-height: 1;
/* Spacing */
margin: 0 0.5rem 0 0;
padding: 0 0.5rem;
/* Optional */
border: 2px solid #d1d5db;
font-size: 2rem;
font-weight: 700;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.drop-cap {
overflow: hidden;
}
.drop-cap:first-letter {
border: 2px solid #d1d5db;
/* Display at the left */
float: left;
line-height: 1;
/* Spacing */
margin: 0 0.5rem 0 0;
padding: 0 0.5rem;
/* Optional */
font-size: 2rem;
font-weight: 700;
}
```
```html index.html hidden
<div class="drop-cap">
CSS is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
</div>
```
</Playground>
================================================
FILE: contents/dropdown.mdx
================================================
---
category: Navigation
created: '2019-11-29'
description: Create a dropdown with CSS
keywords: css dropdown, css menu
thumbnail: /assets/css-layout/thumbnails/dropdown.png
title: Dropdown
---
## HTML
```html index.html
<div class="dropdown">
<!-- The trigger element -->
<div class="dropdown__trigger">...</div>
<!-- The content -->
<div class="dropdown__content">...</div>
</div>
```
## CSS
```css styles.css
.dropdown {
position: relative;
}
.dropdown__trigger {
cursor: pointer;
}
/* Hide the dropdown's content by default */
.dropdown__content {
display: none;
/* Position it right below the trigger element */
left: 0;
padding-top: 0.25rem;
position: absolute;
top: 100%;
/* It should be on the top of other elements */
background-color: #fff;
z-index: 9999;
}
/* Show the content when hover on the container */
.dropdown:hover .dropdown__content {
display: block;
}
```
You can use a [triangle button](https://phuoc.ng/collection/css-layout/triangle-buttons/) to indicate that there is content under it.
Move the mouse over the button to see the dropdown.
<Playground>
```css placeholders.css hidden
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
.rectangle {
background: #d1d5db;
border-radius: 0.25rem;
height: var(--rectangle-height);
width: var(--rectangle-width);
}
.rectangle--hor.rectangle--20 {
--rectangle-width: 20%;
}
.rectangle--hor.rectangle--40 {
--rectangle-width: 40%;
}
.rectangle--hor.rectangle--60 {
--rectangle-width: 60%;
}
.rectangle--hor.rectangle--80 {
--rectangle-width: 80%;
}
.rectangle--hor.rectangle--100 {
--rectangle-width: 100%;
}
.rectangle--hor.rectangle--sm {
--rectangle-height: 0.5rem;
}
.rectangle--hor.rectangle--md {
--rectangle-height: 2rem;
}
.rectangle--hor.rectangle--lg {
--rectangle-height: 4rem;
}
.rectangle--ver.rectangle--20 {
--rectangle-height: 20%;
}
.rectangle--ver.rectangle--40 {
--rectangle-height: 40%;
}
.rectangle--ver.rectangle--60 {
--rectangle-height: 60%;
}
.rectangle--ver.rectangle--80 {
--rectangle-height: 80%;
}
.rectangle--ver.rectangle--100 {
--rectangle-height: 100%;
}
.rectangle--ver.rectangle--sm {
--rectangle-width: 0.5rem;
}
.rectangle--ver.rectangle--md {
--rectangle-width: 2rem;
}
.rectangle--ver.rectangle--lg {
--rectangle-width: 4rem;
}
.triangle {
border-style: solid;
height: 0;
width: 0;
}
.triangle--t {
border-color: transparent transparent #d1d5db transparent;
border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
}
.triangle--r {
border-color: transparent transparent transparent #d1d5db;
border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
}
.triangle--b {
border-color: #d1d5db transparent transparent transparent;
border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
}
.triangle--l {
border-color: transparent #d1d5db transparent transparent;
border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
}
.triangle--tr {
border-color: transparent #d1d5db transparent transparent;
border-width: 0 var(--triangle-size) var(--triangle-size) 0;
}
.triangle--br {
border-color: transparent transparent #d1d5db transparent;
border-width: 0 0 var(--triangle-size) var(--triangle-size);
}
.triangle--bl {
border-color: transparent transparent transparent #d1d5db;
border-width: var(--triangle-size) 0 0 var(--triangle-size);
}
.triangle--tl {
border-color: #d1d5db transparent transparent transparent;
border-width: var(--triangle-size) var(--triangle-size) 0 0;
}
.triangle--sm {
--triangle-size: 0.5rem;
}
.triangle--md {
--triangle-size: 2rem;
}
.triangle--lg {
--triangle-size: 4rem;
}
```
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
height: 24rem;
}
.dropdown {
position: relative;
/* Demo */
width: 6rem;
align-items: flex-start;
display: flex;
justify-content: center;
}
.dropdown__trigger {
cursor: pointer;
/* Demo */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
height: 2rem;
width: 6rem;
padding: 0.25rem 0.5rem;
align-items: center;
display: flex;
justify-content: center;
}
/* Hide the dropdown's content by default */
.dropdown__content {
display: none;
/* Position it right below the trigger element */
left: 0;
padding-top: 0.25rem;
position: absolute;
top: 100%;
/* It should be on the top of other elements */
background-color: #fff;
z-index: 9999;
}
.dropdown__body {
/* Demo */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
height: 6rem;
width: 8rem;
}
/* Show the content when hover on the container */
.dropdown:hover .dropdown__content {
display: block;
}
```
```html index.html hidden
<div class="dropdown">
<div class="dropdown__trigger">
<div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div>
<div class="triangle triangle--b triangle--sm"></div>
</div>
<div class="dropdown__content">
<div class="dropdown__body">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/fading-long-section.mdx
================================================
---
category: Display
created: '2020-01-10'
description: Fading long section to indicate there is more content
keywords: css fading overflow, css linear gradient
thumbnail: /assets/css-layout/thumbnails/fading-long-section.png
title: Fading long section
---
The pattern is often used to indicate there is more content.
## HTML
```html index.html
<div class="fading-long-section">
<!-- Main content -->
<div class="fading-long-section__content">...</div>
<!-- The faded element -->
<div class="fading-long-section__fading"></div>
</div>
```
## CSS
```css styles.css
.fading-long-section {
/* Used to position the faded element */
position: relative;
}
.fading-long-section__content {
/* Height */
height: 100%;
overflow-y: hidden;
}
.fading-long-section__fading {
/* Displayed at the bottom */
bottom: 0;
left: 0;
position: absolute;
/* Size */
height: 2rem;
width: 100%;
/* Gradient background */
background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
}
```
<Playground>
```css placeholders.css hidden
.rectangle {
background: #d1d5db;
border-radius: 0.25rem;
margin: 0.5rem 0;
height: var(--rectangle-height);
width: var(--rectangle-width);
}
.rectangle--hor.rectangle--20 {
--rectangle-width: 20%;
}
.rectangle--hor.rectangle--40 {
--rectangle-width: 40%;
}
.rectangle--hor.rectangle--60 {
--rectangle-width: 60%;
}
.rectangle--hor.rectangle--80 {
--rectangle-width: 80%;
}
.rectangle--hor.rectangle--100 {
--rectangle-width: 100%;
}
.rectangle--hor.rectangle--sm {
--rectangle-height: 0.5rem;
}
.rectangle--hor.rectangle--md {
--rectangle-height: 2rem;
}
.rectangle--hor.rectangle--lg {
--rectangle-height: 4rem;
}
.rectangle--ver.rectangle--20 {
--rectangle-height: 20%;
}
.rectangle--ver.rectangle--40 {
--rectangle-height: 40%;
}
.rectangle--ver.rectangle--60 {
--rectangle-height: 60%;
}
.rectangle--ver.rectangle--80 {
--rectangle-height: 80%;
}
.rectangle--ver.rectangle--100 {
--rectangle-height: 100%;
}
.rectangle--ver.rectangle--sm {
--rectangle-width: 0.5rem;
}
.rectangle--ver.rectangle--md {
--rectangle-width: 2rem;
}
.rectangle--ver.rectangle--lg {
--rectangle-width: 4rem;
}
```
```css styles.css hidden
.fading-long-section {
/* Used to position the faded element */
position: relative;
height: 24rem;
}
.fading-long-section__content {
/* Height */
height: 100%;
overflow-y: hidden;
}
.fading-long-section__fading {
/* Displayed at the bottom */
bottom: 0;
left: 0;
position: absolute;
/* Size */
height: 2rem;
width: 100%;
/* Gradient background */
background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
}
```
```html index.html hidden
<div class="fading-long-section">
<div class="fading-long-section__content">
<div class="lines">
<div class="rectangle rectangle--hor rectangle--sm rectangle--40"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--80"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--60"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--20"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--40"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--80"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--60"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--20"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--40"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--80"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--60"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--20"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--40"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--80"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--60"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--20"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--40"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--80"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--60"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div>
<div class="rectangle rectangle--hor rectangle--sm rectangle--20"></div>
</div>
</div>
<div class="fading-long-section__fading"></div>
</div>
```
</Playground>
## See also
- [Create a reference using React.createRef()](https://phuoc.ng/collection/react-ref/create-a-reference-using-react-create-ref/)
- [Customer logos marquee](https://phuoc.ng/collection/css-animation/customer-logos-marquee/)
================================================
FILE: contents/feature-comparison.mdx
================================================
---
category: Display
created: '2019-12-11'
description: Create a feature comparison list with CSS flexbox
keywords: css feature comparison, css flexbox
thumbnail: /assets/css-layout/thumbnails/feature-comparison.png
title: Feature comparison
---
## HTML
```html index.html
<div class="feature-comparison">
<!-- Feature name -->
<div class="feature-comparison__feature">...</div>
<!-- The model -->
<div class="feature-comparison__model">
<!--
For the first row: display the model name (Basic, Pro, etc.)
From the second row: display a yes/no icon indicating the feature is available or not
-->
...
</div>
<!-- Repeated other models -->
...
</div>
<!-- Repeated items -->
...
```
## CSS
```css styles.css
.feature-comparison {
align-items: center;
display: flex;
/* Bottom border */
border-bottom: 1px solid #d1d5db;
/* Spacing */
padding: 0.25rem 0;
}
.feature-comparison__feature {
/* Take available width */
flex: 1;
}
.feature-comparison__model {
/* Center the content */
display: flex;
justify-content: center;
}
```
<Playground>
```css placeholders.css hidden
.circle {
background: #d1d5db;
border-radius: 9999px;
height: var(--circle-size);
width: var(--circle-size);
}
.circle--sm {
--circle-size: 0.5rem;
}
.circle--md {
--circle-size: 1.5rem;
}
.circle--lg {
--circle-size: 4rem;
}
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
.rectangle {
background: #d1d5db;
border-radius: 0.25rem;
height: var(--rectangle-height);
width: var(--rectangle-width);
}
.rectangle--hor.rectangle--20 {
--rectangle-width: 20%;
}
.rectangle--hor.rectangle--40 {
--rectangle-width: 40%;
}
.rectangle--hor.rectangle--60 {
--rectangle-width: 60%;
}
.rectangle--hor.rectangle--80 {
--rectangle-width: 80%;
}
.rectangle--hor.rectangle--100 {
--rectangle-width: 100%;
}
.rectangle--hor.rectangle--sm {
--rectangle-height: 0.5rem;
}
.rectangle--hor.rectangle--md {
--rectangle-height: 2rem;
}
.rectangle--hor.rectangle--lg {
--rectangle-height: 4rem;
}
.rectangle--ver.rectangle--20 {
--rectangle-height: 20%;
}
.rectangle--ver.rectangle--40 {
--rectangle-height: 40%;
}
.rectangle--ver.rectangle--60 {
--rectangle-height: 60%;
}
.rectangle--ver.rectangle--80 {
--rectangle-height: 80%;
}
.rectangle--ver.rectangle--100 {
--rectangle-height: 100%;
}
.rectangle--ver.rectangle--sm {
--rectangle-width: 0.5rem;
}
.rectangle--ver.rectangle--md {
--rectangle-width: 2rem;
}
.rectangle--ver.rectangle--lg {
--rectangle-width: 4rem;
}
```
```css styles.css hidden
.feature-comparison {
align-items: center;
display: flex;
/* Bottom border */
border-bottom: 1px solid #d1d5db;
/* Spacing */
padding: 0.25rem 0;
width: 100%;
}
.feature-comparison__feature {
/* Take available width */
flex: 1;
}
.feature-comparison__model {
/* Center the content */
display: flex;
justify-content: center;
/* Demo */
width: 1.5rem;
}
```
```html index.html hidden
<div class="feature-comparison">
<div class="feature-comparison__feature">
<div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div>
</div>
<div class="feature-comparison__model">
<div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div>
</div>
<div class="feature-comparison__model">
<div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div>
</div>
</div>
<div class="feature-comparison">
<div class="feature-comparison__feature">
<div class="lines">
<div class="line line--20"></div>
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
<div class="feature-comparison__model">
<div class="circle circle--sm"></div>
</div>
<div class="feature-comparison__model">
<div class="circle circle--sm"></div>
</div>
</div>
<div class="feature-comparison">
<div class="feature-comparison__feature">
<div class="lines">
<div class="line line--20"></div>
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
<div class="feature-comparison__model"></div>
<div class="feature-comparison__model">
<div class="circle circle--sm"></div>
</div>
</div>
<div class="feature-comparison">
<div class="feature-comparison__feature">
<div class="lines">
<div class="line line--20"></div>
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
<div class="feature-comparison__model">
<div class="circle circle--sm"></div>
</div>
<div class="feature-comparison__model"></div>
</div>
```
</Playground>
================================================
FILE: contents/feature-list.mdx
================================================
---
category: Display
created: '2019-11-21'
description: Create a feature list with CSS flexbox
keywords: css feature list, css flexbox
thumbnail: /assets/css-layout/thumbnails/feature-list.png
title: Feature list
---
## HTML
```html index.html
<!-- Feature item -->
<div class="feature-list">
<!-- Image -->
<div class="feature-list__image">...</div>
<!-- Right side -->
<div class="feature-list__desc">...</div>
</div>
<!-- Repeated items -->
...
```
## CSS
```css styles.css
.feature-list {
display: flex;
/* OPTIONAL: Spacing between items */
margin: 0.5rem 0;
}
/* Reverse the order of image and content */
.feature-list--reverse {
flex-direction: row-reverse;
}
.feature-list__image {
width: 2rem;
}
.feature-list__desc {
/* Take the remaining width */
flex: 1;
}
```
<Playground>
```css placeholders.css hidden
.circle {
background: #d1d5db;
border-radius: 9999px;
height: var(--circle-size);
width: var(--circle-size);
}
.circle--sm {
--circle-size: 0.5rem;
}
.circle--md {
--circle-size: 1.5rem;
}
.circle--lg {
--circle-size: 4rem;
}
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
```
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.feature-list {
display: flex;
/* OPTIONAL: Spacing between items */
margin: 0.5rem 0;
width: 16rem;
}
.feature-list--reverse {
flex-direction: row-reverse;
}
.feature-list__image {
width: 2rem;
}
.feature-list__desc {
/* Take the remaining width */
flex: 1;
}
```
```html index.html hidden
<div class="feature-list">
<div class="feature-list__image">
<div class="circle circle--md"></div>
</div>
<div class="feature-list__desc">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
</div>
<div class="feature-list feature-list--reverse">
<div class="feature-list__image">
<div class="circle circle--md"></div>
</div>
<div class="feature-list__desc">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/fixed-at-corner.mdx
================================================
---
category: Display
created: '2019-11-17'
description: Fix an element at corner with CSS
keywords: css fixed
thumbnail: /assets/css-layout/thumbnails/fixed-at-corner.png
title: Fixed at corner
---
## HTML
```html index.html
<div class="fixed-at-corner">
<!-- Top-left corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--tl">...</div>
<!-- Top-right corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--tr">...</div>
<!-- Bottom-right corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--br">...</div>
<!-- Bottom-left corner -->
<div class="fixed-at-corner__corner fixed-at-corner__corner--bl">...</div>
</div>
```
## CSS
```css styles.css
.fixed-at-corner {
position: relative;
}
.fixed-at-corner__corner {
position: absolute;
}
.fixed-at-corner__corner--tl {
left: 0;
top: 0;
}
.fixed-at-corner__corner--tr {
top: 0;
right: 0;
}
.fixed-at-corner__corner--br {
bottom: 0;
right: 0;
}
.fixed-at-corner__corner--bl {
bottom: 0;
left: 0;
}
```
<Playground>
```css placeholders.css hidden
.triangle {
border-style: solid;
height: 0;
width: 0;
}
.triangle--t {
border-color: transparent transparent #d1d5db transparent;
border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size);
}
.triangle--r {
border-color: transparent transparent transparent #d1d5db;
border-width: var(--triangle-size) 0 var(--triangle-size) 1rem;
}
.triangle--b {
border-color: #d1d5db transparent transparent transparent;
border-width: var(--triangle-size) var(--triangle-size) 0 var(--triangle-size);
}
.triangle--l {
border-color: transparent #d1d5db transparent transparent;
border-width: var(--triangle-size) 1rem var(--triangle-size) 0;
}
.triangle--tr {
border-color: transparent #d1d5db transparent transparent;
border-width: 0 var(--triangle-size) var(--triangle-size) 0;
}
.triangle--br {
border-color: transparent transparent #d1d5db transparent;
border-width: 0 0 var(--triangle-size) var(--triangle-size);
}
.triangle--bl {
border-color: transparent transparent transparent #d1d5db;
border-width: var(--triangle-size) 0 0 var(--triangle-size);
}
.triangle--tl {
border-color: #d1d5db transparent transparent transparent;
border-width: var(--triangle-size) var(--triangle-size) 0 0;
}
.triangle--sm {
--triangle-size: 0.5rem;
}
.triangle--md {
--triangle-size: 2rem;
}
.triangle--lg {
--triangle-size: 4rem;
}
```
```css styles.css hidden
body {
height: 24rem;
}
.fixed-at-corner {
width: 100%;
height: 100%;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
position: relative;
}
.fixed-at-corner__corner {
position: absolute;
}
.fixed-at-corner__corner--tl {
left: 0;
top: 0;
}
.fixed-at-corner__corner--tr {
top: 0;
right: 0;
}
.fixed-at-corner__corner--br {
bottom: 0;
right: 0;
}
.fixed-at-corner__corner--bl {
bottom: 0;
left: 0;
}
```
```html index.html hidden
<div class="fixed-at-corner">
<div class="fixed-at-corner__corner fixed-at-corner__corner--tl">
<div class="triangle triangle--tl triangle--md"></div>
</div>
<div class="fixed-at-corner__corner fixed-at-corner__corner--tr">
<div class="triangle triangle--tr triangle--md"></div>
</div>
<div class="fixed-at-corner__corner fixed-at-corner__corner--br">
<div class="triangle triangle--br triangle--md"></div>
</div>
<div class="fixed-at-corner__corner fixed-at-corner__corner--bl">
<div class="triangle triangle--bl triangle--md"></div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/fixed-at-side.mdx
================================================
---
category: Display
created: '2019-12-21'
description: Fix an element at the middle of side with CSS
keywords: css fixed
thumbnail: /assets/css-layout/thumbnails/fixed-at-side.png
title: Fixed at side
---
## HTML
```html index.html
<!-- Fixed at the middle of left side -->
<div class="fixed-at-side fixed-at-side--l">...</div>
<!-- Fixed at the middle of right side -->
<div class="fixed-at-side fixed-at-side--r">...</div>
```
## CSS
```css styles.css
.fixed-at-side {
position: fixed;
top: 50%;
transform: translate(0px, -50%);
}
.fixed-at-side--l {
left: 0;
}
.fixed-at-side--r {
right: 0;
}
```
<Playground>
```css placeholders.css hidden
.rectangle {
background: #d1d5db;
border-radius: 0.25rem;
height: var(--rectangle-height);
width: var(--rectangle-width);
}
.rectangle--hor.rectangle--20 {
--rectangle-width: 20%;
}
.rectangle--hor.rectangle--40 {
--rectangle-width: 40%;
}
.rectangle--hor.rectangle--60 {
--rectangle-width: 60%;
}
.rectangle--hor.rectangle--80 {
--rectangle-width: 80%;
}
.rectangle--hor.rectangle--100 {
--rectangle-width: 100%;
}
.rectangle--hor.rectangle--sm {
--rectangle-height: 0.5rem;
}
.rectangle--hor.rectangle--md {
--rectangle-height: 2rem;
}
.rectangle--hor.rectangle--lg {
--rectangle-height: 4rem;
}
.rectangle--ver.rectangle--20 {
--rectangle-height: 20%;
}
.rectangle--ver.rectangle--40 {
--rectangle-height: 40%;
}
.rectangle--ver.rectangle--60 {
--rectangle-height: 60%;
}
.rectangle--ver.rectangle--80 {
--rectangle-height: 80%;
}
.rectangle--ver.rectangle--100 {
--rectangle-height: 100%;
}
.rectangle--ver.rectangle--sm {
--rectangle-width: 0.5rem;
}
.rectangle--ver.rectangle--md {
--rectangle-width: 2rem;
}
.rectangle--ver.rectangle--lg {
--rectangle-width: 4rem;
}
```
```css styles.css hidden
body {
height: 24rem;
}
.fixed-at-side {
width: 100%;
height: 100%;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
position: relative;
}
.fixed-at-side__side {
height: 40%;
position: absolute;
top: 50%;
transform: translate(0px, -50%);
}
.fixed-at-side__side--l {
left: 0;
}
.fixed-at-side__side--r {
right: 0;
}
```
```html index.html hidden
<div class="fixed-at-side">
<div class="fixed-at-side__side fixed-at-side__side--r"><div class="rectangle rectangle--ver rectangle--md rectangle--100"></div></div>
<div class="fixed-at-side__side fixed-at-side__side--l"><div class="rectangle rectangle--ver rectangle--md rectangle--100"></div></div>
</div>
```
</Playground>
## See also
- [Carousel slider](https://phuoc.ng/collection/css-layout/carousel-slider/)
================================================
FILE: contents/flipping-number.mdx
================================================
---
category: Display
created: '2023-09-07'
description: Create a flipping number in CSS
keywords: css flipping number, css flipping clock, css flipping counter
openGraphCover: /og/css-layout/flipping-number.png
thumbnail: /assets/css-layout/thumbnails/flipping-number.png
title: Flipping number
---
Flipping number layout is a popular display format used in digital clocks, countdown timers, and scoreboards. It uses multiple panels to show each digit of a number, and each panel can flip over to reveal the next number, giving the impression of an analog clock face.
In web design, flip numbers are a great way to create unique and eye-catching interfaces. They're perfect for displaying all kinds of information, such as scores, prices, or countdowns.
In this post, we'll learn how to create a flipping number using CSS. Get ready to impress your users with a stunning display!
## Markup
First things first, let's prepare the layout for our flipping number. It's a simple layout that involves two elements. The container element creates the top and bottom flipping effects, while the inner element is used to display the number.
```html
<div class="flip">
<div class="flip__number">42</div>
</div>
```
## Adding effects
Instead of creating separate elements for the top and bottom backgrounds, we can simplify things by using pseudo-elements. The `::before` element can handle the top background, while the `::after` element can generate the bottom background.
To make this work, we need to position the pseudo-element absolutely within the container. We can do this by using the `position` property with different values:
```css
.flip {
overflow: hidden;
}
.flip::before {
content: '';
position: absolute;
}
```
It's important to remember that the pseudo-element won't be visible without the `content` property. In our case, the `::before` element doesn't have any content, so we can simply set the `content` property to empty.
Now, let's focus on the `::before` element, which will cover the first half of the container. We can use a combination of `top`, `left`, `height`, and `width` properties to indicate its position and dimensions:
```css
.flip::before {
top: 0;
left: 0;
height: 50%;
width: 100%;
}
```
Lastly, let's create a gradient for the top half using the `linear-gradient` function. This will allow us to set the `background` property in the following way:
```css
.flip::before {
background: linear-gradient(to right bottom, rgb(71 85 105), rgb(15 23 42));
}
```
In the code above, we're passing several parameters to the `linear-gradient` function. The first parameter, `to right bottom`, sets the direction of the gradient. In this case, it means the gradient will start at the top left and end at the bottom right.
The second and third parameters are colors that determine the start and end points of the gradient. The first color, `rgb(71 85 105)`, is a darker shade representing the starting point. The second color, `rgb(15 23 42)`, is an even darker shade representing the ending point.
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css hidden
.flip {
display: inline-flex;
padding: 1rem;
position: relative;
border-radius: 0.5rem;
overflow: hidden;
}
.flip::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background: linear-gradient(to right bottom, rgb(71 85 105), rgb(15 23 42));
}
.flip__number {
color: #fff;
font-size: 4rem;
font-weight: 600;
z-index: 1;
}
```
```html index.html hidden
<div class="flip">
<div class="flip__number">42</div>
</div>
```
</Playground>
We can use the same steps for the bottom half, with only one difference: the position and background color. Since the bottom half is positioned at the bottom, it will reset the `bottom` and `left` properties to zero.
Here's how the bottom half can be created using the `::after` pseudo-element.
```css
.flip::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 100%;
background: linear-gradient(to right bottom, rgb(100 116 139), rgb(15 23 42));
}
```
Finally, to ensure that content is displayed on top of pseudo-elements, we need to set the `z-index` property.
```css
.flip__number {
z-index: 1;
}
```
Check out the result below.
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css hidden
.flip {
display: inline-flex;
padding: 1rem;
position: relative;
border-radius: 0.5rem;
overflow: hidden;
}
.flip::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background: linear-gradient(to right bottom, rgb(71 85 105), rgb(15 23 42));
}
.flip::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 100%;
background: linear-gradient(to right bottom, rgb(100 116 139), rgb(15 23 42));
}
.flip__number {
color: #fff;
font-size: 4rem;
font-weight: 600;
z-index: 1;
}
```
```html index.html hidden
<div class="flip">
<div class="flip__number">42</div>
</div>
```
</Playground>
## Adding a divider
To enhance the layout's visual appeal, we can insert a thin divider between the top and bottom halves. We can achieve this by adding a border at the bottom of the first half.
```css
.flip::before {
border-bottom: 1px solid rgb(148 163 184);
}
```
As the border will occupy space, we need to slightly push up the first half to ensure both halves have the same height. We can use a negative value with the `translateY()` function to accomplish this.
```css
.flip::before {
transform: translateY(-1px);
}
```
It's important to note that the value passed must match the border's thickness. Therefore, it's better to use a CSS variable to represent the number. This way, the code will still work even if you increase the border's thickness. Plus, it'll be easier for other engineers on your team to understand, making the code easier to maintain.
```css
:root {
--divider-height: 1px;
}
.flip::before {
border-bottom: var(--divider-height) solid rgb(148 163 184);
transform: translateY(calc(-1 * var(--divider-height)));
}
```
Let's take a look at the final result we've achieved so far.
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css
:root {
--divider-height: 1px;
}
.flip {
display: inline-flex;
padding: 1rem;
position: relative;
border-radius: 0.5rem;
overflow: hidden;
}
.flip::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background: linear-gradient(to right bottom, rgb(71 85 105), rgb(15 23 42));
border-bottom: var(--divider-height) solid rgb(148 163 184);
transform: translateY(calc(-1 * var(--divider-height)));
}
.flip::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 100%;
background: linear-gradient(to right bottom, rgb(100 116 139), rgb(15 23 42));
}
.flip__number {
color: #fff;
font-size: 4rem;
font-weight: 600;
z-index: 1;
}
```
```html index.html
<div class="flip">
<div class="flip__number">42</div>
</div>
```
</Playground>
================================================
FILE: contents/floating-label.mdx
================================================
---
category: Input
created: '2019-11-28'
description: Create a floating label with CSS
keywords: css floating label, placeholder shown
thumbnail: /assets/css-layout/thumbnails/floating-label.png
title: Floating label
---
## HTML
```html index.html
<div class="floating-label">
<!-- The input -->
<input placeholder="Placeholder" class="floating-label__input" />
<!-- The label -->
<label class="floating-label__label">Placeholder</label>
</div>
```
## CSS
```css styles.css
.floating-label {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
position: relative;
}
.floating-label__input {
border: none;
padding: 0.5rem;
height: 100%;
}
/*
Show the label at desired position when the
placeholder of input isn't shown
*/
.floating-label__input:not(:placeholder-shown) + .floating-label__label {
background: #fff;
transform: translate(0, -200%);
opacity: 1;
}
.floating-label__label {
/* Position the label */
left: 1rem;
position: absolute;
top: 100%;
/* Hide it by default */
opacity: 0;
transition: all 200ms;
padding: 0 0.5rem;
}
```
Type something in the input to see how the label is shown up.
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.floating-label {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
position: relative;
/* Demo */
padding: 0px 1px;
height: 2.5rem;
}
.floating-label__input {
border: none;
padding: 0.5rem;
height: 100%;
}
/*
Show the label at desired position when the
placeholder of input isn't shown
*/
.floating-label__input:not(:placeholder-shown) + .floating-label__label {
background: #fff;
transform: translate(0, -200%);
opacity: 1;
}
.floating-label__label {
/* Position the label */
left: 1rem;
position: absolute;
top: 100%;
/* Hide it by default */
opacity: 0;
transition: all 200ms;
padding: 0 0.5rem;
}
```
```html index.html hidden
<div class="floating-label">
<input placeholder="Placeholder" class="floating-label__input" />
<label class="floating-label__label">Placeholder</label>
</div>
```
</Playground>
## See also
- Explore some ways to [animate a floating label](https://phuoc.ng/collection/css-animation/floating-label/).
================================================
FILE: contents/folded-corner.mdx
================================================
---
category: Display
created: '2023-09-06'
description: Create a folded corner in CSS
keywords: css folded corner
openGraphCover: /og/css-layout/folded-corner.png
thumbnail: /assets/css-layout/thumbnails/folded-corner.png
title: Folded corner
---
The folded corner layout is a popular design element in web design that adds creativity and uniqueness to a website. It creates the illusion of a folded corner on a webpage, giving it a tangible feel.
Using this technique can help highlight important information or sections on a page, making it easier for users to navigate a content-heavy website. It can also be used simply for aesthetic purposes, adding an interesting visual element to the page.
In this post, we will explore various ways to create a folded corner effect. So, get ready to learn some cool techniques!
## Markup
To begin, let's create the markup for our layout. It's as simple as adding an HTML element.
```html
<div class="box"></div>
```
## Using multiple backgrounds
Let's take a moment to imagine an element with a folded corner. This element is made up of two layers: a rectangle with a curved corner and a triangle placed on top of it.
To create the first layer, we can use the `linear-gradient` function to define the background of the element.
```css
background: linear-gradient(-135deg, transparent 1.7677rem, rgb(226 232 240) 0)
```
If you're not familiar with the `linear-gradient` function or the number `1.7677rem` in the sample code, don't worry. Here's what's going on:
- The `linear-gradient` function creates a gradient background for an element. The `-135deg` specifies the direction of the gradient, which in this case is from the top-right corner to the bottom-left corner.
- The first color stop in the gradient is `transparent`, which means there's no color at that point. The second color stop is `rgb(226 232 240)`, which is an RGB color value for that point in the gradient.
- The `1.7677rem` and `0` values determine where these colors are positioned within the gradient. `transparent` will be visible for the first `1.7677rem` of the gradient, followed by `rgb(226 232 240)` for the rest.
Wondering how we calculated the `1.7677rem` value? It's actually pretty simple. Just imagine that the folded corner is a square with sides of 2.5rem. But because we rotate the first stop by 135 degrees, the side of the square becomes the diagonal.
Now, a square whose diagonal is 2.5rem has a size of `2.5rem / Math.sqrt(2)`, which is `1.7677rem`. Easy, right?
Let's take a look at how it creates a curved corner:
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css
.box {
height: 12rem;
width: 16rem;
background: linear-gradient(-135deg, transparent 1.7677rem, rgb(226 232 240) 0);
}
```
```html index.html
<div class="box"></div>
```
</Playground>
### Creating the triangle
There are several ways to create a triangle, such as using different border colors. However, in this section, we will stick to using the `linear-gradient` function.
```css
.triangle {
background: linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0);
}
```
In this example, we use the `to left bottom` value to specify the direction of the gradient. It starts from the top-right corner and goes to the bottom-left corner.
The first color stop is `transparent`, which means that there is no color at that point. The second color stop is `rgb(100 116 139)`, which specifies an RGB color value for that point in the gradient.
To create a diagonal line across the box from the top-right to the bottom-left corner, we start with transparency at 50% of this line and then transition into our dark color for the remaining area.
Let's take a look at how it generates a triangle shape:
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css
.triangle {
height: 2.5rem;
width: 2.5rem;
background: linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0);
}
```
```html index.html
<div class="triangle"></div>
```
</Playground>
Next, let's move the triangle to the top-right corner of the box element. To do this, we can simply adjust the position of the background.
```css
.box {
background: linear-gradient(...) no-repeat 100% 0 / 2.5rem 2.5rem;
}
```
Let's break down the declaration into its individual parts:
- `no-repeat` is a keyword that tells the background image not to repeat.
- `100% 0` sets the position of the background image to the top-right corner of the element.
- `/ 2.5rem 2.5rem` specifies the size of the background image. The first value represents the width, and the second value represents the height. In this case, both values are set to `2.5rem`, which matches the size of our folded corner square.
Check out the box element with a triangle attached to the top-right corner. I added a simple dashed border so you can see the bounding of the box.
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css
.box {
height: 12rem;
width: 16rem;
border: 2px dashed rgb(226 232 240);
background: linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0) no-repeat 100% 0 / 2.5rem 2.5rem;
}
```
```html index.html
<div class="box"></div>
```
</Playground>
### Combining backgrounds
Now that you know how to use the linear gradient to create both layers, it's time to merge them and generate the folded corner.
CSS allows us to use multiple declarations for the `background` properties by separating them with commas. Keep in mind that the order of these declarations is important and can affect the final result.
```css
.box {
background:
linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0) no-repeat 100% 0 / 2.5rem 2.5rem,
linear-gradient(-135deg, transparent 1.7677rem, rgb(226 232 240) 0);
}
```
Without further ado, let's take a look at the final result of the steps we've taken so far:
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css
.box {
height: 12rem;
width: 16rem;
background:
linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0) no-repeat 100% 0 / 2.5rem 2.5rem,
linear-gradient(-135deg, transparent 1.7677rem, rgb(226 232 240) 0);
}
```
```html index.html
<div class="box"></div>
```
</Playground>
## Using a pseudo-element
In the previous section, we used a cool approach to generate a folded corner using multiple backgrounds in a single `div` element. However, this approach has some downsides. For example, it's not easy to add more styles to the triangle, like a shadow.
To add more customization to the triangle, we can use the `:after` pseudo-element to represent it. Here are some basic styles to position the triangle:
```css
.box {
position: relative;
}
.box::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 2.5rem;
height: 2.5rem;
}
```
The `position` property values of `absolute` and `relative` are applied to the box and the triangle, respectively. This ensures that the triangle is positioned absolutely within the box.
Although the triangle doesn't contain any information, we still need to set the content property to an empty `''` for it to appear. The `top` and `right` properties position the triangle in the top-right corner, while the `width` and `height` properties determine its size.
We're using a separate element to represent the triangle. This makes it easy to style it however you want. Want to add a box shadow? No problem!
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css
.box {
height: 12rem;
width: 16rem;
background: linear-gradient(-135deg, transparent 1.7677rem, rgb(226 232 240) 0);
position: relative;
}
.box::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 2.5rem;
height: 2.5rem;
background: linear-gradient(to left bottom, transparent 50%, rgb(100 116 139) 0) no-repeat 100% 0;
box-shadow: -0.4rem 0.4rem 0.4rem -0.2rem rgba(0 0 0 / 50);
}
```
```html index.html
<div class="box"></div>
```
</Playground>
================================================
FILE: contents/folder-structure.mdx
================================================
---
category: Display
created: '2021-04-03'
description: Create a folder structure with CSS
keywords: css folder structure, css folder tree
thumbnail: /assets/css-layout/thumbnails/folder-structure.png
title: Folder structure
---
## HTML
```html index.html
<div class="folder-structure">
<ul>
<li>
<!-- Content -->
...
<!-- Sub items -->
<ul>
<li>
<!-- Content -->
...
<!-- Sub items -->
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</li>
<li>...</li>
...
</ul>
</li>
<!-- Repeat other items -->
...
</ul>
</div>
```
## CSS
```css styles.css
:root {
--folder-structure-item-height: 0.5rem;
--folder-structure-item-margin-left: 2.25rem;
--folder-structure-item-padding-top: 0.5rem;
}
.folder-structure ul {
/* Reset */
list-style-type: none;
margin: 0;
}
.folder-structure li {
padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
position: relative;
}
.folder-structure li::before {
border-left: 1px solid #d1d5db;
content: '';
/* Position */
left: 0;
position: absolute;
top: 0;
transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
/* Size */
height: 100%;
}
.folder-structure li::after {
border-bottom: 1px solid #d1d5db;
content: '';
/* Position */
left: 0;
position: absolute;
top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
transform: translate(-100%, 0);
/* Size */
width: var(--folder-structure-item-margin-left);
}
/* Remove the border from the last item */
.folder-structure li:last-child::before {
height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
}
```
<Playground>
```css placeholders.css hidden
.square {
background: #d1d5db;
height: var(--square-size);
width: var(--square-size);
}
.square--sm {
--square-size: 0.5rem;
}
.square--md {
--square-size: 2rem;
}
.square--lg {
--square-size: 4rem;
}
```
```css styles.css hidden
:root {
--folder-structure-item-height: 0.5rem;
--folder-structure-item-margin-left: 2.25rem;
--folder-structure-item-padding-top: 0.5rem;
}
body {
align-items: center;
display: flex;
justify-content: center;
}
.folder-structure ul {
/* Reset */
list-style-type: none;
margin: 0;
}
.folder-structure li {
padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
position: relative;
}
.folder-structure li::before {
border-left: 1px solid #d1d5db;
content: '';
/* Position */
left: 0;
position: absolute;
top: 0;
transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
/* Size */
height: 100%;
}
.folder-structure li::after {
border-bottom: 1px solid #d1d5db;
content: '';
/* Position */
left: 0;
position: absolute;
top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
transform: translate(-100%, 0);
/* Size */
width: var(--folder-structure-item-margin-left);
}
/* Remove the border from the last item */
.folder-structure li:last-child::before {
height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
}
```
```html index.html hidden
<div class="folder-structure">
<ul>
<li>
<div class="square square--sm"></div>
<ul>
<li>
<div class="square square--sm"></div>
</li>
</ul>
</li>
<li>
<div class="square square--sm"></div>
<ul>
<li>
<div class="square square--sm"></div>
<ul>
<li>
<div class="square square--sm"></div>
</li>
</ul>
</li>
<li>
<div class="square square--sm"></div>
</li>
</ul>
</li>
</ul>
</div>
```
</Playground>
================================================
FILE: contents/frame-corners.mdx
================================================
---
category: Display
created: '2023-09-06'
description: Create frame corners in CSS
keywords: css folded corner
openGraphCover: /og/css-layout/frame-corners.png
thumbnail: /assets/css-layout/thumbnails/frame-corners.png
title: Frame corners
---
The frame corner layout pattern is a popular and effective technique in web design. It uses corner elements to frame content on a web page, adding depth and structure. This technique is often used with images and shapes.
In this post, we'll teach you how to create frame corners with CSS. Are you ready to dive in and learn?
## Markup
The first step in preparing the layout is to structure it properly. This usually involves two elements: an inner element for displaying the content and an outer element that will display four frames at its corners.
Here's an example of what the layout could look like:
```html
<div class="box">
<div class="box__inner"></div>
</div>
```
## Adding overlays
Creating a frame at the corners is a simple idea. We can use CSS to add overlay elements around the content area and position them using absolute positioning.
Here's how to get started: define some CSS variables that can be reused later.
```css
:root {
--frame-border-size: 0.25rem;
--frame-height: 1rem;
--frame-width: 1rem;
}
```
The `--frame-border-size` variable controls the thickness of the frame, while `--frame-height` and `--frame-width` determine its dimensions. To create a single frame for the outer element, we can use a solid border and adjust the `padding` property to set the space between the border and the box content.
```css
.box {
border: var(--frame-border-size) solid rgb(30 41 59);
padding: var(--frame-height) var(--frame-width);
}
```
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css hidden
:root {
--frame-border-size: 0.25rem;
--frame-height: 1rem;
--frame-width: 1rem;
}
.box {
border: var(--frame-border-size) solid rgb(30 41 59);
padding: var(--frame-height) var(--frame-width);
height: 12rem;
width: 16rem;
}
.box__inner {
width: 100%;
height: 100%;
background: rgb(226 232 240);
}
```
```html index.html hidden
<div class="box">
<div class="box__inner"></div>
</div>
```
</Playground>
In order to hide the top and bottom borders of the box, there's a nifty trick we can use called the pseudo-element. Here's how it works:
We'll use the `::before` pseudo-element to create a vertical overlay that sits outside the box. To achieve this, we position the element absolutely within the box. We set the `position` property to both elements to make sure it stays in place.
```css
.box {
position: relative;
}
.box::before {
content: '';
position: absolute;
}
```
To create the overlay effect, we need to set the `left` and `right` properties to be the same as the frame's width, and the `top` and `bottom` properties to be the same the thickness of the frame border. By using negative numbers for these properties, we push the overlay to the outside of the box, causing the top and bottom borders to overlap.
```css
.box::before {
left: var(--frame-width);
right: var(--frame-width);
top: calc(-1 * var(--frame-border-size));
bottom: calc(-1 * var(--frame-border-size));
}
```
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css hidden
:root {
--frame-border-size: 0.25rem;
--frame-height: 1rem;
--frame-width: 1rem;
}
.box {
border: var(--frame-border-size) solid rgb(30 41 59);
padding: var(--frame-height) var(--frame-width);
height: 12rem;
width: 16rem;
position: relative;
}
.box::before {
content: '';
position: absolute;
left: var(--frame-width);
right: var(--frame-width);
top: calc(-1 * var(--frame-border-size));
bottom: calc(-1 * var(--frame-border-size));
background: rgb(226 232 240);
}
```
```html index.html hidden
<div class="box">
<div class="box__inner"></div>
</div>
```
</Playground>
Finally, to create the blank areas at the top and bottom, we make the top and bottom borders the same height as the frame. And voila! The top and bottom borders are hidden, and our box looks sleek and polished.
```css
.box::before {
border-top: var(--frame-height) solid #fff;
border-bottom: var(--frame-height) solid #fff;
}
```
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css hidden
:root {
--frame-border-size: 0.25rem;
--frame-height: 1rem;
--frame-width: 1rem;
}
.box {
border: var(--frame-border-size) solid rgb(30 41 59);
padding: var(--frame-height) var(--frame-width);
height: 12rem;
width: 16rem;
position: relative;
}
.box::before {
content: '';
position: absolute;
left: var(--frame-width);
right: var(--frame-width);
top: calc(-1 * var(--frame-border-size));
bottom: calc(-1 * var(--frame-border-size));
background: rgb(226 232 240);
border-top: var(--frame-height) solid #fff;
border-bottom: var(--frame-height) solid #fff;
}
```
```html index.html hidden
<div class="box">
<div class="box__inner"></div>
</div>
```
</Playground>
We can use the same approach and create the horizontal overlay element with the `::after` pesudo-element. Now, let's check out the final result of the steps we've followed together so far.
<Playground>
```css demo.css hidden
body {
display: flex;
align-items: center;
justify-content: center;
}
```
```css styles.css
:root {
--frame-border-size: 0.25rem;
--frame-height: 1rem;
--frame-width: 1rem;
}
.box {
border: var(--frame-border-size) solid rgb(30 41 59);
padding: var(--frame-height) var(--frame-width);
height: 12rem;
width: 16rem;
position: relative;
}
.box__inner {
height: 100%;
width: 100%;
background: rgb(226 232 240);
}
.box::before {
content: '';
position: absolute;
left: var(--frame-width);
right: var(--frame-width);
top: calc(-1 * var(--frame-border-size));
bottom: calc(-1 * var(--frame-border-size));
border-top: var(--frame-height) solid #fff;
border-bottom: var(--frame-height) solid #fff;
}
.box::after {
content: '';
position: absolute;
top: var(--frame-height);
bottom: var(--frame-height);
left: calc(-1 * var(--frame-border-size));
right: calc(-1 * var(--frame-border-size));
border-left: var(--frame-width) solid #fff;
border-right: var(--frame-width) solid #fff;
}
```
```html index.html
<div class="box">
<div class="box__inner"></div>
</div>
```
</Playground>
================================================
FILE: contents/full-background.mdx
================================================
---
category: Display
created: '2020-01-18'
description: Create a full background element with CSS
keywords: css background size cover, css full background
thumbnail: /assets/css-layout/thumbnails/full-background.png
title: Full background
---
## HTML
```html index.html
<div class="full-background">...</div>
```
## CSS
```css styles.css
.full-background {
/* Center the content */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
/* Take full size */
height: 100vh;
width: 100%;
/* Background */
background: url('/path/to/background.jpeg') center center / cover no-repeat;
}
```
<Playground>
```css placeholders.css hidden
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
```
```css styles.css hidden
body {
height: 24rem;
}
.full-background {
/* Center the content */
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
/* Take full size */
height: 100%;
width: 100%;
background: url('/assets/css-layout/full-background.jpeg') center center / cover no-repeat;
}
```
```html index.html hidden
<div class="full-background">
<div class="lines">
<div class="line line--20"></div>
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
```
</Playground>
================================================
FILE: contents/full-screen-menu.mdx
================================================
---
category: Navigation
created: '2019-11-30'
description: Create a full screen menu with CSS flexbox
keywords: css fixed, css flexbox, css menu
thumbnail: /assets/css-layout/thumbnails/full-screen-menu.png
title: Full screen menu
---
## HTML
```html index.html
<div class="full-screen-menu">
<!-- The navigation menu -->
<ul>
...
</ul>
<!-- The close button -->
<button type="button" class="full-screen-menu__close"></button>
</div>
```
## CSS
```css styles.css
.full-screen-menu {
/* Full screen overlay */
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.full-screen-menu__close {
/* Shown at top left corner */
left: 1rem;
position: absolute;
top: 1rem;
}
```
You can use the [close button](https://phuoc.ng/collection/css-layout/close-button/) to create a button for closing the menu.
<Playground>
```css placeholders.css hidden
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
```
```css styles.css hidden
body {
height: 24rem;
}
.full-screen-menu {
/* Take full size */
height: 100%;
width: 100%;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
position: relative;
background: #374151;
}
.full-screen-menu__close {
left: 0.5rem;
position: absolute;
top: 0.5rem;
/* Reset */
background-color: transparent;
border-color: transparent;
/* Cursor */
cursor: pointer;
/* Size */
height: 1rem;
width: 1rem;
}
.full-screen-menu__close::before,
.full-screen-menu__close::after {
content: '';
/* Background color */
background-color: #d1d5db;
/* Position */
position: absolute;
/* Size */
height: 1px;
width: 100%;
}
.full-screen-menu__close::before {
/* Position */
left: 0px;
top: 50%;
transform: translate(0%, -50%) rotate(45deg);
/* Size */
height: 1px;
width: 100%;
}
.full-screen-menu__close::after {
/* Position */
left: 50%;
top: 0px;
transform: translate(-50%, 0%) rotate(45deg);
/* Size */
height: 100%;
width: 1px;
}
```
```html index.html hidden
<div class="full-screen-menu">
<div class="lines">
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--100"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
<button type="button" class="full-screen-menu__close"></button>
</div>
```
</Playground>
================================================
FILE: contents/grid-lines-background.mdx
================================================
---
category: Display
created: '2023-08-30'
description: Create a grid lines background in CSS
keywords: grid lines background, linear gradient, radial gradient
openGraphCover: /og/css-layout/grid-lines-background.png
thumbnail: /assets/css-layout/thumbnails/grid-lines-background.png
title: Grid lines background
updated: '2023-11-22'
---
Adding a grid lines background in CSS is an awesome way to give your website some visual interest and structure. This post will show you two simple ways to achieve this.
## Using background image
To create a grid pattern using CSS, you can use the `background-image` property. Start by creating a square image with two lines – one horizontal and one vertical – that intersect at the center of the square.
The image can be in either SVG or PNG format. Here's an example of a square image in SVG format:
<Playground>
```html index.html
<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'>
<rect width='40' height='40' fill='#fff'></rect>
<rect x='50%' width='1' height='100%' fill='rgb(203 213 225)'></rect>
<rect y='50%' width='100%' height='1' fill='rgb(203 213 225)'></rect>
</svg>
```
</Playground>
The SVG consists of three rectangles. The first rectangle forms a white square with a size of 40 pixels. The second rectangle is 1 pixel wide and spans the full height to create a vertical line. The `x='50%'` attribute centers the line vertically.
Likewise, the last rectangle is 1 pixel high and spans the full width to create a horizontal line. It's worth noting that the last two rectangles are filled with identical colors.
Next, let's specify the `background-image` property for the element where you want the grid to show up. Simply use the `url()` function to link to your grid image file.
```css
.grid {
background-image: url('/path/to/grid.svg');
}
```
If you want the browser to avoid sending additional request to load the background image, then you can embed it like this:
```css
.grid {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='rgb(203 213 225)' /%3E%3Crect y='50%' width='100%' height='1' fill='rgb(203 213 225)' /%3E%3C/svg%3E%0A");
}
```
Voila! You now have a grid made up of horizontal and vertical lines that repeat seamlessly.
<Playground>
```css styles.css
.grid {
height: 16rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='rgb(203 213 225)' /%3E%3Crect y='50%' width='100%' height='1' fill='rgb(203 213 225)' /%3E%3C/svg%3E%0A");
}
```
```html index.html
<div class="grid"></div>
```
</Playground>
By default, an image will repeat both vertically and horizontally, with each repetition being the same size as the background, which is 40 pixels in this case.
But what if you want to change the size of the repeated image? No problem! You can use the `background-size` property to customize the dimensions. For example, if you set it to 20 pixels, you'll create smaller squares instead. Here's the code you need to make it happen.
```css
.grid {
background-size: 20px;
}
```
## Using linear gradients
Another way to create grid lines in CSS is with the `linear-gradient()` function.
To make a grid, first, select the element(s) you want to add a grid background to and set the `background-image` property. Then, use the `linear-gradient()` function to specify two colors that are similar or identical, separated by a transparent section of the same width as your desired line thickness.
```css
.grid {
background-image: linear-gradient(to right, gray 1px, transparent 1px);
}
```
The code above creates gray vertical lines that are one pixel thick. You can adjust the line thickness by changing the value of `1px` in both parts of the gradient (i.e., `gray 2px`, `transparent 2px`, for two-pixel-thick lines).
To make horizontal lines, change `to right` to `to bottom`. If you want both horizontal and vertical lines, simply combine both gradients.
```css
.grid {
background-image:
linear-gradient(to right, gray 1px, transparent 1px),
linear-gradient(to bottom, gray 1px, transparent 1px);
}
```
Finally, don't forget to set the size of the squares using the `background-size` property.
To adjust the color and spacing of lines, simply change the value of `gray` to any other valid CSS color value, as shown in the example below.
<Playground>
```css styles.css
.grid {
height: 16rem;
background-image:
linear-gradient(to right, rgb(203 213 225) 1px, transparent 1px),
linear-gradient(to bottom, rgb(203 213 225) 1px, transparent 1px);
background-size: 2.5rem 2.5rem;
background-position: center center;
}
```
```html index.html
<div class="grid"></div>
```
</Playground>
## Grid dot background
We can use a similar approach to create a grid with a dot background, but this time we'll use the `radial-gradient` function to make circles with a radius of 2 pixels. Don't hesitate to adjust the background color and radius to suit your needs.
<Playground>
```css styles.css
.grid {
height: 16rem;
background-image: radial-gradient(circle, rgb(203 213 225) 2px, #fff 2px);
background-size: 2.5rem 2.5rem;
background-position: center center;
}
```
```html index.html
<div class="grid"></div>
```
</Playground>
## See also
- [Snap a draggable element to a grid](https://phuoc.ng/collection/react-drag-drop/snap-a-draggable-element-to-a-grid/)
================================================
FILE: contents/grid-without-double-borders.mdx
================================================
---
category: Layout
created: '2023-08-27'
description: How to create a CSS grid without double borders
keywords: css grid
openGraphCover: /og/css-layout/grid-without-double-borders.png
thumbnail: /assets/css-layout/thumbnails/grid-without-double-borders.png
title: Grid without double borders
---
CSS grids are an amazing tool for creating complex web page layouts. However, working with default styling can be a bit tricky, especially when it comes to borders. In this post, we'll show you how to create a CSS grid without double borders.
First, let's create the grid itself. To do this, we'll use the `display: grid` property.
```css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 4rem);
}
```
In this example, we've made a 3x3 grid with three columns and three rows. Each row is 4rem tall, and each column takes up an equal fraction of the available space. This means that no matter what size screen you're using, the columns will be evenly spaced.
Now that we've got the grid set up, we want to add borders to each cell. But here's the thing: CSS grids will automatically add double borders to adjacent cells. We'll be exploring some solutions to this issue in the next sections.
## Collapsing the borders
The grid looks a lot like a table, and as with tables, we face the same issue. But don't worry, there's a solution we can use: the `border-collapse` property. Let me show you an example.
```css
.grid {
border-collapse: collapse;
}
.grid__item {
border: 1px solid rgb(203 213 225);
}
```
In this example, we've set the `border-collapse` property to `collapse`. This should collapse adjacent borders into a single border, and we've also added a 1 pixel border to each cell using the `.grid__item` class. However, the approach doesn't work as expected. Unfortunately, the borders are still duplicated visually, as you can see below.
<Playground>
```css demo.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
height: 16rem;
}
```
```css styles.css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 4rem);
border-collapse: collapse;
width: 12rem;
}
.grid__item {
border: 1px solid rgb(203 213 225);
}
```
```html index.html
<div class="grid">
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>
```
</Playground>
## Pairing the borders
There's an easier way to apply borders to your cells. Instead of setting the border for all four sides, we can apply it to just two. This approach is more natural and straightforward.
```css
:root {
--grid-border: 1px solid rgb(203 213 225);
}
.grid__item {
border-right: var(--grid-border);
border-bottom: var(--grid-border);
}
```
The grid will fill in the missing borders at the top and left sides.
```css
.grid {
border-top: var(--grid-border);
border-left: var(--grid-border);
}
```
And there you have it! Check it out, it works just as we expected!
> Did you notice in the sample code above, how I created a CSS variable to define the border? By using the variable in different places, we can avoid duplicating code everywhere. This is what we call **Don't Repeat Yourself** or **DRY**, and it's always a great practice to follow.
<Playground>
```css demo.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
height: 16rem;
}
```
```css styles.css
:root {
--grid-border: 1px solid rgb(203 213 225);
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 4rem);
border-top: var(--grid-border);
border-left: var(--grid-border);
width: 12rem;
}
.grid__item {
border-right: var(--grid-border);
border-bottom: var(--grid-border);
}
```
```html index.html
<div class="grid">
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>
```
</Playground>
## Using the outline property
Another solution for styling elements is to use the CSS `outline` property. The outline creates a visual effect similar to a border, but it doesn't take up space on the target element.
```css
.grid__item {
outline: 1px solid rgb(203 213 225);
}
```
Although it's a step in the right direction, using the `outline` property alone doesn't completely solve the issue of double borders. We're still missing a small piece of the puzzle.
But don't worry, because CSS grid has a trick up its sleeve. The `grid-gap` property is here to save the day! This handy property creates space between rows and columns in a CSS grid layout. By specifying the size of the gap between each row and column, we gain more control over the spacing of elements within the grid.
```css
.grid {
grid-gap: 1px;
}
```
We can solve the issue by creating a grid with a 1px gap between each row and column, just like the outline. Here's a visual representation of how it works.
<Playground>
```css demo.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
height: 16rem;
}
```
```css styles.css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 4rem);
grid-gap: 1px;
width: 12rem;
}
.grid__item {
outline: 1px solid rgb(203 213 225);
}
```
```html index.html
<div class="grid">
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>
```
</Playground>
================================================
FILE: contents/holy-grail.mdx
================================================
---
category: Layout
created: '2019-11-16'
description: Create a holy grail layout with CSS flexbox
keywords: css flexbox, css holy grail layout, css layout
thumbnail: /assets/css-layout/thumbnails/holy-grail.png
title: Holy grail
---
## HTML
```html index.html
<div class="holy-grail">
<header>...</header>
<main class="holy-grail__main">
<!-- Left sidebar -->
<aside class="holy-grail__left">...</aside>
<!-- Main content -->
<article class="holy-grail__middle">...</article>
<!-- Right sidebar -->
<nav class="holy-grail__right">...</nav>
</main>
<footer>...</footer>
</div>
```
## CSS
```css styles.css
.holy-grail {
display: flex;
flex-direction: column;
}
.holy-grail__main {
/* Take the remaining height */
flex-grow: 1;
/* Layout the left sidebar, main content and right sidebar */
display: flex;
flex-direction: row;
}
.holy-grail__left {
width: 25%;
}
.holy-grail__middle {
/* Take the remaining width */
flex-grow: 1;
}
.holy-grail__right {
width: 20%;
}
```
<Playground>
```css placeholders.css hidden
.lines {
padding: 0.25rem 0;
width: 100%;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.line {
background: #d1d5db;
height: 1px;
margin-bottom: 0.25rem;
}
.line.line--20 {
width: 20%;
}
.line.line--40 {
width: 40%;
}
.line.line--60 {
width: 60%;
}
.line.line--80 {
width: 80%;
}
.line.line--100 {
width: 100%;
}
.rectangle {
background: #d1d5db;
border-radius: 0.25rem;
height: var(--rectangle-height);
width: var(--rectangle-width);
}
.rectangle--hor.rectangle--20 {
--rectangle-width: 20%;
}
.rectangle--hor.rectangle--40 {
--rectangle-width: 40%;
}
.rectangle--hor.rectangle--60 {
--rectangle-width: 60%;
}
.rectangle--hor.rectangle--80 {
--rectangle-width: 80%;
}
.rectangle--hor.rectangle--100 {
--rectangle-width: 100%;
}
.rectangle--hor.rectangle--sm {
--rectangle-height: 0.5rem;
}
.rectangle--hor.rectangle--md {
--rectangle-height: 2rem;
}
.rectangle--hor.rectangle--lg {
--rectangle-height: 4rem;
}
.rectangle--ver.rectangle--20 {
--rectangle-height: 20%;
}
.rectangle--ver.rectangle--40 {
--rectangle-height: 40%;
}
.rectangle--ver.rectangle--60 {
--rectangle-height: 60%;
}
.rectangle--ver.rectangle--80 {
--rectangle-height: 80%;
}
.rectangle--ver.rectangle--100 {
--rectangle-height: 100%;
}
.rectangle--ver.rectangle--sm {
--rectangle-width: 0.5rem;
}
.rectangle--ver.rectangle--md {
--rectangle-width: 2rem;
}
.rectangle--ver.rectangle--lg {
--rectangle-width: 4rem;
}
```
```css styles.css hidden
body {
height: 24rem;
}
.holy-grail {
display: flex;
flex-direction: column;
/* Demo */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
height: 100%;
width: 100%;
}
.holy-grail__header,
.holy-grail__footer {
padding: 0.25rem;
}
.holy-grail__main {
border-top: 1px solid #d1d5db;
border-bottom: 1px solid #d1d5db;
/* Take the remaining height */
flex-grow: 1;
/* Layout the left sidebar, main content and right sidebar */
display: flex;
flex-direction: row;
}
.holy-grail__left {
width: 25%;
}
.holy-grail__middle {
border-left: 1px solid #d1d5db;
border-right: 1px solid #d1d5db;
/* Take the remaining width */
flex-grow: 1;
}
.holy-grail__right {
width: 20%;
}
```
```html index.html hidden
<div class="holy-grail">
<div class="holy-grail__header"><div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div></div>
<div class="holy-grail__main">
<div class="holy-grail__left">
<div class="lines">
<div class="line line--20"></div>
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
<div class="holy-grail__middle">
<div class="lines">
<div class="line line--20"></div>
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
<div class="holy-grail__right">
<div class="lines">
<div class="line line--20"></div>
<div class="line line--80"></div>
<div class="line line--40"></div>
<div class="line line--60"></div>
<div class="line line--20"></div>
</div>
</div>
</div>
<div class="holy-grail__footer"><div class="rectangle rectangle--hor rectangle--sm rectangle--100"></div></div>
</div>
```
</Playground>
================================================
FILE: contents/indeterminate-progress-bar.mdx
================================================
---
category: Feedback
created: '2022-10-02'
description: Create an indeterminate progress bar with CSS
keywords: css indeterminate progress bar, css progress bar
thumbnail: /assets/css-layout/thumbnails/indeterminate-progress-bar.png
title: Indeterminate progress bar
---
## HTML
```html index.html
<div class="indeterminate-progress-bar">
<div class="indeterminate-progress-bar__progress"></div>
</div>
```
## CSS
```css styles.css
.indeterminate-progress-bar {
/* Color */
background-color: #d1d5db;
/* Rounded border */
border-radius: 9999px;
/* Size */
height: 0.5rem;
position: relative;
overflow: hidden;
}
.indeterminate-progress-bar__progress {
/* Color */
background-color: #3b82f6;
/* Rounded border */
border-radius: 9999px;
/* Absolute position */
position: absolute;
bottom: 0;
top: 0;
width: 50%;
/* Move the bar infinitely */
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: indeterminate-progress-bar;
}
@keyframes indeterminate-progress-bar {
from {
left: -50%;
}
to {
left: 100%;
}
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.indeterminate-progress-bar {
/* Color */
background-color: #d1d5db;
/* Rounded border */
border-radius: 9999px;
width: 16rem;
height: 0.5rem;
position: relative;
overflow: hidden;
}
.indeterminate-progress-bar__progress {
/* Color */
background-color: #3b82f6;
/* Rounded border */
border-radius: 9999px;
position: absolute;
bottom: 0;
top: 0;
width: 50%;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: indeterminate-progress-bar;
}
@keyframes indeterminate-progress-bar {
from {
left: -50%;
}
to {
left: 100%;
}
}
```
```html index.html hidden
<div class="indeterminate-progress-bar">
<div class="indeterminate-progress-bar__progress"></div>
</div>
```
</Playground>
## See also
- [Progress bar](https://phuoc.ng/collection/css-layout/progress-bar/)
- [Spinner](https://phuoc.ng/collection/css-layout/spinner/)
================================================
FILE: contents/initial-avatar.mdx
================================================
---
category: Display
created: '2019-12-04'
description: Create an initial avatar with CSS
keywords: css avatar
thumbnail: /assets/css-layout/thumbnails/initial-avatar.png
title: Initial avatar
---
## HTML
```html index.html
<div class="initial-avatar">...</div>
```
## CSS
```css styles.css
.initial-avatar {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Colors */
background-color: #d1d5db;
color: #fff;
/* Rounded border */
border-radius: 50%;
height: 3rem;
width: 3rem;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.initial-avatar {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Colors */
background-color: #d1d5db;
color: #fff;
/* Rounded border */
border-radius: 50%;
height: 3rem;
width: 3rem;
}
```
```html index.html hidden
<div class="initial-avatar">
PN
</div>
```
</Playground>
================================================
FILE: contents/input-addon.mdx
================================================
---
category: Input
created: '2019-11-16'
description: Create an input add-on with CSS flexbox
keywords: css flexbox, css input add-on
thumbnail: /assets/css-layout/thumbnails/input-addon.png
title: Input addon
---
## HTML
```html index.html
<!-- Add-on prepended -->
<div class="input-addon">
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended">...</div>
<!-- Input -->
<input type="text" class="input-addon__input" />
</div>
<!-- Add-on appended -->
<div class="input-addon">
<!-- Input -->
<input type="text" class="input-addon__input" />
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended">...</div>
</div>
<!-- Appended and prepended add-ons -->
<div class="input-addon">
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--prepended">...</div>
<!-- Input -->
<input type="text" class="input-addon__input" />
<!-- Add-on -->
<div class="input-addon__addon input-addon__addon--appended">...</div>
</div>
```
## CSS
```css styles.css
.input-addon {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
display: flex;
}
.input-addon__input {
border: none;
/* Take the remaining width */
flex: 1;
}
.input-addon__addon {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
}
.input-addon__addon--prepended {
border-right: 1px solid #d1d5db;
}
.input-addon__addon--appended {
border-left: 1px solid #d1d5db;
}
```
<Playground>
```css placeholders.css hidden
.circle {
background: #d1d5db;
border-radius: 9999px;
height: var(--circle-size);
width: var(--circle-size);
}
.circle--sm {
--circle-size: 0.5rem;
}
.circle--md {
--circle-size: 1.5rem;
}
.circle--lg {
--circle-size: 4rem;
}
```
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.input-addon {
border: 1px solid #d1d5db;
border-radius: 0.25rem;
display: flex;
/* Demo */
margin-bottom: 0.5rem;
width: 16rem;
}
.input-addon__input {
border: none;
/* Take the remaining width */
flex: 1;
/* Demo */
padding: 0.25rem;
margin: 0 0.25rem;
width: 5rem;
}
.input-addon__addon {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Demo */
padding: 0.25rem;
}
.input-addon__addon--prepended {
border-right: 1px solid #d1d5db;
}
.input-addon__addon--appended {
border-left: 1px solid #d1d5db;
}
```
```html index.html hidden
<div class="input-addon">
<div class="input-addon__addon input-addon__addon--prepended"><div class="circle circle--md"></div></div>
<input type="text" class="input-addon__input" />
</div>
<div class="input-addon">
<input type="text" class="input-addon__input" />
<div class="input-addon__addon input-addon__addon--appended"><div class="circle circle--md"></div></div>
</div>
```
</Playground>
================================================
FILE: contents/inverted-corners.mdx
================================================
---
category: Display
created: '2021-05-09'
description: Create inverted corners with CSS
keywords: css border radius, css inverted border radius, css inverted corners
thumbnail: /assets/css-layout/thumbnails/inverted-corners.png
title: Inverted corners
---
## HTML
```html index.html
<div class="inverted-corners">...</div>
```
## CSS
```css styles.css
:root {
--inverted-corners-background: #d1d5db;
--inverted-corners-size: 2rem;
}
.inverted-corners {
background-color: var(--inverted-corners-background);
/* Used to position the corner */
position: relative;
}
.inverted-corners::before {
content: '';
/* Absolute position */
bottom: calc(-2 * var(--inverted-corners-size));
left: 0;
position: absolute;
/* Size */
height: calc(2 * var(--inverted-corners-size));
width: var(--inverted-corners-size);
/* Border */
background-color: transparent;
border-top-left-radius: var(--inverted-corners-size);
box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
}
```
<Playground>
```css styles.css hidden
:root {
--inverted-corners-background: #d1d5db;
--inverted-corners-size: 2rem;
}
body {
height: 24rem;
}
.inverted-corners {
background-color: var(--inverted-corners-background);
/* Used to position the corner */
position: relative;
/* Demo */
height: 2rem;
width: 100%;
}
.inverted-corners::before {
content: '';
/* Absolute position */
bottom: calc(-2 * var(--inverted-corners-size));
left: 0;
position: absolute;
/* Size */
height: calc(2 * var(--inverted-corners-size));
width: var(--inverted-corners-size);
/* Border */
background-color: transparent;
border-top-left-radius: var(--inverted-corners-size);
box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
}
```
```html index.html hidden
<div class="inverted-corners">
</div>
```
</Playground>
================================================
FILE: contents/keyboard-shortcut.mdx
================================================
---
category: Display
created: '2019-12-16'
description: Create a keyboard shortcut with CSS
keywords: kbd tag, keyboard shortcut
thumbnail: /assets/css-layout/thumbnails/keyboard-shortcut.png
title: Keyboard shortcut
---
We use the native `kbd` tag to display the keyboard shortcut.
## HTML
```html index.html
<kbd class="keyboard-shortcut">...</kbd>
```
## CSS
```css styles.css
.keyboard-shortcut {
/* Background and color */
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
color: rgba(0, 0, 0, 0.7);
/* Bottom shadow */
box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
/* Spacing */
padding: 0.25rem 0.5rem;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.keyboard-shortcut {
/* Background and color */
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
color: rgba(0, 0, 0, 0.7);
/* Bottom shadow */
box-shadow: #d1d5db 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px;
/* Spacing */
padding: 0.25rem 0.5rem;
}
```
```html index.html hidden
<kbd class="keyboard-shortcut">⌘ + C</kbd>
```
</Playground>
================================================
FILE: contents/layered-card.mdx
================================================
---
category: Display
created: '2021-04-04'
description: Create a layered card with CSS
keywords: css layered card
thumbnail: /assets/css-layout/thumbnails/layered-card.png
title: Layered card
---
## HTML
```html index.html
<div class="layered-card">
<div class="layered-card__content"></div>
</div>
```
## CSS
```css styles.css
.layered-card {
position: relative;
/* Demo */
height: 6rem;
width: 6rem;
}
.layered-card::before {
background: #d1d5db;
content: '';
/* Position */
top: 0;
left: 0;
position: absolute;
transform: translate(1rem, 1rem);
/* Size */
height: 100%;
width: 100%;
/* Display under the main content */
z-index: 0;
}
.layered-card__content {
/* Position */
left: 0;
position: absolute;
top: 0;
/* Size */
height: 100%;
width: 100%;
z-index: 1;
background: #fff;
}
```
<Playground>
```css styles.css hidden
body {
align-items: center;
display: flex;
justify-content: center;
}
.layered-card {
position: relative;
/* Demo */
height: 6rem;
width: 6rem;
}
.layered-card::before {
background: #d1d5db;
content: '';
/* Position */
top: 0;
left: 0;
position: absolute;
transform: translate(1rem, 1rem);
/* Size */
height: 100%;
width: 100%;
/* Display under the main content */
z-index: 0;
}
.layered-card__content {
left: 0;
position: absolute;
top: 0;
/* Size */
height: 100%;
width: 100%;
z-index: 1;
border: 1px solid #d1d5db;
background: #fff;
}
```
```html index.html hidden
<div class="layered-card">
<div class="layered-card__content"></div>
</div>
```
</Playground>
================================================
FILE: contents/linear-gauge.mdx
================================================
---
category: Feedback
created: '2023-11-20'
description: Create a linear gauge
openGraphCover: /og/css-layout/linear-gauge.png
thumbnail: /assets/css-layout/thumbnails/linear-gauge.png
title: Linear gauge
---
A **linear gauge** is a handy tool for displaying numerical values within a specific range. It's like a bar with markings that represent the range of values and an indicator that points to the current value. Linear gauges are great for showing progress, performance, or other quantitative metrics quickly and easily. You can use them in dashboards, reports, or presentations to help people understand complex data at a glance. They're simple and intuitive, making them an effective way to communicate important information in a clear and concise manner.
For instance, think of a fitness app that tracks your daily step count. The app could display a linear gauge that shows your progress towards your daily goal, with markings indicating the range of steps from 0 to the goal amount. As you walk throughout the day, the indicator on the gauge would move in real-time to show how many steps you've taken so far. This visualization can motivate users to reach their step goal and monitor their progress over time. Linear gauges can also be used in other contexts, such as fundraising campaigns or sales targets, to track progress towards specific goals and keep stakeholders informed.
Linear gauges are also used in real-life situations, like in modern cars with fuel economy gauges. These gauges display how efficiently the vehicle is using fuel, with markings indicating different levels of fuel efficiency. The indicator moves up or down based on how efficiently the car is being driven at any given moment, providing drivers with real-time feedback on their driving habits.
These are just a few examples of how linear gauges can be used to communicate important information quickly and effectively. In this post, we'll learn how to create a linear gauge.
## Setting up the layout
Setting up a layout for a simple linear gauge can be done with just one element that represents the progress.
```html
<div class="gauge">
<div class="gauge__progress"></div>
</div>
```
In order to position the progress indicator inside the gauge, we need to use absolute positioning. First, we set the `position` property of the gauge container to `r
gitextract_eojep_s2/
├── .gitignore
├── LICENSE
├── README.md
└── contents/
├── accordion.mdx
├── arrow-buttons.mdx
├── avatar-list.mdx
├── avatar.mdx
├── badge.mdx
├── box-selector.mdx
├── breadcrumb.mdx
├── button-with-icon.mdx
├── calendar.mdx
├── card-layout.mdx
├── card.mdx
├── carousel-slider.mdx
├── center-align-one-and-left-align-the-other.mdx
├── centering.mdx
├── chip.mdx
├── circular-navigation.mdx
├── close-button.mdx
├── color-swatch.mdx
├── concave-corners.mdx
├── cookie-banner.mdx
├── corner-ribbon.mdx
├── curved-background.mdx
├── custom-checkbox-button.mdx
├── custom-radio-button.mdx
├── diagonal-section.mdx
├── docked-at-corner.mdx
├── dot-leader.mdx
├── dot-navigation.mdx
├── drawer.mdx
├── drop-area.mdx
├── drop-cap.mdx
├── dropdown.mdx
├── fading-long-section.mdx
├── feature-comparison.mdx
├── feature-list.mdx
├── fixed-at-corner.mdx
├── fixed-at-side.mdx
├── flipping-number.mdx
├── floating-label.mdx
├── folded-corner.mdx
├── folder-structure.mdx
├── frame-corners.mdx
├── full-background.mdx
├── full-screen-menu.mdx
├── grid-lines-background.mdx
├── grid-without-double-borders.mdx
├── holy-grail.mdx
├── indeterminate-progress-bar.mdx
├── initial-avatar.mdx
├── input-addon.mdx
├── inverted-corners.mdx
├── keyboard-shortcut.mdx
├── layered-card.mdx
├── linear-gauge.mdx
├── lined-paper.mdx
├── masonry-grid.mdx
├── media-object.mdx
├── mega-menu.mdx
├── menu.mdx
├── modal.mdx
├── nested-dropdowns.mdx
├── notification.mdx
├── overlay-play-button.mdx
├── pagination.mdx
├── pie-chart.mdx
├── popover-arrow.mdx
├── presence-indicator.mdx
├── previous-next-buttons.mdx
├── price-tag.mdx
├── pricing-table.mdx
├── progress-bar.mdx
├── property-list.mdx
├── questions-and-answers.mdx
├── radial-progress-bar.mdx
├── radio-button-group.mdx
├── radio-switch.mdx
├── rating.mdx
├── resizable-element.mdx
├── ribbon.mdx
├── same-height-columns.mdx
├── search-box.mdx
├── separator.mdx
├── sidebar.mdx
├── simple-grid.mdx
├── slider.mdx
├── speech-bubble.mdx
├── spin-button.mdx
├── spinner.mdx
├── split-navigation.mdx
├── split-screen.mdx
├── stacked-cards.mdx
├── stamp-border.mdx
├── statistic.mdx
├── status-light.mdx
├── stepper-input.mdx
├── sticky-footer.mdx
├── sticky-header.mdx
├── sticky-sections.mdx
├── sticky-table-column.mdx
├── sticky-table-headers.mdx
├── switch.mdx
├── tab.mdx
├── teardrop.mdx
├── three-dimensions-card.mdx
├── timeline.mdx
├── toggle-password-visibility.mdx
├── tooltip.mdx
├── tree-diagram.mdx
├── triangle-buttons.mdx
├── upload-button.mdx
├── validation-icon.mdx
├── video-background.mdx
├── voting.mdx
├── watermark.mdx
├── wizard.mdx
├── zebra-like-background.mdx
└── zigzag-timeline.mdx
Condensed preview — 120 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (464K chars).
[
{
"path": ".gitignore",
"chars": 9,
"preview": ".DS_Store"
},
{
"path": "LICENSE",
"chars": 1064,
"preview": "MIT License\n\nCopyright (c) 2019 phuocng\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof"
},
{
"path": "README.md",
"chars": 916,
"preview": "# CSS Layout\n\nAs a front-end engineer, I deal with a lot of layouts and components. While there are plenty of CSS framew"
},
{
"path": "contents/accordion.mdx",
"chars": 6773,
"preview": "---\ncategory: Display\ncreated: '2019-12-04'\ndescription: Create an accordion with CSS flexbox\nkeywords: css accordion, c"
},
{
"path": "contents/arrow-buttons.mdx",
"chars": 3673,
"preview": "---\ncategory: Display\ncreated: '2020-01-21'\ndescription: Create arrow buttons with CSS\nkeywords: css arrow buttons\nthumb"
},
{
"path": "contents/avatar-list.mdx",
"chars": 1842,
"preview": "---\ncategory: Display\ncreated: '2019-11-29'\ndescription: Create an avatar list with CSS flexbox\nkeywords: css avatar, cs"
},
{
"path": "contents/avatar.mdx",
"chars": 1507,
"preview": "---\ncategory: Display\ncreated: '2019-12-04'\ndescription: Create an avatar component with CSS flexbox\nkeywords: css avata"
},
{
"path": "contents/badge.mdx",
"chars": 1025,
"preview": "---\ncategory: Display\ncreated: '2019-11-16'\ndescription: Create a badge component with CSS flexbox\nkeywords: css badge, "
},
{
"path": "contents/box-selector.mdx",
"chars": 4235,
"preview": "---\ncategory: Input\ncreated: '2022-09-24'\ndescription: Create a box selector with CSS\nkeywords: css box selector\nthumbna"
},
{
"path": "contents/breadcrumb.mdx",
"chars": 1556,
"preview": "---\ncategory: Navigation\ncreated: '2019-11-17'\ndescription: Create a breadcrumb with CSS flexbox\nkeywords: css breadcrum"
},
{
"path": "contents/button-with-icon.mdx",
"chars": 2107,
"preview": "---\ncategory: Input\ncreated: '2019-11-17'\ndescription: Create an icon button with CSS flexbox\nkeywords: css flexbox, css"
},
{
"path": "contents/calendar.mdx",
"chars": 4372,
"preview": "---\ncategory: Display\ncreated: '2022-09-24'\ndescription: Create a calendar with CSS grid\nkeywords: css calendar, css gri"
},
{
"path": "contents/card-layout.mdx",
"chars": 3527,
"preview": "---\ncategory: Layout\ncreated: '2019-12-25'\ndescription: Create a card layout with CSS flexbox\nkeywords: css card layout,"
},
{
"path": "contents/card.mdx",
"chars": 1922,
"preview": "---\ncategory: Display\ncreated: '2019-11-17'\ndescription: Create a card with CSS flexbox\nkeywords: css card, css flexbox\n"
},
{
"path": "contents/carousel-slider.mdx",
"chars": 12150,
"preview": "---\ncategory: Navigation\ncreated: '2023-10-14'\ndescription: Create a carousel slider with CSS\nopenGraphCover: /og/css-la"
},
{
"path": "contents/center-align-one-and-left-align-the-other.mdx",
"chars": 8913,
"preview": "---\ncategory: Display\ncreated: '2023-08-27'\ndescription: How to center align one element and left align the other\nkeywor"
},
{
"path": "contents/centering.mdx",
"chars": 1729,
"preview": "---\ncategory: Display\ncreated: '2019-11-15'\ndescription: Center an element with CSS flexbox\nkeywords: css centering, css"
},
{
"path": "contents/chip.mdx",
"chars": 3369,
"preview": "---\ncategory: Input\ncreated: '2019-12-21'\ndescription: Create a chip component with CSS flexbox\nkeywords: css chip, css "
},
{
"path": "contents/circular-navigation.mdx",
"chars": 5071,
"preview": "---\ncategory: Navigation\ncreated: '2019-11-30'\ndescription: Create a circular navigation with CSS flexbox\nkeywords: css "
},
{
"path": "contents/close-button.mdx",
"chars": 2390,
"preview": "---\ncategory: Display\ncreated: '2019-12-11'\ndescription: Create a close button with CSS flexbox\nkeywords: css close butt"
},
{
"path": "contents/color-swatch.mdx",
"chars": 1853,
"preview": "---\ncategory: Display\ncreated: '2021-05-08'\ndescription: Create a color swatch with CSS flexbox\nkeywords: css color swat"
},
{
"path": "contents/concave-corners.mdx",
"chars": 2969,
"preview": "---\ncategory: Display\ncreated: '2021-05-09'\ndescription: Create concave corners with CSS\nkeywords: css border radius, cs"
},
{
"path": "contents/cookie-banner.mdx",
"chars": 1978,
"preview": "---\ncategory: Display\ncreated: '2019-11-30'\ndescription: Create a cookie banner with CSS flexbox\nkeywords: css cookie ba"
},
{
"path": "contents/corner-ribbon.mdx",
"chars": 2169,
"preview": "---\ncategory: Display\ncreated: '2019-12-01'\ndescription: Create a corner ribbon with CSS flexbox\nkeywords: css flexbox, "
},
{
"path": "contents/curved-background.mdx",
"chars": 1285,
"preview": "---\ncategory: Display\ncreated: '2020-01-17'\ndescription: Create an element with curved background\nkeywords: css border r"
},
{
"path": "contents/custom-checkbox-button.mdx",
"chars": 4659,
"preview": "---\ncategory: Input\ncreated: '2019-12-01'\ndescription: Create a custom checkbox button with CSS flexbox\nkeywords: css ch"
},
{
"path": "contents/custom-radio-button.mdx",
"chars": 4670,
"preview": "---\ncategory: Input\ncreated: '2019-12-01'\ndescription: Create a custom radio button with CSS flexbox\nkeywords: css flexb"
},
{
"path": "contents/diagonal-section.mdx",
"chars": 1543,
"preview": "---\ncategory: Display\ncreated: '2019-12-25'\ndescription: Create a diagonal section with CSS\nkeywords: css diagonal secti"
},
{
"path": "contents/docked-at-corner.mdx",
"chars": 1573,
"preview": "---\ncategory: Display\ncreated: '2019-11-23'\ndescription: Dock an element at corner with CSS\nkeywords: css docked, css fl"
},
{
"path": "contents/dot-leader.mdx",
"chars": 3649,
"preview": "---\ncategory: Display\ncreated: '2019-11-27'\ndescription: Create dot leaders with CSS flexbox\nkeywords: css dot leader, c"
},
{
"path": "contents/dot-navigation.mdx",
"chars": 2073,
"preview": "---\ncategory: Navigation\ncreated: '2019-11-22'\ndescription: Create dot navigation with CSS flexbox\nkeywords: css dot nav"
},
{
"path": "contents/drawer.mdx",
"chars": 2283,
"preview": "---\ncategory: Navigation\ncreated: '2019-12-13'\ndescription: Create a drawer navigation with CSS\nkeywords: css drawer, cs"
},
{
"path": "contents/drop-area.mdx",
"chars": 1606,
"preview": "---\ncategory: Display\ncreated: '2019-11-27'\ndescription: Create a dropping area with CSS flexbox\nkeywords: css dropping "
},
{
"path": "contents/drop-cap.mdx",
"chars": 1256,
"preview": "---\ncategory: Display\ncreated: '2019-11-29'\ndescription: Create a drop cap with CSS\nkeywords: css drop cap, css :first-l"
},
{
"path": "contents/dropdown.mdx",
"chars": 5933,
"preview": "---\ncategory: Navigation\ncreated: '2019-11-29'\ndescription: Create a dropdown with CSS\nkeywords: css dropdown, css menu\n"
},
{
"path": "contents/fading-long-section.mdx",
"chars": 5392,
"preview": "---\ncategory: Display\ncreated: '2020-01-10'\ndescription: Fading long section to indicate there is more content\nkeywords:"
},
{
"path": "contents/feature-comparison.mdx",
"chars": 5571,
"preview": "---\ncategory: Display\ncreated: '2019-12-11'\ndescription: Create a feature comparison list with CSS flexbox\nkeywords: css"
},
{
"path": "contents/feature-list.mdx",
"chars": 2871,
"preview": "---\ncategory: Display\ncreated: '2019-11-21'\ndescription: Create a feature list with CSS flexbox\nkeywords: css feature li"
},
{
"path": "contents/fixed-at-corner.mdx",
"chars": 3702,
"preview": "---\ncategory: Display\ncreated: '2019-11-17'\ndescription: Fix an element at corner with CSS\nkeywords: css fixed\nthumbnail"
},
{
"path": "contents/fixed-at-side.mdx",
"chars": 2681,
"preview": "---\ncategory: Display\ncreated: '2019-12-21'\ndescription: Fix an element at the middle of side with CSS\nkeywords: css fix"
},
{
"path": "contents/flipping-number.mdx",
"chars": 7507,
"preview": "---\ncategory: Display\ncreated: '2023-09-07'\ndescription: Create a flipping number in CSS\nkeywords: css flipping number, "
},
{
"path": "contents/floating-label.mdx",
"chars": 2347,
"preview": "---\ncategory: Input\ncreated: '2019-11-28'\ndescription: Create a floating label with CSS\nkeywords: css floating label, pl"
},
{
"path": "contents/folded-corner.mdx",
"chars": 8468,
"preview": "---\ncategory: Display\ncreated: '2023-09-06'\ndescription: Create a folded corner in CSS\nkeywords: css folded corner\nopenG"
},
{
"path": "contents/folder-structure.mdx",
"chars": 4412,
"preview": "---\ncategory: Display\ncreated: '2021-04-03'\ndescription: Create a folder structure with CSS\nkeywords: css folder structu"
},
{
"path": "contents/frame-corners.mdx",
"chars": 6771,
"preview": "---\ncategory: Display\ncreated: '2023-09-06'\ndescription: Create frame corners in CSS\nkeywords: css folded corner\nopenGra"
},
{
"path": "contents/full-background.mdx",
"chars": 1817,
"preview": "---\ncategory: Display\ncreated: '2020-01-18'\ndescription: Create a full background element with CSS\nkeywords: css backgro"
},
{
"path": "contents/full-screen-menu.mdx",
"chars": 3008,
"preview": "---\ncategory: Navigation\ncreated: '2019-11-30'\ndescription: Create a full screen menu with CSS flexbox\nkeywords: css fix"
},
{
"path": "contents/grid-lines-background.mdx",
"chars": 5671,
"preview": "---\ncategory: Display\ncreated: '2023-08-30'\ndescription: Create a grid lines background in CSS\nkeywords: grid lines back"
},
{
"path": "contents/grid-without-double-borders.mdx",
"chars": 5995,
"preview": "---\ncategory: Layout\ncreated: '2023-08-27'\ndescription: How to create a CSS grid without double borders\nkeywords: css gr"
},
{
"path": "contents/holy-grail.mdx",
"chars": 4918,
"preview": "---\ncategory: Layout\ncreated: '2019-11-16'\ndescription: Create a holy grail layout with CSS flexbox\nkeywords: css flexbo"
},
{
"path": "contents/indeterminate-progress-bar.mdx",
"chars": 2259,
"preview": "---\ncategory: Feedback\ncreated: '2022-10-02'\ndescription: Create an indeterminate progress bar with CSS\nkeywords: css in"
},
{
"path": "contents/initial-avatar.mdx",
"chars": 1059,
"preview": "---\ncategory: Display\ncreated: '2019-12-04'\ndescription: Create an initial avatar with CSS\nkeywords: css avatar\nthumbnai"
},
{
"path": "contents/input-addon.mdx",
"chars": 3016,
"preview": "---\ncategory: Input\ncreated: '2019-11-16'\ndescription: Create an input add-on with CSS flexbox\nkeywords: css flexbox, cs"
},
{
"path": "contents/inverted-corners.mdx",
"chars": 2016,
"preview": "---\ncategory: Display\ncreated: '2021-05-09'\ndescription: Create inverted corners with CSS\nkeywords: css border radius, c"
},
{
"path": "contents/keyboard-shortcut.mdx",
"chars": 1211,
"preview": "---\ncategory: Display\ncreated: '2019-12-16'\ndescription: Create a keyboard shortcut with CSS\nkeywords: kbd tag, keyboard"
},
{
"path": "contents/layered-card.mdx",
"chars": 1732,
"preview": "---\ncategory: Display\ncreated: '2021-04-04'\ndescription: Create a layered card with CSS\nkeywords: css layered card\nthumb"
},
{
"path": "contents/linear-gauge.mdx",
"chars": 16331,
"preview": "---\ncategory: Feedback\ncreated: '2023-11-20'\ndescription: Create a linear gauge\nopenGraphCover: /og/css-layout/linear-ga"
},
{
"path": "contents/lined-paper.mdx",
"chars": 1489,
"preview": "---\ncategory: Display\ncreated: '2020-01-17'\ndescription: Create lined paper with CSS\nkeywords: css linear gradient, css "
},
{
"path": "contents/masonry-grid.mdx",
"chars": 3642,
"preview": "---\ncategory: Layout\ncreated: '2021-04-28'\ndescription: Create a masonry grid with CSS\nkeywords: css column-count, css c"
},
{
"path": "contents/media-object.mdx",
"chars": 2780,
"preview": "---\ncategory: Display\ncreated: '2019-11-16'\ndescription: Create a media object with CSS flexbox\nkeywords: css flexbox, m"
},
{
"path": "contents/mega-menu.mdx",
"chars": 6401,
"preview": "---\ncategory: Navigation\ncreated: '2019-12-29'\ndescription: Create a mega menu with CSS\nkeywords: css mega menu\nthumbnai"
},
{
"path": "contents/menu.mdx",
"chars": 3582,
"preview": "---\ncategory: Navigation\ncreated: '2019-11-17'\ndescription: Create a menu with CSS flexbox\nkeywords: css flexbox, css me"
},
{
"path": "contents/modal.mdx",
"chars": 4133,
"preview": "---\ncategory: Feedback\ncreated: '2019-11-17'\ndescription: Create a modal with CSS flexbox\nkeywords: css dialog, css flex"
},
{
"path": "contents/nested-dropdowns.mdx",
"chars": 5860,
"preview": "---\ncategory: Navigation\ncreated: '2020-01-13'\ndescription: Create nested dropdown menu with CSS\nkeywords: css dropdown "
},
{
"path": "contents/notification.mdx",
"chars": 3930,
"preview": "---\ncategory: Feedback\ncreated: '2019-11-17'\ndescription: Create a notification with CSS flexbox\nkeywords: css alert, cs"
},
{
"path": "contents/overlay-play-button.mdx",
"chars": 3686,
"preview": "---\ncategory: Display\ncreated: '2019-11-30'\ndescription: Create an overlay play button with CSS flexbox\nkeywords: css fl"
},
{
"path": "contents/pagination.mdx",
"chars": 1639,
"preview": "---\ncategory: Navigation\ncreated: '2019-11-17'\ndescription: Create a pagination with CSS flexbox\nkeywords: css flexbox, "
},
{
"path": "contents/pie-chart.mdx",
"chars": 6748,
"preview": "---\ncategory: Feedback\ncreated: '2023-11-17'\ndescription: Create a pie chart\nopenGraphCover: /og/css-layout/pie-chart.pn"
},
{
"path": "contents/popover-arrow.mdx",
"chars": 9268,
"preview": "---\ncategory: Feedback\ncreated: '2019-12-03'\ndescription: Create a popover arrow with CSS\nkeywords: css arrow, css\nthumb"
},
{
"path": "contents/presence-indicator.mdx",
"chars": 1558,
"preview": "---\ncategory: Feedback\ncreated: '2019-11-29'\ndescription: Create a presence indicator with CSS\nkeywords: css indicator\nt"
},
{
"path": "contents/previous-next-buttons.mdx",
"chars": 2395,
"preview": "---\ncategory: Navigation\ncreated: '2019-11-17'\ndescription: Create previous and next buttons with CSS flexbox\nkeywords: "
},
{
"path": "contents/price-tag.mdx",
"chars": 2759,
"preview": "---\ncategory: Display\ncreated: '2021-04-03'\ndescription: Create a price tag with CSS\nkeywords: css price tag\nthumbnail: "
},
{
"path": "contents/pricing-table.mdx",
"chars": 5127,
"preview": "---\ncategory: Display\ncreated: '2019-11-18'\ndescription: Create a pricing table with CSS flexbox\nkeywords: css flexbox, "
},
{
"path": "contents/progress-bar.mdx",
"chars": 1695,
"preview": "---\ncategory: Feedback\ncreated: '2019-11-17'\ndescription: Create a progress bar with CSS flexbox\nkeywords: css flexbox, "
},
{
"path": "contents/property-list.mdx",
"chars": 3706,
"preview": "---\ncategory: Display\ncreated: '2019-11-25'\ndescription: Create a property list with CSS flexbox\nkeywords: css flexbox, "
},
{
"path": "contents/questions-and-answers.mdx",
"chars": 7531,
"preview": "---\ncategory: Display\ncreated: '2019-11-23'\ndescription: Create a questions and answers section with CSS flexbox\nkeyword"
},
{
"path": "contents/radial-progress-bar.mdx",
"chars": 5122,
"preview": "---\ncategory: Feedback\ncreated: '2019-11-30'\ndescription: Create a radial progress bar with CSS flexbox\nkeywords: css cl"
},
{
"path": "contents/radio-button-group.mdx",
"chars": 3009,
"preview": "---\ncategory: Input\ncreated: '2019-12-01'\ndescription: Create a radio button group with CSS flexbox\nkeywords: css flexbo"
},
{
"path": "contents/radio-switch.mdx",
"chars": 1825,
"preview": "---\ncategory: Input\ncreated: '2019-11-24'\ndescription: Create a radio switch with CSS flexbox\nkeywords: css flexbox, css"
},
{
"path": "contents/rating.mdx",
"chars": 2435,
"preview": "---\ncategory: Input\ncreated: '2019-11-26'\ndescription: Create a star rating with CSS flexbox\nkeywords: css flexbox, css "
},
{
"path": "contents/resizable-element.mdx",
"chars": 6198,
"preview": "---\ncategory: Feedback\ncreated: '2019-12-10'\ndescription: Create resizable indicators with CSS\nkeywords: css resizable, "
},
{
"path": "contents/ribbon.mdx",
"chars": 3267,
"preview": "---\ncategory: Display\ncreated: '2019-12-01'\ndescription: Create a ribbon with CSS\nkeywords: css ribbon\nthumbnail: /asset"
},
{
"path": "contents/same-height-columns.mdx",
"chars": 4035,
"preview": "---\ncategory: Layout\ncreated: '2019-11-17'\ndescription: Create same height columns with CSS flexbox\nkeywords: css flexbo"
},
{
"path": "contents/search-box.mdx",
"chars": 1663,
"preview": "---\ncategory: Input\ncreated: '2019-11-22'\ndescription: Create a search box with CSS flexbox\nkeywords: css flexbox, css s"
},
{
"path": "contents/separator.mdx",
"chars": 3183,
"preview": "---\ncategory: Display\ncreated: '2019-11-21'\ndescription: Create a separator with CSS flexbox\nkeywords: css divider, css "
},
{
"path": "contents/sidebar.mdx",
"chars": 2281,
"preview": "---\ncategory: Layout\ncreated: '2019-11-16'\ndescription: Create a sidebar with CSS flexbox\nkeywords: css flexbox, css lay"
},
{
"path": "contents/simple-grid.mdx",
"chars": 4111,
"preview": "---\ncategory: Layout\ncreated: '2019-11-22'\ndescription: Create a simple grid with CSS flexbox\nkeywords: css flexbox, css"
},
{
"path": "contents/slider.mdx",
"chars": 1948,
"preview": "---\ncategory: Input\ncreated: '2019-11-17'\ndescription: Create a slider with CSS flexbox\nkeywords: css flexbox, css slide"
},
{
"path": "contents/speech-bubble.mdx",
"chars": 5241,
"preview": "---\ncategory: Display\ncreated: '2023-08-31'\ndescription: Create a speech bubble in CSS\nkeywords: css speech bubble\nopenG"
},
{
"path": "contents/spin-button.mdx",
"chars": 4072,
"preview": "---\ncategory: Input\ncreated: '2019-11-25'\ndescription: Create a spin button with CSS flexbox\nkeywords: css flexbox, css "
},
{
"path": "contents/spinner.mdx",
"chars": 1276,
"preview": "---\ncategory: Feedback\ncreated: '2022-10-03'\ndescription: Create a loading spinner with CSS\nkeywords: css loading spinne"
},
{
"path": "contents/split-navigation.mdx",
"chars": 3410,
"preview": "---\ncategory: Navigation\ncreated: '2019-11-22'\ndescription: Create a split navigation with CSS flexbox\nkeywords: css fle"
},
{
"path": "contents/split-screen.mdx",
"chars": 2162,
"preview": "---\ncategory: Layout\ncreated: '2019-11-17'\ndescription: Create a split screen with CSS flexbox\nkeywords: css flexbox, cs"
},
{
"path": "contents/stacked-cards.mdx",
"chars": 2409,
"preview": "---\ncategory: Display\ncreated: '2019-12-25'\ndescription: Create stacked cards with CSS\nkeywords: css card, css stacked c"
},
{
"path": "contents/stamp-border.mdx",
"chars": 1415,
"preview": "---\ncategory: Display\ncreated: '2020-01-16'\ndescription: Create stamp border with CSS\nkeywords: css radial gradient, css"
},
{
"path": "contents/statistic.mdx",
"chars": 1495,
"preview": "---\ncategory: Display\ncreated: '2019-12-30'\ndescription: Create a statistic component with CSS flexbox\nkeywords: css fle"
},
{
"path": "contents/status-light.mdx",
"chars": 2866,
"preview": "---\ncategory: Display\ncreated: '2020-01-12'\ndescription: Create a status light with CSS flexbox\nkeywords: css flexbox, c"
},
{
"path": "contents/stepper-input.mdx",
"chars": 2165,
"preview": "---\ncategory: Input\ncreated: '2019-11-16'\ndescription: Create a stepper input with CSS flexbox\nkeywords: css flexbox, cs"
},
{
"path": "contents/sticky-footer.mdx",
"chars": 3555,
"preview": "---\ncategory: Layout\ncreated: '2019-11-15'\ndescription: Create a sticky footer with CSS flexbox\nkeywords: css flexbox, c"
},
{
"path": "contents/sticky-header.mdx",
"chars": 2897,
"preview": "---\ncategory: Layout\ncreated: '2019-11-15'\ndescription: Create a sticky header with CSS\nkeywords: css layout, css positi"
},
{
"path": "contents/sticky-sections.mdx",
"chars": 1535,
"preview": "---\ncategory: Layout\ncreated: '2019-12-19'\ndescription: Create sticky sections with CSS\nkeywords: css layout, css sticky"
},
{
"path": "contents/sticky-table-column.mdx",
"chars": 5912,
"preview": "---\ncategory: Display\ncreated: '2019-12-29'\ndescription: Create sticky table column with CSS\nkeywords: css position stic"
},
{
"path": "contents/sticky-table-headers.mdx",
"chars": 5935,
"preview": "---\ncategory: Display\ncreated: '2019-12-26'\ndescription: Create sticky table headers with CSS\nkeywords: css position sti"
},
{
"path": "contents/switch.mdx",
"chars": 2624,
"preview": "---\ncategory: Input\ncreated: '2019-11-17'\ndescription: Create a switch with CSS flexbox\nkeywords: css custom checkbox, c"
},
{
"path": "contents/tab.mdx",
"chars": 2378,
"preview": "---\ncategory: Navigation\ncreated: '2019-11-22'\ndescription: Create tabs with CSS flexbox\nkeywords: css flexbox, css navi"
},
{
"path": "contents/teardrop.mdx",
"chars": 1397,
"preview": "---\ncategory: Display\ncreated: '2019-12-30'\ndescription: Create a teardrop with CSS\nkeywords: css border radius, css tea"
},
{
"path": "contents/three-dimensions-card.mdx",
"chars": 2299,
"preview": "---\ncategory: Display\ncreated: '2021-04-04'\ndescription: Create a 3D card with CSS\nkeywords: css 3D card\nthumbnail: /ass"
},
{
"path": "contents/timeline.mdx",
"chars": 6752,
"preview": "---\ncategory: Display\ncreated: '2019-12-12'\ndescription: Create a timeline with CSS flexbox\nkeywords: css flexbox, css t"
},
{
"path": "contents/toggle-password-visibility.mdx",
"chars": 2902,
"preview": "---\ncategory: Input\ncreated: '2019-11-23'\ndescription: Create a toggle password visibility with CSS flexbox\nkeywords: cs"
},
{
"path": "contents/tooltip.mdx",
"chars": 4116,
"preview": "---\ncategory: Feedback\ncontributors:\n - arthur322\ncreated: '2019-12-18'\ndescription: Create a tooltip with CSS\nkeywor"
},
{
"path": "contents/tree-diagram.mdx",
"chars": 4791,
"preview": "---\ncategory: Display\ncreated: '2021-04-03'\ndescription: Create a tree diagram with CSS\nkeywords: css sitemap, css tree "
},
{
"path": "contents/triangle-buttons.mdx",
"chars": 4224,
"preview": "---\ncategory: Display\ncreated: '2020-01-21'\ndescription: Create triangle buttons with CSS\nkeywords: css triangle buttons"
},
{
"path": "contents/upload-button.mdx",
"chars": 3050,
"preview": "---\ncategory: Input\ncreated: '2019-11-29'\ndescription: Create an upload button with CSS flexbox\nkeywords: css file input"
},
{
"path": "contents/validation-icon.mdx",
"chars": 2232,
"preview": "---\ncategory: Feedback\ncreated: '2019-12-12'\ndescription: Add validation icons to input with CSS\nkeywords: css validatio"
},
{
"path": "contents/video-background.mdx",
"chars": 3312,
"preview": "---\ncategory: Display\ncreated: '2019-12-16'\ndescription: Add video background with CSS flexbox\nkeywords: css flexbox, ob"
},
{
"path": "contents/voting.mdx",
"chars": 3073,
"preview": "---\ncategory: Display\ncreated: '2021-04-01'\ndescription: Create a voting control with CSS flexbox\nkeywords: css flexbox,"
},
{
"path": "contents/watermark.mdx",
"chars": 2811,
"preview": "---\ncategory: Display\ncreated: '2020-01-18'\ndescription: Create a watermark with CSS\nkeywords: css watermark\nthumbnail: "
},
{
"path": "contents/wizard.mdx",
"chars": 4541,
"preview": "---\ncategory: Navigation\ncreated: '2019-11-22'\ndescription: Create a wizard with CSS flexbox\nkeywords: css flexbox, css "
},
{
"path": "contents/zebra-like-background.mdx",
"chars": 9431,
"preview": "---\ncategory: Display\ncreated: '2023-09-30'\ndescription: Create a zebra-like background with CSS\nopenGraphCover: /og/css"
},
{
"path": "contents/zigzag-timeline.mdx",
"chars": 4864,
"preview": "---\ncategory: Display\ncreated: '2021-04-18'\ndescription: Create a zigzag timeline\nkeywords: css timeline, css zigzag tim"
}
]
About this extraction
This page contains the full source code of the phuocng/csslayout GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 120 files (424.4 KB), approximately 119.4k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.