Master Responsive Design, Flexbox, CSS Grid & Animations

CSS (Cascading Style Sheets) is the backbone of modern web design. It allows developers to style HTML elements, ensuring websites are visually appealing, responsive, and user-friendly. The term "CSS" stands for "Cascading Style Sheets" because of how styles are applied in a hierarchy, with styles "cascading" from one level to the next! This blog is a one-stop resource for learning CSS, covering selectors, layouts, animations, and best practices in depth, with examples and code snippets.

1. Understanding CSS Selectors

Selectors are used to target HTML elements and apply styles to them. Some common types include:

1.1 Element Selector

Targets specific HTML tags:

p {
  color: blue;
  font-size: 16px;
}

1.2 Class Selector

Targets elements with a specified class:

.button {
  background-color: red;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

1.3 ID Selector

Targets elements with a unique ID:

#header {
  font-size: 24px;
  font-weight: bold;
}

1.4 Attribute Selector

Targets elements based on attributes:

input[type="text"] {
  border: 1px solid black;
  padding: 5px;
}

2. CSS Box Model

The box model is crucial for layout and spacing. It consists of:

Content: The actual content of the element.
Padding: Space between content and the border.
Border: Surrounds padding and content.
Margin: Space outside the border, separating elements.

Example of Box Model:

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

→ box-sizing: border-box;

By default, the width and height of an element only apply to the content area, and padding & border increase the total size of the element. The box-sizing property controls this behavior.

Default Behavior (`content-box`)

Width & height apply only to the content.
Padding & border increase the total size.

Border-Box Behavior (`box-sizing: border-box;`)

The declared width & height include padding and border.
The element will not grow beyond the specified size.

Example:

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

This ensures the total width & height remain 200px × 100px, including padding and border.

3. Layout Techniques in CSS

3.2 CSS Flexbox (For One-Dimensional Layouts)

Flexbox (Flexible Box Layout) is a layout model in CSS that helps you build complex layouts with less code, making it easier to align and distribute space among elements, even if their sizes change. Unlike older methods like float or inline-block, Flexbox provides more control over your layout and is perfect for responsive designs.

1. Flex Container and Flex Items

Flex Container: The parent element that holds all the flex items. To activate Flexbox, set the container's display property to flex or inline-flex.
Flex Items: The direct child elements of the flex container. These elements will be arranged according to Flexbox properties.

  .container {
    display: flex; /* or inline-flex */
  }

2. Main Axis and Cross Axis

Main Axis: The primary axis along which flex items are laid out. Its direction is determined by the flex-direction property.
Cross Axis: Perpendicular to the main axis. If the main axis is horizontal, the cross axis is vertical, and vice versa.

3. Flex Direction

The flex-direction property defines the direction of the main axis.

row (default): Items are laid out horizontally from left to right.
row-reverse: Items are laid out horizontally from right to left.
column: Items are laid out vertically from top to bottom.
column-reverse: Items are laid out vertically from bottom to top.

.container {
  display: flex;
  flex-direction: row; /* Options: row, row-reverse, column, column-reverse */
}

4. Justify Content

The justify-content property aligns flex items along the main axis.

flex-start: Aligns items at the start of the container.
flex-end: Aligns items at the end of the container.
center: Aligns items at the center of the container.
space-between: Distributes items evenly with the first item at the start and the last item at the end.
space-around: Distributes items evenly with equal space around each item.
space-evenly: Distributes items evenly with equal space between and around each item.

.container {
  display: flex;
  justify-content: center; /* Options: flex-start, flex-end, center, space-between, space-around, space-evenly */
}

5. Align Items

The align-items property aligns flex items along the cross axis.

stretch (default): Items stretch to fill the container.
flex-start: Aligns items at the start of the container.
flex-end: Aligns items at the end of the container.
center: Aligns items at the center of the container.
baseline: Aligns items based on their baseline.

.container {   
    display: flex;   
    align-items: center; /* Options: stretch, flex-start, flex-end, center, baseline */ 
}

6. Align Self

The align-self property allows individual flex items to override the align-items property.

.item {
  align-self: flex-end; /* Options: auto, flex-start, flex-end, center, baseline, stretch */
}

7. Flex Wrap

The flex-wrap property controls whether flex items should wrap onto multiple lines.

nowrap (default): Items stay on a single line.
wrap: Items wrap onto multiple lines from top to bottom.
wrap-reverse: Items wrap onto multiple lines from bottom to top.

.container {
  display: flex;
  flex-wrap: wrap; /* Options: nowrap, wrap, wrap-reverse */
}

