4 - Advanced CSS.
Speck Academy 2021
Media queries
Mobile first design
BEM methodology
CSS Grid
CSS Flexbox
1
2
3
4
5
Overview
1
Media queries
Media queries overview
About
Media types
Media features
Logical operators
About
Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
In your HTML head, add following code for media queries support:
Media types
Media types describes general category of a device. If not defined then all type will be implied.
List of media types:
Media features
Media features describe specific characteristics of the user agent, output device, or environment. Each media feature expression must be surrounded by parentheses.
Most common:
Logical operators
The logical operators can be used to compose a complex media query.
List of logical operators:
2
Mobile first design
Mobile first design
Mobile first design means that we first write CSS for the smallest screen sizes (mobile) and override them for larger screens (desktop) when needed.
Reasons:
Mobile first design
Example of mobile first approach.
This can be used to create single column grid on mobile devices, two column grid on tablets and 3 column grid on desktop.
In most cases you will use min-width media feature inside breakpoints.
/* Mobile */�.articles-grid {� display: block;�}
/* Tablet */�@media only screen and (min-width: 768px){� .articles-grid {
display: grid;� grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop */�@media only screen and (min-width: 1024px){� .articles-grid {� grid-template-columns: repeat(3, 1fr);
}
}
3
BEM methodology
BEM overview
Introduction
Block
Element
Modifier
Naming convention
Introduction
BEM (Block, Element, Modifier) is a component-based approach to web development.
The idea behind it is to divide the user interface into independent blocks.
This makes interface development easy and fast with a complex UI, and it allows reuse of existing code without copying and pasting.
For more information visit this link.
Block
Logically and functionally independent page component.
A block encapsulates behaviour (JS), templates and styles (CSS).
Blocks being independent allows for their re-use, as well as facilitating the project development and support process.
The implementation of blocks as independent entities makes it possible to change their position on the page and ensures their proper functioning and appearance.
Blocks can be nested inside any other blocks.
Block
Block name describes its purpose (“What is it?” - menu or button), not its state (“What does it look like?” - red or big).
It shouldn’t influence its environment, meaning you�shouldn’t set the external geometry (margin)�or positioning for the block.
You shouldn’t use CSS tag�or ID selector.
Example:
Element
A constituent part of block that can’t be used outside of it.
For example, a menu item is not used outside of the context of a menu block, therefore it is an element.
The element name describes its purpose, �and it’s separated from the block name�with a double underscore (__).
Example:
Modifier
A BEM entity that defines the appearance, state and behaviour of a block or an element.
Modifier name is separated from the block or element name by a single underscore (_).
A modifier can’t be used alone!
Modifier
Boolean modifier
Key-value modifier
Naming convention
The name of a BEM entity is unique.
The same BEM entity always has the same name in all technologies (CSS, JS, HTML).
Naming rules:
4
CSS Grid
CSS Grid
CSS Grid is a two-dimensional grid-based layout system, meaning it can handle both columns and rows.
You work with Grid layout by applying CSS rules both to parent element (which becomes the Grid Container) and to that element’s children (which become Grid Items).
As of March 2017, most browsers shipped native, unprefixed support for CSS Grid (see more on Caniuse).
Find out more on MDN and css-tricks.com!
5
CSS Flexbox
CSS Flexbox
Flexbox layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container.
The main idea behind flex layout is to give the container the ability to alter its items width/height (and order) to best fill the available space.
Flex container expands items to fill available free space or shrinks them to prevent overflow.
Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while Grid layout is intended for larger scale layouts.
Useful resources
https://css-tricks.com/snippets/css/complete-guide-grid/ - grid
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - flexbox
https://www.youtube.com/watch?v=CFgeJq4l1YM - flex basis, grow, shrink
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries - media queries
https://en.bem.info/methodology/ - BEM methodology
6
Hands-on
Hands-on
7
Homework
Homework