CSS
How to style your own website easily by using CSS other people spend ages making.
Roadmap
Part 1
Intro to HTML / CSS
Part 2
Frameworks
Part 3
Examples
Part 4
????
1. What is HTML / CSS?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to my first webpage!</h1>
</body>
</html>
CSS
body {
background-color: #ee6e73;
color: black;
font-family: monospace;
}
h1 {
color: white;
}
2. CSS that other people make
a.k.a Frameworks
A CSS framework is a pre-prepared software framework that is meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language.
2. Frameworks
A CSS framework is a collection of CSS (and sometimes JS) files that make it easier to keep web pages styled consistently.
Bootstrap
Bulma
Materialize CSS
An Example Website
Small "About Me" website.
Contains basic details about myself.
Provides a contact form.
Has to look nice. (I'm shallow like that)
Step 1. HTML only
<!DOCTYPE html>
<html lang="en">
<head>
<title>All about me!</head>
</head>
<body>
<h1>Freya Broderick</h1>
<h2>Education</h2>
<ul>
<li>BSc Computer Science, UCC</li>
<li>MSc in Pizza, School of NetSoc</li>
<li>PhD in Giving Hugs, School of Life</li>
</ul>
<h2>Work Experience</h2>
<ul>
<li>SysAdmin, UCC NetSoc</li>
<li>Programmer, in general</li>
</ul>
<h2>Contact Me</h2>
<form>
<label for="name">Your Name:</label><input type="text" id="name" name="name" />
<label for="message">Message:</label><textarea id="message" name="message"></textarea>
<input type="submit" />
</form>
</body>
</html>
Step 2. Let's add Bulma
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>All about me!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
</head>
Step 3. Titles
<h1 class="title">Freya Broderick</h1>
...
<h2 class="title">Education</h2>
...
<h2 class="title">Work Experience</h2>
...
<h2 class="title">Contact Me</h2>
...
Step 4. Container
<body>
<div class="container">
<h1>Freya Broderick</h1>
...
</div>
</body>
Step 5. Form
<form>
<div class="field">
<label class="label" for="name">Your Name:</label>
<div class="control">
<input class="input" type="text" id="name" name="name" />
</div>
</div>
<div class="field">
<label class="label" for="message">Message:</label>
<div class="control">
<textarea class="textarea" id="message" name="message"></textarea>
</div>
</div>
<input class="button is-primary is-pulled-right" type="submit" />
</form>
Step 6. Content
<h1 class="title">Freya Broderick</h1>
<div class="content">
...
</div>
<h2 class="title">Education</h2>
<div class="content">
...
</div>
<h2 class="title">Work Experience</h2>
<div class="content">
...
</div>
Bulma
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>All about me!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
</head>
<body>
<div class="container">
<h1 class="title">Freya Broderick</h1>
<h2 class="title">Education</h2>
<div class="content">
<ul>
<li>BSc Computer Science, UCC</li>
<li>MSc in Pizza, School of NetSoc</li>
<li>PhD in Giving Hugs, School of Life</li>
</ul>
</div>
<h2 class="title">Work Experience</h2>
<div class="content">
<ul>
<li>SysAdmin, UCC NetSoc</li>
<li>Programmer, in general</li>
</ul>
</div>
<h2 class="title">Contact Me</h2>
<form>
<div class="field">
<label class="label" for="name">Your Name:</label>
<div class="control">
<input class="input" type="text" id="name" name="name" />
</div>
</div>
<div class="field">
<label class="label" for="message">Message:</label>
<div class="control">
<textarea class="textarea" id="message" name="message"></textarea>
</div>
</div>
<input class="button is-primary is-pulled-right" type="submit" />
</form>
</div>
</body>
</html>
Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>All about me!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
</head>
<body>
<div class="container">
<h1 class="title">Freya Broderick</h1>
<h2 class="title">Education</h2>
<div class="content">
<ul>
<li>BSc Computer Science, UCC</li>
<li>MSc in Pizza, School of NetSoc</li>
<li>PhD in Giving Hugs, School of Life</li>
</ul>
</div>
<h2 class="title">Work Experience</h2>
<div class="content">
<ul>
<li>SysAdmin, UCC NetSoc</li>
<li>Programmer, in general</li>
</ul>
</div>
<h2 class="title">Contact Me</h2>
<form>
<div class="field">
<label class="label" for="name">Your Name:</label>
<div class="control">
<input class="input" type="text" id="name" name="name" />
</div>
</div>
<div class="field">
<label class="label" for="message">Message:</label>
<div class="control">
<textarea class="textarea" id="message" name="message"></textarea>
</div>
</div>
<input class="button is-primary is-pulled-right" type="submit" />
</form>
</div>
</body>
</html>
Materialize CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>All about me! (Materialize)</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<h1>Freya Broderick</h1>
<h2>Education</h2>
<ul class="collection">
<li class="collection-item">BSc Computer Science, UCC</li>
<li class="collection-item">MSc in Pizza, School of NetSoc</li>
<li class="collection-item">PhD in Giving Hugs, School of Life</li>
</ul>
<h2>Work Experience</h2>
<ul class="collection">
<li class="collection-item">SysAdmin, UCC NetSoc</li>
<li class="collection-item">Programmer, in general</li>
</ul>
<h2>Contact Me</h2>
<form>
<div class="input-field">
<input type="text" id="name" name="name" />
<label for="name">Your Name</label>
</div>
<div class="input-field">
<textarea class="materialize-textarea" id="message" name="message"></textarea>
<label for="message">Message</label>
</div>
<input class="btn teal lighten-1 right" type="submit" />
</form>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
X1. Grid System
Most, if not all, CSS Frameworks come with a row and column based grid system.
Using this, you can create responsive layouts that take up x/12 of the width allowed at all times.
X1. Grid System
X1. Grid System
<div class="container">
...
<div class="columns">
<div class="column is-5">
<h2 class="title">Education</h2>
...
</div>
<div class="column is-7">
<h2 class="title">Work Experience</h2>
...
</div>
</div>
...
</div>
Other Things You Can Expect
Alerts / Notifications
Cards / Panels
Navbars / Tabs
And More!
4. ????
Isn't this all a hell of a lot of work for people?
4. CSS Preprocessors
Well what if we could do programming stuff in CSS?
4. CSS Preprocessors
4. Sass
Syntactically Awesome Style Sheets
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
What Can It Do?
Variables:
$color: #002366;
Imports:
@import "other";
Maths:
width: 600px/960px * 100%;
More:
Arrays, Dictionaries, Loops, Nesting
Let's Make A Rainbow; HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Sassy Rainbow</title>
</head>
<body>
<div class="stripe is-red"></div>
<div class="stripe is-orange"></div>
<div class="stripe is-yellow"></div>
<div class="stripe is-green"></div>
<div class="stripe is-blue"></div>
<div class="stripe is-indigo"></div>
<div class="stripe is-violet"></div>
</body>
</html>
Let's Make A Rainbow; SCSS
// Normal CSS Works here too
* {
margin: 0;
padding: 0;
}
// Define the colours in a map
$stripes: (
"red": #F00,
"orange": #FF7F00,
"yellow": #FF0,
"green": #0F0,
"blue": #00F,
"indigo": #4B0082,
"violet": #9400D3,
);
// Define the colour bands
.stripe {
height: calc(100vh / 7);
text-align: center;
p {
color: white;
}
// For loop for defining the colour schemes
@each $name, $color in $stripes {
&.is-#{$name} {
background-color: #{$color};
}
}
}
Let's Break It Down; Maps
// Define the colours in a map
$stripes: (
"red": #F00,
"orange": #FF7F00,
"yellow": #FF0,
"green": #0F0,
"blue": #00F,
"indigo": #4B0082,
"violet": #9400D3,
);
Let's Break It Down; Nesting
// Define the colour bands
.stripe {
height: calc(100vh / 7);
text-align: center;
p {
color: white;
}
}
Let's Break It Down; Nesting
.stripe {
height: calc(100vh / 7);
text-align: center;
}
.stripe p {
color: white;
}
Let's Break It Down; Loops
// Define the colour bands
.stripe {
...
// For loop for defining the colour schemes
@each $name, $color in $stripes {
&.is-#{$name} {
background-color: #{$color};
}
}
}
Putting it all together
# Install Sass
gem install sass # Ruby
npm install -g sass # JS
brew install sass/sass/sass # Dart
# Compile the SCSS into CSS
sass rainbow.scss rainbow.css
Putting it all together
<head>
<title>A Sassy Rainbow</title>
<link href="rainbow.css" rel="stylesheet" />
</head>
What are your questions?
your_questions.each do |question|
self.answer question
end