8. Flex Grow, Shrink, and Basis

flex-grow: Defines how much a flex item should grow relative to others.

.item {
  flex-grow: 1; /* All items grow equally */
}

flex-shrink: Defines how much a flex item should shrink relative to others.

.item {
  flex-shrink: 1; /* All items shrink equally */
}

flex-basis: Defines the initial size of a flex item before it grows or shrinks.

.item {
  flex-basis: 100px; /* Initial size */
}

flex: A shorthand for flex-grow, flex-shrink, and flex-basis.

.item {
  flex: 1 1 100px; /* grow shrink basis */
}

9. Align Content

The align-content property aligns flex lines when there is extra space in the cross axis.

stretch (default): Lines stretch to fill the container.
flex-start: Lines align at the start of the container.
flex-end: Lines align at the end of the container.
center: Lines align at the center of the container.
space-between: Lines are distributed evenly with the first line at the start and the last line at the end.
space-around: Lines are distributed with equal space around them.
space-evenly: Lines are distributed with equal space between and around them.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center; 
/* Options: stretch, flex-start, flex-end, center, space-between, space-around, space-evenly */
}

10. Place Items and Place Content

Flexbox provides shorthand properties to simplify alignment:

place-items: A shorthand for align-items and justify-items. In Flexbox, justify-items is ignored, so place-items effectively sets align-items.

.container {
  display: flex;
  align-items: center;
}

.container {
  display: flex;
  align-items: center;
}

place-content: A shorthand for align-content and justify-content.

.container { 
  display: flex; 
  justify-content: space-between; 
  align-content: space-between; 
}

.container {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
}

11. Flexbox Shorthand Property

The flex shorthand property combines flex-grow, flex-shrink, and flex-basis into a single declaration:

.item {
  flex: 1 0 100px; /* grow shrink basis */
}

This is equivalent to:

.item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100px;
}

12. Flexbox Alignment in Practice

To center a flex item both horizontally and vertically within a container:

.container {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;     /* Vertical centering */
  height: 100vh;           /* Full viewport height */
}

This setup ensures that the flex item is perfectly centered within the container.

3.2 CSS Grid (For Two-Dimensional Layouts)

CSS Grid is a layout system in CSS that helps you arrange elements on a webpage in rows and columns. It’s super useful when you need to create complex layouts for websites. Before CSS Grid, we had to use tricks like floating elements or flexbox to achieve layouts, but now, CSS Grid makes it much easier!

Why Use CSS Grid?

Two-Dimensional: CSS Grid lets you control both rows and columns at the same time. It’s perfect for making more complex designs.
Less Code: CSS Grid often requires fewer lines of code, making it easier to manage your website’s layout.
Flexibility: It’s really easy to make your layout responsive (i.e., adjust to different screen sizes) using CSS Grid.

How Does CSS Grid Work?

A basic CSS Grid layout has two main parts:

Grid Container: The parent element that holds all the items.
Grid Items: The child elements inside the grid container.

A Simple Example:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 3 columns */
  grid-template-rows: auto; /* Auto height based on content */
  gap: 20px; /* Space between items */
}

.item {
  background-color: lightblue;
}

grid-template-columns tells how wide each column should be. 200px for the first and third columns, and 1fr (fractional unit) for the middle column, which takes up the remaining space.
gap is the space between each item.

Placing Items in the Grid

You can place the items exactly where you want using grid-column and grid-row.

.item1 {
  grid-column: 1 / 3; /* spans columns 1 to 3 */
  grid-row: 1; /* on the first row */
}

.item2 {
  grid-column: 3; /* placed in the third column */
  grid-row: 1 / 3; /* spans rows 1 and 2 */
}

Responsive Layouts

You can make your layout change depending on the screen size (responsive design) by using media queries.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
  gap: 20px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;  /* 2 columns on smaller screens */
  }
}

@media (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;  /* 1 column on very small screens */
  }
}

Grid Template Areas

You can define grid template areas to give more meaningful names to sections of your grid. This makes the layout even easier to read.

Example:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-gap: 10px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

In this example:

The grid is divided into areas with names like header, sidebar, main, and footer.
The items (header, sidebar, etc.) are then assigned to these areas.

Implicit Grid

If there are more grid items than you defined in grid-template-columns or grid-template-rows, CSS Grid will automatically create new rows or columns to fit them. This is called the implicit grid.

Example:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
}

.item1 {
  background-color: lightblue;
}

.item2 {
  background-color: lightcoral;
}

