CSS Frameworks

overview
what are frameworks
types of frameworks
frontend (CSS) Frameworks
flex box
unsemantic

a standardised set of concepts,
practices and criteria for dealing
with a common type of problem
a package made up ﬁles and
folders of standardised code to aid
in the development of websites
In general
In web design

websites have common features,
menu bars…layout in grids…columns
Menu Bars

column layouts
surely there must therefore be an
easy way for us to use this to our
advantage

Grid SYstem
and have a layout system that we
can call on to do all the hard work
for us

“the aim of frameworks is to give
developers a common structure so
that we don't have to make
everything from scratch every time
that we want to make a new
websites”

in simpler terms…think of these like
templates!

frontend backend
(client Side) (server Side)
Presentation
Layer
Application
Layer
Data
Layer

frontend(client Side)
These are frameworks that eﬀect the
overall look and feel of the website - the
user interface
flexbox
not really a
framework but its
still quite cool

backend(server Side)
These frameworks can eﬀect the overall
logic and operation of a website
(ish)

frontend frameworks usually consist
of a package with several ﬁles for
standardising our code.
1. CSS Source to create a grid
2. Typography and style deﬁnitions
3. Solutions for browser incompatibility
4. Creation of standard classes

lots (and lots and lots) exist that you
can use!
http://usablica.github.io/front-end-frameworks/compare.html

we’re going to look at the ﬁrst in this
list
1. CSS Source to create a grid
2. Typography and style deﬁnitions
3. Solutions for browser incompatibility
4. Creation of standard classes
two introductions and then you can
give them a go yourself
PS - there is no right answer for which of these
is better - it is up to you!

frontend (CSS)
frameworks
FLEXBOX

• this isn’t really a framework, but its
a really good new addition to
CSS3 that makes our life easier
• We can use this to aid in laying
out our webpages
• A ﬂex container is used to
contain all of our ﬂex items
flex box

Overall compatibility is quite good.
IE is still annoying…
Compatibility
http://caniuse.com/#feat=ﬂexbox

…
<body>
<main>
<section class="container">
<h2>Section 1</h2>
</section>
<h2>Section 2</h2>
</section>
<h2>Section 3</h2>
</section>
</main>
</body>
…
html

body { 
background-color: cornﬂowerblue; 
} 
 
main { 
max-width: 960px; 
margin-right: auto; 
margin-left: auto; 
height: 400px; 
background-color: aliceblue; 
} 
 
.container{ 
background-color: gold; 
height: 100px; 
width: 100px; 
}
css

body { 
} 
 
main { 
height: 400px; 
display: ﬂex;
display: -webkit-ﬂex /*Safari */ 
} 
 
.container{ 
height: 100px; 
width: 100px; 
}
set display to flex, this means that
all child elements will be affected

body { 
} 
 
main { 
height: 400px; 
display: flex;
display: -webkit-flex /*Safari */
flex-direction: XXXXXXX 
} 
 
.container{ 
height: 100px; 
width: 100px; 
}
set the direction that we want the
elements to go in
row row-reverse
column column-reverse

body { 
} 
 
main { 
height: 400px; 
display: flex;
display: -webkit-flex /*Safari */
flex-direction: row; 
} 
 
.container{ 
height: 100px; 
width: 100px; 
}
we’ll stick with row,
this is also the default one

body { 
} 
 
main { 
height: 400px; 
display: flex; 
justify-content: XXXXX ; 
} 
 
.container{ 
height: 100px; 
width: 100px; 
}
Set the justification of the content
flex-start
centre
flex-end
space-around
space-between

body { 
} 
 
main { 
height: 400px; 
display: ﬂex; 
justify-content: space-between ; 
} 
 
.container{ 
height: 100px; 
width: 100px; 
}
lets go for space between, and aim
for a generic 3 column layout

…
<body> 
 
<main> 
 
<section class="container" id="cont1"> 
<h2>Section 1</h2> 
</section> 
 
</section> 
 
</section> 
 
</main> 
 
</body>
… we can also change individual items,
give them ids first

… 
.container{ 
height: 100px; 
width: 100px; 
}
#cont1 { 
} 
 
#cont2 { 
background-color: silver; 
} 
 
#cont3 { 
background-color: saddlebrown; 
}
…
and lets change their colours to be
different to make it easier to see

.container{ 
height: 100px; 
width: 100px; 
}
#cont1 { 
order: 2; 
} 
#cont2 { 
order: 3; 
} 
 
#cont3 { 
order: 1; 
}
we can change the order

.container{ 
height: 100px; 
ﬂex-grow: 1; 
} 
 
