Back To Basics

Back to Basics CSS #1 Recall

Structure of a web page
CSS History
Cascading Style Sheet
Web Browser compatibility
CSS Rule Anatomy
Units and Values
Shortened Properties
CSS Selectors

Grid

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;
}

Grid

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;
}

Grid

Inside a block of a container, you can also set the item

 .item-a {
  justify-self: center;
  align-self: center;
}

Flexbox

The 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;
}

Flexbox

To set the space used by an item, you can use flex-grow

 .item-a {
  flex-grow: 2;
}

Flexbox

You can also define the way the items are justified and aligned

justify-content justify content

align-items align items

 .item-a {
  justify-content: flex-start | flex-end | center | space-between | ...;
  align-items:  flex-start | flex-end | center | baseline | stretch | ...;
}

Flexbox

To make Flexbox a two dimension layout. You can use flex-wrap

flex-wrap

 .container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Use of Media Queries

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;
}

Transformations

It 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.

Ressources

Transformations

rotate: rotation of the items
scale, scaleX, scaleY: zoom of the item
translate, translateX, translateY: translation
skewX, skewY: Deformation
matrix: mathematical 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.

Ressources

Transitions

When 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...

Animations

Animations 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;}
}

Animations

animation-name: property to animate
animation-duration: duration
animation-timing-function: animation type
animation-iteration-count: number of iteration
animation-direction: direction
animation-play-state: state of animation
animation-delay: delay before animation
animation-fill-mode: state after execution

 .element:hover {
  animation: animation-opacity 750ms ease-in-out 1 0,1s;
}

Ressources

Back To Basics Series

CSS #2

Back to Basics CSS #1 Recall

Back to Basics CSS #1 Recall

Grid

Grid

Grid

Grid

Flexbox

Flexbox

Flexbox

Flexbox

Flexbox

QUESTION

QUESTION

QUESTION

Training Flexbox Grid

Use of Media Queries

Use of Media Queries

QUESTION

Transformations

Transformations

Transitions

Transitions

Animations

Animations

QUESTION

Ready to play

Training CSS

Back To Basics Series

CSS #2

	.container {
	grid-template-columns: 40px 50px auto 50px 40px;
	grid-template-rows: 25% 100px auto;
	}

	.item-a {
	grid-column-start: 2;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 3;
	}

	.container {
	flex-direction: row \| row-reverse \| column \| column-reverse;
	}

	.item-a {
	justify-content: flex-start \| flex-end \| center \| space-between \| ...;
	align-items: flex-start \| flex-end \| center \| baseline \| stretch \| ...;
	}

	div {
	width: 100px;
	height: 100px;
	background: red;
	transition: width 2s, height 4s;
	}

	div:hover {
	width: 300px;
	height: 300px;
	}

	@keyframes animation-opacity {
	from {opacity: 0.5;}
	to {opacity: 1;}
	}

	.element:hover {
	animation: animation-opacity 750ms ease-in-out 1 0,1s;
	}