.item3 {
  background-color: lightgreen;
}

In this example, .item3 will automatically be placed in a new row because we only defined two columns. CSS Grid handles it automatically.

Grid Auto Flow

This property controls how items are placed in the grid when you don’t specify their position. By default, items are placed in rows, but you can change this behavior with grid-auto-flow.

Example:

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-auto-flow: column; /* Place items in columns instead of rows */
}

With grid-auto-flow: column, new items will be placed in columns first, instead of rows.

Minmax()

The minmax() function allows you to set a range for your grid items' sizes. It’s useful when you want columns or rows to grow or shrink within certain limits.

Example:

.container {
  display: grid;
  grid-template-columns: 100px 1fr minmax(150px, 300px);
}

The first column is fixed at 100px.
The second column takes up the remaining space.
The third column can grow or shrink between 150px and 300px.

Aligning and Justifying Grid Items

You can control the alignment of grid items both horizontally and vertically using justify-items, align-items, justify-self, and align-self.

justify-items controls horizontal alignment of items in the grid.
align-items controls vertical alignment of items in the grid.
justify-self and align-self let you control the alignment of individual items.

Example:

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  justify-items: center;
  align-items: center;
}

.item {
  background-color: lightblue;
}

This will center all the grid items both horizontally and vertically within their grid cells.

4. Animations and Transitions

4.1 CSS Transitions

.button {
    background-color: blue; /* Sets the initial background color of the button to blue */
    color: white;           /* Sets the text color to white */
    padding: 10px;          /* Adds padding around the text */
    transition: background-color 0.5s ease-in-out; /* Applies a transition effect to the background color when it changes, lasting 0.5 seconds with a smooth ease-in-out timing */
}

.button:hover {
    background-color: green; /* Changes the background color to green when the button is hovered over */
}

In the above CSS:

transition: background-color 0.5s ease-in-out;: This line applies a transition effect on the background-color property, which lasts for 0.5 seconds and uses the ease-in-out timing function (slow at the start and slow at the end).

HTML:

<button class="button">Hover Me</button>  <!-- A button that will change color on hover -->

When the user hovers over the button, the background color will smoothly transition from blue to green.

4.2 Keyframe Animations

@keyframes bounce {
  0% { transform: translateY(0); }        /* At 0%, the element is at its original position (no vertical movement) */
  50% { transform: translateY(-10px); }   /* At 50%, the element moves 10px upwards */
  100% { transform: translateY(0); }      /* At 100%, the element returns to its original position */
}
.box {
  width: 50px;                           /* Sets the width of the box to 50px */
  height: 50px;                          /* Sets the height of the box to 50px */
  background-color: red;                 /* Sets the box's background color to red */
  animation: bounce 1s infinite;         /* Applies the bounce animation defined above, lasting 1 second and repeating infinitely */
}

In the above CSS:

@keyframes bounce: Defines an animation named bounce where the box will move up and down vertically. The transform: translateY() moves the element on the Y-axis.
animation: bounce 1s infinite;: This line applies the animation to the .box element, making it bounce. It lasts for 1 second and repeats infinite times.

HTML:

<div class="box"></div>   <!-- A red box that will bounce up and down -->

The box will bounce up and down continuously due to the defined keyframes.

5. Best Practices for Writing CSS

CSS Reset:

Remove default browser styles for consistency.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Minimize CSS Code: Remove unused styles and compress files.
Use Variables: CSS custom properties make styling scalable.

:root {
  --primary-color: blue;
}
.button {
  background-color: var(--primary-color);
}

Optimize for Performance: Avoid deep nesting and excessive selectors.

6. Responsive Design with Media Queries

Media queries are used in CSS to apply different styles based on the screen size, device, or viewport condition. They help make your website look good on all devices, from phones to desktops.

Basic Syntax

@media (condition) {
  /* CSS rules */
}

Condition: Defines the screen size or other features (e.g., max-width: 600px).
CSS rules: The styles applied if the condition is true.

Example

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

This will change the background color to light blue if the screen width is 600px or smaller.

Best Practices

Mobile-First Design: Start with styles for small screens, then use media queries to adjust for larger screens.
Keep it Simple: Don’t overcomplicate it with too many breakpoints.
Organize Your Code: Group similar media queries together.

With media queries, you can create a flexible, responsive design that adapts to any device!

CSS was originally created in just 10 days! 😎

In 1994, Håkon Wium Lie, while working at CERN, proposed the idea of CSS to make websites more visually appealing and easier to maintain.

Master Web Styling with CSS