#cont1 { 
order: 2; 
} 
#cont2 { 
order: 3; 
} 
 
#cont3 { 
order: 1; 
}
use flex-grow to make all columns
the same size

.container{ 
height: 100px; 
} 
 
#cont1 { 
order: 2; 
flex-grow: 3; 
} 
#cont2 { 
order: 3; 
flex-grow: 2; 
} 
 
#cont3 { 
order: 1; 
flex-grow: 1; 
}
or size each individually (numbers
are relative)

.container{ 
height: 100px; 
margin: 10px; 
} 
 
#cont1 { 
order: 2; 
flex-grow: 3; 
} 
#cont2 { 
order: 3; 
flex-grow: 2; 
} 
 
#cont3 { 
order: 1; 
flex-grow: 1; 
}
box rule still applies so we can add
additional layout options

…
<main> 
 
<p>Lorem ipsum… </p> 
</section> 
 
<p>Lorem ipsum…</p> 
</section> 
 
<p>Tiny bit of text</p> 
</section> 
 
</main>
…
lets add some content into the boxes
#whoops!!!

.container{ 
margin: 10px; 
} 
 
#cont1 { 
order: 2; 
flex-grow: 3; 
} 
#cont2 { 
order: 3; 
flex-grow: 2; 
} 
 
#cont3 { 
order: 1; 
flex-grow: 1; 
}
take out the ‘height’ from .container
to fix that little bit!

And that’s just the start of it!
the lovely people over at
have a really good tutorial on how
you can do lots lots more

frontend (CSS)
frameworks
unsemantic

works in a similar way to ﬂexbox but
(I think) it is a lot easier to use
http://unsemantic.com/

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<link rel="stylesheet" href="style.css"> 
<link rel="stylesheet"
href="unsemantic-grid-responsive-
tablet.css"> 
</head> 
<body> 
 
<main> 
 
</section> 
 
<p>Lorem ipsum …</p> 
</section> 
 
</section> 
 
</main> 
 
</body> 
</html>
add the unsemantic style sheet to
your html

body { 
} 
 
main { 
height: 500px; 
} 
 
#cont1 { 
 
} 
#cont2 { 
 
} 
 
#cont3 { 
}
and this is our css…lets
not touch it again!!!

we’re going to use the CSS that
is already made for us by
unsemantic from this point
quick game
1. open up the unsemantic css file
2. cry
3. close it and never open it again

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<link rel="stylesheet" href="style.css"> 
<link rel="stylesheet" href="unsemantic-
grid-responsive-tablet.css"> 
<meta 
name="viewport" 
content=" 
width=device-width, 
initial-scale=1, 
minimum-scale=1, 
maximum-scale=1" 
/> 
</head>
step 1 - add this line inside your
<head>
This saves <head>aches later on!

<body> 
 
<main class="grid-container"> 
 
<section id="cont1"> 
</section> 
 
<p>…</p> 
</section> 
 
</section> 
 
</main> 
 
</body>
step 2 - content that we want inside a
grid must live inside a grid container
class

<body> 
 
 
<section class=“grid-33” id=“cont1”> 
</section> 
 
<section class=“grid-33” id="cont2"> 
<p>…</p> 
</section> 
 
</section> 
 
</main> 
 
</body>
step 3- we give our columns a class
that corresponds to the % width
that we want them to be

step 4- if you want a margin you
need to use grid-parent and
next your items
… 
<section class="grid-25" id="cont1"> 
<p>…</p> 
</section> 
 
<div id="subsection" class="grid-50
grid-parent"> 
<section class="grid-90 sufﬁx-5
preﬁx-5" id="cont2"> 
 
</section> 
</div> 
 
<section class="grid-25" id="cont3"> 
<p>…</p> 
</section>

(slightly) responsive out of the
box but we can make this even
better
 
<section class="grid-33 tablet-grid-50
mobile-grid-100" id="cont1"> 
 
<p>…</p> 
</section> 
 
 
 
<p>…</p> 
 
</section> 
 
 
<p>…</p> 
</section> 
 
</main>

(slightly) responsive out of the
box but we can make this even
better
<section class="grid-33 tablet-grid-50 mobile-grid-100" id="cont1">
normal size
size on a
tablet
size on a
mobile

same as before…there are lots of
other things that you can do with
this framework as well!
Have a look at the unsemantic
website for more

recap
what are frameworks
types of frameworks
frontend (CSS) Frameworks
flex box
unsemantic

CSS Frameworks

More Related Content

What's hot

Similar to CSS Frameworks

More from Mike Crabb

Recently uploaded

CSS Frameworks