CSS Grid Layout is a two-dimensional grid-based layout system
.container {
display: grid;
}
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
Once you have defined the container, you can set the item in it
.item-a {
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
Inside a block of a container, you can also set the item
.item-a {
justify-self: center;
align-self: center;
}
There are many shortened properties for grid system grid-column, grid-row, grid-area, grid-template, grid-gap, place-self... you can discover them in the following site
RessourcesThe Flexible Box Layout Module make easier to design flexible responsive layout structure.
.container {
display: flex;
}
The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension.
The flexbox-direction attibute allows us to set the item direction.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
To set the space used by an item, you can use flex-grow
.item-a {
flex-grow: 2;
}
You can also define the way the items are justified and aligned
justify-content
.item-a {
justify-content: flex-start | flex-end | center | space-between | ...;
align-items: flex-start | flex-end | center | baseline | stretch | ...;
}
To make Flexbox a two dimension layout. You can use flex-wrap
flex-wrap
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
You can discover on the console the parameter values and render.
There are many other and shortened properties for flexbox system flex, flex-shrink, order, flex-wrap, flex-basis, flex-flow, align-self, align-content... you can discover them in the following site
RessourcesWhen do you use Grid or Flexbox ?
Grid for the construction of the principal containers (yellow zones)
Flexbox for the internal components (green zones)
By using the @media attribute on particular criterias,
You can apply specific styles to make responsive web site regarding your media.
@media (max-width: 600px) {
flex-direction: column;
}
Note : you can also set the list of device to support the rules : screen, print, projection, tv, speech, ... By default, it is all.
How to define the common range of screen sizes for Media queries ?
VitaminIt allows to make creative web page by allowing to rotate, translate, transpose, zoom items only with CSS.
.item {
transform: rotate(15deg)
}
For instance a card flip, can be done easily with transformation.
.item:hover {
transform: scale(1.10)
}
Note1 : do a search on "Do a barell roll" or "askew" in google and see the effects.
Note2 : There is also possibility to make 3D transformation.
RessourcesWhen a CSS property is modified, the transition allow to make this modification not abrupt but animate.
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
The properties that can be animated are all numerical properties width, height, margin, padding, font-weight...
The translate-timing-function can be very funny
RessourcesAnimations are closed to transition but offer more controls.
We define the animation code by using the keyframes properties.
@keyframes animation-opacity {
from {opacity: 0.5;}
to {opacity: 1;}
}
.element:hover {
animation: animation-opacity 750ms ease-in-out 1 0,1s;
}
Ressources
Do you use Transformations, Transitions or Animations in your application?
It can be part of the user experience !!!
openclassroomsThe way to define if your are CSS ready:
Can you go from this without CSS
To this in Desktop and Mobile
In Desktop: picture and form are displayed in row, CSS expert rotate on itself, blue color is #0082C3
In Mobile: picture and form are displayed in column, no label for the menu,