Css Layout Storm

created by @manelbutterfly

Let's beginning with a brief Story

The oldest age of Web Design in 1989

Table's Birth


<table>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
A1 A2
... ...

In 1995 JavaScript Birth


<SCRIPT LANGUAGE = "Javascript">

alert("Hello World")

</SCRIPT>

Flash ...

Cascading Style Sheets (CSS) 1998


<style>
body {
		background-color: linen;
	}

h1 {
	color: maroon;
	margin-left: 40px;
}
</style>

CSS Basics

To be able to create great layouts we need to have an understanding of some basic CSS.

CSS Selectors

.class #Id element, a:active, :empty, :disabled, :link,input[type],....

Combinators

Adjacent Sibling 


h2 + p { }

General Sibling 


h2 ~ p { }

Pixels in CSS 


  <div class="wrapper">
  <p>This div is set to 940 pixels width.</p>
	</div>


	.wrapper {
			width: 940px;
	}

Is it better?


	<div class="wrapper">
	<p>This div is set to 90% of the viewport to a maximum of 940 pixels width.</p>
	</div>
	

	.wrapper {
	  	width: 90%;
			max-width: 940px;
		}

Em VS REM

  • the default sizing 100% = 1em = 1rem = 16px = 12pt
  • This is with 1 em
  • I am with 1 rem

Viewport....


		.bg{
			position: relative;
			background: url('bg.jpg') center/cover;
			width: 100%;
			height: 100vh;
		}

Viewport as RWB


		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • control the page's dimensions and scaling
  • sets the width of the page to follow the screen-width of the device
  • sets the initial zoom level when the page is first loaded by the browser

Box Sizing!

Let's digging to the Grid Phenomen

What do you know about CSS grid layout?

  • Not like Tables structure => Don't have content Structure
  • Enable a variety of layouts
  • The child element are able to position themselves :D

Let's see a simple example from MDN

Simple Grid example

Let's talk a little bit about Flex Box

We gonna be more flexy

The best way to know more examples

http://labs.jensimmons.com/workshop/

Diamond Mondrian

Futurismo Trentino

Some Ressources

  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
  • http://labs.jensimmons.com/workshop/
  • https://thecssworkshop.com/
  • https://davidwalsh.name/flexbox-layouts
  • https://philipwalton.github.io/solved-by-flexbox/demos/grids/
  • http://flexboxgrid.com/

Interesting Talks

  • Ana Tudor does with CSS: https://codepen.io/thebabydino/#
  • Zoe Mickley Gillenwater: https://vimeo.com/131664957
  • Jen Simmons: https://www.youtube.com/watch?v=5Z7lSSMwRgo
  • Rachel Andrew: https://www.youtube.com/watch?v=ibeF6rbzD70

Thank you