Tag: css grid

CSS Responsive Flexbox

Responsive Flexbox

You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices.

For example, if you want to create a two-column layout for most screen sizes, and a one-column layout for small screen sizes (such as phones and tablets), you can change the flex-direction from row to column at a specific breakpoint (800px in the example below):

Example

.flex-container { display: flex; flex-direction: row; }/* Responsive layout - makes a one column layout instead of a two-column layout */ @media (max-width: 800px) { .flex-container { flex-direction: column; } }

Continue reading CSS Responsive Flexbox

CSS Flex Items

The CSS Flex Items

The direct child elements of a flex container automatically becomes flex items.

The element above represents four blue flex items inside a grey flex container.

Example

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

Continue reading CSS Flex Items

CSS Flex Container

The CSS Flex Container

The flex container becomes flexible by setting the display property to flex:

Example

.flex-container {
  display: flex;
}

Continue reading CSS Flex Container

CSS Flexbox

See the Pen
CSS Flexbox by Iampsp.com (@iampsp)
on CodePen.

What is CSS Flexbox?

Flexbox is short for the Flexible Box Layout module.

Flexbox is a layout method for arranging items in rows or columns.

Flexbox makes it easier to design a flexible responsive layout structure, without using float or positioning.

Flexbox vs. Grid

The CSS Flexbox Layout should be used for one-dimensional layout, with rows OR columns.

The CSS Grid Layout should be used for two-dimensional layout, with rows AND columns.

Continue reading CSS Flexbox

CSS Media Queries

CSS Media Queries

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • orientation of the viewport (landscape or portrait)
  • resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

CSS Media Types

Value Description
all Used for all media type devices
print Used for print preview mode
screen Used for computer screens, tablets, smart-phones etc.

CSS Common Media Features

Here are some commonly used media features:

Value Description
orientation Orientation of the viewport. Landscape or portrait
max-height Maximum height of the viewport
min-height Minimum height of the viewport
height Height of the viewport (including scrollbar)
max-width Maximum width of the viewport
min-width Minimum width of the viewport
width Width of the viewport (including scrollbar)

Media Query Syntax

A media query consists of a media type and can contain one or more media features, which resolve to either true or false.

@media not|only mediatype and (media feature) and (media feature) {
CSS-Code;
}

The mediatype is optional (if omitted, it will be set to all). However, if you use not or only, you must also specify a mediatype.

The result of the query is true if the specified media type matches the type of device the document is being displayed on and all media features in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Meaning of the not, only, and and keywords:

not: This keyword inverts the meaning of an entire media query.

only: This keyword prevents older browsers that do not support media queries from applying the specified styles. It has no effect on modern browsers.

and: This keyword combines a media type and one or more media features.

You can also link to different stylesheets for different media and different widths of the browser window (viewport):

<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="example2.css">
etc....

Continue reading CSS Media Queries

CSS Box Sizing

CSS Box Sizing

The CSS box-sizing property allows us to include the padding and border in an element’s total width and height.

Without the CSS box-sizing Property

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

This means: When you set the width/height of an element, the element often appears bigger than you have set (because the element’s border and padding are added to the element’s specified width/height).

Continue reading CSS Box Sizing

CSS – @property Rule

CSS @property Rule

The @property rule is used to define custom CSS properties directly in the stylesheet without having to run any JavaScript.

The @property rule has data type checking and constraining, sets default values, and defines whether the property can inherit values or not.

Example of defining a custom property:

@property --myColor {
  syntax: "";
  inherits: true;
  initial-value: lightgray;
}

The definition above says that –myColor is a color property, it can inherit values from parent elements, and its default value is lightgray.

To use the custom property in CSS, we use the var() function:

body {
  backgound-color: var(--myColor);
}

The benefits of using @property:

  • Type checking: You must specify the data type of the custom property, such as <number>, <color>, <length>, etc. This prevents errors and ensures that custom properties are used correctly
  • Set default value: You set a default value for the custom property. This ensures that if an invalid value is assigned later, the browser uses the defined fallback value
  • Set inheritance behavior: You must specify whether the custom property can inherit values from its parent elements or not

Continue reading CSS – @property Rule

CSS Variables

CSS Variables

The var() function is used to insert the value of a CSS variable.

CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.

A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables.

Continue reading CSS Variables

CSS User Interface

CSS User Interface

In this chapter you will learn about the following CSS user interface properties:

  • resize
  • outline-offset

CSS Resizing

The resize property specifies if (and how) an element should be resizable by the user.

Continue reading CSS User Interface

CSS Multiple Columns

CSS Multi-column Properties

In this chapter you will learn about the following multi-column properties:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

Continue reading CSS Multiple Columns