CSS frameworks provide standardized code to aid in website development. This document discusses two types of frameworks - frontend frameworks that affect the user interface, and backend frameworks that affect website logic and operation. It focuses on Flexbox and Unsemantic, two popular CSS frontend frameworks. Flexbox uses flex containers and items to lay out page sections in rows or columns. Unsemantic provides predefined grid classes to lay out content without custom CSS. The document provides code examples of using these frameworks to create a three-column layout with colored sections of varying sizes.
4. a standardised set of concepts,
practices and criteria for dealing
with a common type of problem
a package made up files and
folders of standardised code to aid
in the development of websites
In general
In web design
7. Grid SYstem
and have a layout system that we
can call on to do all the hard work
for us
8. “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”
12. frontend(client Side)
These are frameworks that effect the
overall look and feel of the website - the
user interface
flexbox
not really a
framework but its
still quite cool
15. frontend frameworks usually consist
of a package with several files for
standardising our code.
1. CSS Source to create a grid
2. Typography and style definitions
3. Solutions for browser incompatibility
4. Creation of standard classes
16. lots (and lots and lots) exist that you
can use!
http://usablica.github.io/front-end-frameworks/compare.html
17. we’re going to look at the first in this
list
1. CSS Source to create a grid
2. Typography and style definitions
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!
19. • 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 flex container is used to
contain all of our flex items
flex box
20. Overall compatibility is quite good.
IE is still annoying…
Compatibility
http://caniuse.com/#feat=flexbox
23. body {
background-color: cornflowerblue;
}
main {
max-width: 960px;
margin-right: auto;
margin-left: auto;
height: 400px;
background-color: aliceblue;
display: flex;
display: -webkit-flex /*Safari */
}
.container{
background-color: gold;
height: 100px;
width: 100px;
}
set display to flex, this means that
all child elements will be affected
24. body {
background-color: cornflowerblue;
}
main {
max-width: 960px;
margin-right: auto;
margin-left: auto;
height: 400px;
background-color: aliceblue;
display: flex;
display: -webkit-flex /*Safari */
flex-direction: XXXXXXX
}
.container{
background-color: gold;
height: 100px;
width: 100px;
}
set the direction that we want the
elements to go in
row row-reverse
column column-reverse
25. body {
background-color: cornflowerblue;
}
main {
max-width: 960px;
margin-right: auto;
margin-left: auto;
height: 400px;
background-color: aliceblue;
display: flex;
display: -webkit-flex /*Safari */
flex-direction: row;
}
.container{
background-color: gold;
height: 100px;
width: 100px;
}
we’ll stick with row,
this is also the default one
26. body {
background-color: cornflowerblue;
}
main {
max-width: 960px;
margin-right: auto;
margin-left: auto;
height: 400px;
background-color: aliceblue;
display: flex;
flex-direction: row;
justify-content: XXXXX ;
}
.container{
background-color: gold;
height: 100px;
width: 100px;
}
Set the justification of the content
flex-start
centre
flex-end
space-around
space-between
27. body {
background-color: cornflowerblue;
}
main {
max-width: 960px;
margin-right: auto;
margin-left: auto;
height: 400px;
background-color: aliceblue;
display: flex;
flex-direction: row;
justify-content: space-between ;
}
.container{
background-color: gold;
height: 100px;
width: 100px;
}
lets go for space between, and aim
for a generic 3 column layout
28. …
<body>
<main>
<section class="container" id="cont1">
<h2>Section 1</h2>
</section>
<section class="container" id="cont2">
<h2>Section 2</h2>
</section>
<section class="container" id="cont3">
<h2>Section 3</h2>
</section>
</main>
</body>
… we can also change individual items,
give them ids first
29. …
.container{
height: 100px;
width: 100px;
}
#cont1 {
background-color: gold;
}
#cont2 {
background-color: silver;
}
#cont3 {
background-color: saddlebrown;
}
…
and lets change their colours to be
different to make it easier to see
30. .container{
height: 100px;
width: 100px;
}
#cont1 {
background-color: gold;
order: 2;
}
#cont2 {
background-color: silver;
order: 3;
}
#cont3 {
background-color: saddlebrown;
order: 1;
}
we can change the order
31. .container{
height: 100px;
flex-grow: 1;
}
#cont1 {
background-color: gold;
order: 2;
}
#cont2 {
background-color: silver;
order: 3;
}
#cont3 {
background-color: saddlebrown;
order: 1;
}
use flex-grow to make all columns
the same size
40. body {
background-color: cornflowerblue;
}
main {
max-width: 960px;
margin-right: auto;
margin-left: auto;
height: 500px;
background-color: aliceblue;
}
#cont1 {
background-color: gold;
}
#cont2 {
background-color: silver;
}
#cont3 {
background-color: saddlebrown;
}
and this is our css…lets
not touch it again!!!
41. 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
42. <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!
43. <body>
<main class="grid-container">
<section id="cont1">
<h2>Section 1</h2>
<p>Lorem ipsum…</p>
</section>
<section id="cont2">
<h2>Section 2</h2>
<p>…</p>
</section>
<section id="cont3">
<h2>Section 3</h2>
<p>Lorem ipsum…</p>
</section>
</main>
</body>
step 2 - content that we want inside a
grid must live inside a grid container
class
44. <body>
<main class="grid-container">
<section class=“grid-33” id=“cont1”>
<h2>Section 1</h2>
<p>Lorem ipsum…</p>
</section>
<section class=“grid-33” id="cont2">
<h2>Section 2</h2>
<p>…</p>
</section>
<section class=“grid-33” id="cont3">
<h2>Section 3</h2>
<p>Lorem ipsum…</p>
</section>
</main>
</body>
step 3- we give our columns a class
that corresponds to the % width
that we want them to be
46. step 4- if you want a margin you
need to use grid-parent and
next your items
…
<section class="grid-25" id="cont1">
<h2>Section 1</h2>
<p>…</p>
</section>
<div id="subsection" class="grid-50
grid-parent">
<section class="grid-90 suffix-5
prefix-5" id="cont2">
<h2>Section 2</h2>
<p>Lorem ipsum…</p>
</section>
</div>
<section class="grid-25" id="cont3">
<h2>Section 3</h2>
<p>…</p>
</section>
49. (slightly) responsive out of the
box but we can make this even
better
<main class="grid-container">
<section class="grid-33 tablet-grid-50
mobile-grid-100" id="cont1">
<h2>Section 1</h2>
<p>…</p>
</section>
<section class="grid-33 tablet-grid-50
mobile-grid-100" id="cont2">
<h2>Section 2</h2>
<p>…</p>
</section>
<section class="grid-33 tablet-grid-100
mobile-grid-100" id="cont3">
<h2>Section 3</h2>
<p>…</p>
</section>
</main>
50. (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