Web_Designer_Issue_262_2017

new generation CSS
10 ESSENTIAL TIPS & TRICKS
1. grid terminology
grid Container: The element in which the ‘display’
property is set to ‘grid’, ‘inline-grid’
or ‘subgrid’.
grid item:
grid line:
grid traCk:
grid Cell:
grid area:
The direct children of the Grid
Container become Grid Items.
Either Column Lines (vertical) or
Row Lines (horizontal). These lines
are used for positioning elements
onto the grid.
The space between two grid lines.
The space between four grid lines
and smallest unit in the grid.
The space between four grid
lines that can cover any amount
of grid cells.
2. new meaSurement unitS
CSS Grid brings a new measurement unit: the ‘fr’
unit equaling a fraction. This new unit will account
for margins in the grid meaning there is no need
for calc() units.
3. grid temPlate rowS and ColumnS
Set on the Grid Container, grid template rows and
columns are used to define the number of cells that
will be created on the grid. These properties will
accept a number of diferent measurement units
CSS ELEMENT QUERIES
Element containers have been a hot topic for a few
years now. The idea is that we could query any
individual element instead of the viewport. Using a
similar syntax to media queries, EQCSS uses an
‘@element’ query in the same way you would use a
media query. There’s also other syntax being
considered that is more in line with current CSS:
@element .example and (min-width: 400px) {
.example/$this {...}
}
.example[min-width~=”400px”] {...}
Tommy Hodgins (@innovati on Twitter and the
author of EQCSS) is a huge advocate of this feature
and has put forward one specification (srt.lt/nE1X)
for CSS Element Queries as well as The Responsive
Images Community Group (srt.lt/k0Jc8G) who also
have a specification written up.
and will accept the new repeat, minmax and
auto-fill functions.
grid-template-columns: 200px 20em auto
15rem 1fr;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(auto-ill,
minmax(15rem, 1fr));
4. grid named lineS
Lines on the grid can be named when being
defined and then referenced for positioning.
grid-template-columns: [col1-start] 200px
[col2-start] 20em [col2-start] auto
[col3-start] 15rem [col4-start] 1fr
[col4-end];
5. grid PoSitioning
Using the Grid Line Numbers or Named Lines on
the grid, Grid Items can be positioned anywhere
on the grid regardless of their position in the DOM.
.grid__item:last-child {
grid-column: 2/5;
grid-row: 2/4;
grid-column: col2-start / col5-start;
grid-row: row2-start / row4-start;
}
6. grid named areaS
Areas of the grid can be defined by giving child
elements area names. These names are defined
by the developer and can then be used when
defining the grid template.
header {
grid-area: header; }
QUERY THE ELEMENT NOT THE VIEWPORT
define a grid layout with eQCSS
Once we have included the EQCSS script we can
use Element Queries the same way we use media
queries. By doing this we can check to see the
width of the grid and change the layout by
redefining the grid-template-areas when the grid is
at a minimum width.
.grid {
}
grid-template-areas:
“header”
“article”
“left-sidebar”
“right-sidebar”
“footer”
;
}
@element .grid and (min-width: 500px) {
7. grid temPlateS
Once Grid Items have been given names grid
templates can be created. Grid templates are
written using an ASCII-style notation and can be
redefined using media queries, allowing complex
layouts to be easily maintained.
grid-template-areas:
“header header header”
“left-sidebar article right-sidebar”
“footer footer footer”
;
8. rePeat, minmax & auto-fill
These powerful new functions allow for the
browser to take suggestions you make about the
layout and calculate the best way to fit all of the
elements inside, especially when combined with
the auto-flow properties.
grid-template-columns: repeat(auto-ill,
minmax(15rem, 1fr));
grid-auto-low: dense;
9. ComBine with flexBox
Grid Items can be turned into a flex-container
allowing complex layouts to be created inside
a single Grid Item, making CSS Grid perfect for
page layout.
10. firefox devtoolS
Firefox Devtools has a CSS Grid Highlighter
built in that will visually show you the lines of
any grid. This highly useful tool can be quickly
toggled on and of and can be a huge help
when it comes to development.
.grid {
grid-template-areas:
“header header header”
“left-sidebar article right-sidebar”
“footer footer footer”
;
}
deteCt orientation with eQCSS
EQCSS enables us to test for many diferent
properties. One of particular interest is detecting
the orientation of an element. If for example the
element is displayed in the main content we can
apply one set of styles, and others when placed
in the sidebar or a smaller container. The same
layout can be achieved using the Element
46 ________________________________________________________________ feature