opacity: 1;
rgba(255, 0, 0, 1);
Intermediate HTML/CSS &
Intro to Responsive Design
Welcome!
Wifi Info
Network:
Password:
Download workshop files here
Thanks to our host Codesmith
All slides are available at:
https://erindepew.github.io/gdi-featured-html-css-intermediate/#/We will be building a profile site from scratch
Workshop Files
Workshop Files
- Sample images
- Blank index.html file
- Completed demo site as reference
Folder Structure
We've set up the folder structure for the site today to reflect common practices used.
HTML & CSS
Tools for Web Development
Tools for Web Development
- HTML creates the basic structure and content
- CSS creates the presentation layer
- JavaScript adds responsiveness and interactivity
HTML & CSS
HTML5 & CSS3
What's the Difference?
- Refers to latest version of HTML and CSS from the W3C
- Made a lot of languages and hacks obsolete (e.g. Flash) by replacing with native functionality
- Unless specified, HTML & CSS refers to latest versions
Where's HTML6 & CSS4?
- CSS2.1 and HTML4 were monoliths and browsers were fixed versions
- W3C now specs out features instead of everything at once (e.g. level 4 selectors)
- Browsers have become "evergreen" and will support latest features on a rolling basis
- Check for support on a per feature basis
CSS
Reset CSS
Different browsers display HTML elements differently
A reset file returns all HTML elements to a baseline style
Examples include:
- Bulleted lists like this one have standard bullets
- Paragraphs & headings have default padding
- Links are blue and underlined
Reset CSS Examples
Most elements:
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
Lists:
list-style: none;
Vendor Prefixes
- Not usually needed for evergreen browsers (Chrome, Firefox, and Safari)
- Flags the property as a work-in-progress, removed once globally supported
- Most modern dev shops handle prefixes with preprocessors and polyfills
Vendor Prefixes
Each browser has their own:
- Chrome:-webkit-
- Firefox:-moz-
- Safari:-webkit-
- Opera:-o-
Using Prefixes
.hero img {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}Order matters! The non-prefixed version should always go last.
NOTE:
While you should always use the vendor prefixes when writing code, today we're just going to use the non-prefixed property.
This is to save time during the code exercises
Standardizing User Experience
- Screen sizes vary from device to device
- Mobile means displaying content on landscape and portrait mode
- Different screen sizes mean different resolutions (e.g. fonts appear smaller on retina)
- Different devices have different GPU speeds, bandwidth, and "native" capabilities
Fixed vs. Fluid Layout: Fixed*
- Container has a set width (usually 960px to 1024px)
- Elements have a set width or percentage width
- Site remains the same layout no matter the screen size
* not recommended for professional web development
Fixed vs. Fluid Layout: Fluid
- Element widths and heights are percentages
- Elements also have min and max widths (for sanity)
- Adjusts to different screen widths and resolutions
HTML
HTML5 Doctype
<!DOCTYPE html>
Minimum information required to ensure that a browser renders using standards mode
Old Doctypes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Semantic Elements
- 2001: Semantic Web discussion to enable software "web agents" to find, filter, and correlate unrelated websites for the benefit of the user
- Today: Aides web crawlers, search engines, and (most importantly) screen readers "read" a web page
- Reference for semantic elements available in HTML5
<section>
- Groups together thematically related content
- Similar to prior use of the div, but div has no semantic meaning
<header>
- Container for a group of introductory or navigational aids
- Document can have multiple header elements
<nav>
- Contains major navigational information
- Usually a list of links
- Often lives in the header
<footer>
- Contains information about its containing element
- Document can have multiple footer elements
<aside>
- Tangentially related content
<article>
- Self-contained related content
Unusual Content
Technically, you can name an element anything:
But you should use a div with a semantic class name
Break Time
HTML Structure
Remember, it's squares all the way down
HTML Structure
Even when we break the grid
Tools for Layouts
Developer plugin to view the internet like a web crawler
CSS grid new spec for complex layouts without flexbox
Let's Develop It
- Use semantic HTML elements to layout the site
- Refer to the completed project for hints
Horizontal Fixed Nav
Fixed Nav (aka "sticky nav")
This is a very popular UX for navigation because:
- Horizontal fixed-to-top nav allows users to have access to navigational elements at all times
- Works well on mobile where pages can be much longer and context isn't always readily available
However, can often take up valuable screen real-estate and require complicated loading scripts for different devices
Fixed Nav: HTML
Fixed Nav: CSS
nav {
position: fixed;
top: 0;
left: 0;
background: #fafafa;
border-bottom: 2px solid #ccc;
height: 70px;
width: 100%;
}Fixed vs Absolute vs Relative
- Relative: relative to it's normal position
- Absolute: relative to it's nearest (non
position: static) parent - Fixed: relative to the viewport
position property in action
Sticky
- New property for common mobile UX
- Not supported on Opera mini and IE
Fixed Nav: CSS
position: fixed means we need to move the body content down in order to prevent the navigation from overlapping
body {
padding-top: 70px;
}
nav {
position: fixed;
top: 0;
left: 0;
background: #fafafa;
border-bottom: 2px solid #ccc;
height: 70px;
width: 100%;
}Fixed Nav: CSS
Align navigation elements and increase click area*
nav {
position: fixed;
top: 0;
left: 0;
background: #fafafa;
border-bottom: 2px solid #ccc;
height: 70px;
width: 100%;
}
nav li {
float: left;
width: auto;
}
nav li a {
padding: 25px 10px;
display: block;
}
* The recommended minimum click area is 44x44px for accessibility, for more standards check out Web Accessibility Initiative
Box Model
Fixed Nav: Adding a brand logo
We can use an
H1 with text replacement to display our logo
Fixed Nav: Text replacement & H1s
.brand {
color: transparent;
background: url(../images/z.png) no-repeat top left;
height: 60px;
width: 60px;
float: left;
margin: 5px;
}
nav ul {
float: right;
width: auto;
} Why Text Replacement?
- If CSS doesn't load - the title will still be visible to the browser.
- If a user is using a screen reader - the title of the site will be readable to them
- Improves SEO of our site
Fixed Nav: Container
We also need to account for large monitors, let's control the width of our page with a container
Fixed Nav: Container
Let's give the container a fixed width and see what happens.
.container {
width: 1024px;
margin: 0 auto;
}Develop It!
Let's make some small tweaks to the navigation
- Remove the underlines on the links with
text-decoration - Change the color of the links
- Try adding a background color on hover
Break Time
Hero Section
What is a Hero?
- Large banner image
- First impression of a site used to display the most important information
- Often consists of image and text, can be static or dynamic
Hero Examples
Hero: HTML
<section class="hero">
IMA Zebra
Africa
</section> Hero: CSS
.hero {
background: url(../images/zebra.jpg) no-repeat top left;
color: #fafafa;
text-align: center;
height: 350px;
padding: 25px 0;
}
Remember our Box Model. Padding adds to the height & width of elements.
So the height of our hero will be
400px
Hero: Profile Image
.hero img {
width: 150px;
}Border-radius
Border-radius
20px radius on all corners
.hero img {
border-radius: 20px;
}
Border-radius
10px radius on top left & bottom right
40px on top right & bottom left
.hero img {
border-radius: 10px 40px;
}
Border-radius
10px radius on top left
20px radius top right
40px radius bottom right
80px radius bottom left
.hero img {
border-radius: 10px 20px 40px 80px;
}
Border-radius
50% radius on all corners
.hero img {
border-radius: 50%;
}
Background-size
Background-size
.hero {
background: url(../images/zebra.jpg) no-repeat top left;
color: #fafafa;
text-align: center;
height: 350px;
padding: 25px 0;
background-size: cover;
}
cover scales the image to the largest size such that both its width and its height can fit inside the content area.
Develop It!
Let's make some small tweaks to the Hero
- Move the image down from the top
- Adjust the font size of the header
- Add a border to the span
3-column Layout
Why 3 Columns?
Commonly used layout due to:
- Flexibility
- Readability
- Visually pleasing layout with centered content
3 Column: HTML
<section class="main-content">
...
<section class="column">
<img src="images/africa.png" alt="Africa">
<h4>My Home</h4>
<p>Wild zebras live in Africa.</p>
<a href="home.html" class="btn">See my home</a>
</section>
<!-- Repeat .column x3 -->
</section> 3 Column: CSS
.column {
float: left;
width: 30%;
padding: 15px;
} 100% width / 3 columns = 30% column width
3 Column: Images
Images won't scale with the columns, because they ignore constraints like
div width, unless you tell them to do so.
.column img {
width: 90%;
max-width: 90%;
border-radius: 50%;
}3 Column: Container
Make sure the columns are inside of our container div in order to preven them from stretching too far
Why not wrap everything in a separate container?
Because DRY: Don't Repeat Yourself
Develop It!
Let's make some small tweaks to the columns
- Adjust the font size of the main header of the content area
- Adjust the font size of the headers in the columns - try changing their colors too
- Add a border to the images to make them stand out a bit more
End of Day #1
SVG Graphics
SVG vs JPEG vs PNG vs GIF?
Every image file format has their advantages and disadvantages, but general rule of thumb:
- JPEG: Photos and color heavy images, widely supported and light-weight
- PNG: Images with sharp lines, editable and transparency
- GIF: Lightweight alternative to video format
- SVG: Single color images, dynamic rendering, lossless scaling, tiny file size, only supported on web
SVG
Use Adobe Illustrator, or another vector program, to create a high quality image.
Save it as a .svg file.
Compress the svg file for web using SVGOptimizer
SVG
Image source:
SVG
Embed:
SVG
Background image:
.logo {
display: block;
color: transparent;
width: 100px;
height: 82px;
background: url(logo.svg);
background-size: 100px 82px;
}Social Links: HTML
</section> class="social">
<ul>
<li>
<a href="..">
<img src="images/facebook.svg" alt="Facebook" />
</a>
</li>
<!-- Repeat for all social links you want to include -->
</ul>
</section>
Social Links: CSS
.social {
background: #57BEC5;
color: #fafafa;
padding: 25px 0;
overflow: hidden;
}
.social li {
float: left;
width: auto;
padding: 20px;
}Centering the List
First we should put our social links in a container! We'll also add in a headline.
<section id="social">
<div class="container">
<h3>...</h3>
<ul>
...
</ul>
</div>
</section>Next we'll center the
ul with a very flexible technique that will allow us to have a list of any width
Develop It!
- Style the headline using the Descendant Selector
- If you have Illustrator or another program to modify .svg graphics, change the colors to match your site
@font-face
Web Typography
Very broad topic with lots of exciting developments: Web Typography & Layout: Past, Present, and Future
But for today, we're just going to focus on how to use them
Google Fonts
Professional sites will often have custom designed fonts hosted on their own servers
For the rest of us, Google offers free, web-optimized, hosted fonts
Google Fonts
In our example, we've used Lato for the body and Bree Serif for the headlines
Using Google Fonts
- Search the hundreds of font families, then add them to your collection.
- Compare and refine the collection - think about what styles you NEED.
- Grab the code that Google prepares for you and add it to your site
@import url(http://fonts.googleapis.com/
css?family=Lato:300,400,700,300italic,400italic|Bree+Serif);
Using Google Fonts
body{
font-family: 'Lato', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Bree Serif', serif;
}
Develop It!
- Choose your fonts from Google fonts
- Adjust the
font-sizeandline-height
rgba colors & opacity
rgba Colors & Opacity
- hexadecimal #0000FF
- rgb(0, 0, 255)
rgba Colors & Opacity
rgba = Red Green Blue Alpha
Alpha controls the alpha channel of a color, aka the opacity
opacity controls the opacity of an element
Opacity is always a decimal value from 0 (transparent / not visible) - 1 ( fully visible)
rgba colors & opacity
opacity: .8;
rgba(255, 0, 0, .8);
opacity: .6;
rgba(255, 0, 0, .6);
opacity: .4;
rgba(255, 0, 0, .4);
opacity: .2;
rgba(255, 0, 0, .2);
opacity: .1;
rgba(255, 0, 0, .1);
Develop It!
- Change some colors to have alpha transparency or opacity.
- Use http://hex2rgba.devoth.com/ to convert HEX to RGBA.
- Try making the navbar 80% opaque.
Text Shadow
text-shadow
#example1 { text-shadow: 2px 2px 10px red; }
#example2 {
text-shadow: 1px 1px 10px red,
10px 10px 10px orange,
15px 15px 10px yellow,
20px 20px 10px green,
25px 25px 10px blue,
30px 30px 10px purple;
}lorem ipsum
lorem ipsum
Box Shadow
box-shadow
box-shadow: offset-x offset-y color
.example1 { box-shadow: 5px 5px red; }
box-shadow
box-shadow: offset-x offset-y blur spread color
.example { box-shadow: 0 0 5px 5px red; }
box-shadow
box-shadow: offset-x offset-y blur spread color
.example { box-shadow: 0 2px 5px 0px red; }
Develop It!
- Add shadows to your text
- Remember: Be subtle!
- Add a box-shadow to the nav
Break Time
CSS Gradients
Linear gradients
.linear-example1 {
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
.linear-example2 {
background-image: linear-gradient(right, red, orange, yellow, green, blue, indigo, violet);
}
.linear-example3 {
background-image: linear-gradient(bottom right, red, orange, yellow, green, blue, indigo, violet);
}Linear gradients
.linear-example4 {
background-image: linear-gradient(red, white);
}
.linear-example5 {
background-image: linear-gradient(right, red, white);
}
.linear-example6 {
background-image: linear-gradient(bottom right, red, white);
}Radial gradients
.radial-example1 {
background-image: radial-gradient(circle cover, red, orange, yellow, green, blue, indigo, violet);
}
.radial-example2 {
background-image: radial-gradient(0 0, circle, red, orange, yellow, green, blue, indigo, violet);
}
.radial-example3 {
background-image: radial-gradient(0 50%, circle, red, orange, yellow, green, blue, indigo, violet);
}Radial gradients
.radial-example4 {
background-image: radial-gradient(circle cover, red, white);
}
.radial-example5 {
background-image: radial-gradient(0 0, circle, red, white);
}
.radial-example6 {
background-image: radial-gradient(0 50%, circle, red, white);
}CSS Gradient Generator
Ultimate CSS Gradient GeneratorDevelop It!
- Add a background gradient to a section of your site
Transitions
Transitions
Why CSS vs JS Transitions?
- Faster, smoother performance because of hardware acceleration
- Simpler for small transitions, animations and transforms
- Can't control attributes independently, for large animations takes time for browser to set up GPU "slices"
- Experimental Web Animation API may resolve these issues
Transition Triggers
- Hover
- Mouse click
- Focus state
- Active state
- Changes to the element
Transition Properties
- transition-property
- transition-duration
- transition-delay
- transition-timing-function
transition-property
The names of CSS properties that should be transitioned
.example1 { transition-property: background-color; }
Set to all to transition all CSS properties
.example2 { transition-property: all; }
transition-property
transition-duration
The number of seconds or milliseconds a transition animation should take to complete
.example1 { transition-duration: 2s; }
transition-delay
delay transitions from the moment a trigger happens
.example1 { transition-delay: 0s; }
.example2 { transition-delay: 1s; }
.example3 { transition-delay: 2s; }
.example4 { transition-delay: 3s; }3
2
1
0
transition-timing-function
determines how intermediate values are calculated
.example { transition-timing-function: ease; }ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier
That's a lot to remember right?
Lucky for us, someone has created a tool that makes our lives easier.
Develop It!
- Pick a transition property and apply it to an element.
- Hint: The transition will only work if it has a pseudo class, like :hover
Break Time
Transforms
Transform: Scale
scales the element
transform: scale(sx[, sy]);
scale(2);
scale(0.5);
scale(1, 0.5);
scale(0.5, 1);
Transform: Rotate
rotates the element degrees around its origin
transform: rotate(angle);
rotate(45deg);
rotate(-45deg);
rotate(-90deg);
rotate(180deg);
Transform: Translate
move element using x and y coordinates
transform: translate(ax[, ay]);
translate(20px);
translate(0, 20px);
translate(-20px, 20px);
Transform-origin
the x and y origin for transformation
transform-origin: x-offset y-offset;
transform-origin(top, left)
transform-origin(50%, 50%)
transform-origin(0, 50px)
Develop It!
- Pick a transform property and apply it to an element.
- Hint: The transforms, like transitions, will only work if the element has a pseudo class, like :hover
- Extra Credit: Use it with transition to make the transform smoother.
Responsive Web Design (RWD)
What is it?
RWD is a design approach that suggests that the design & development of a site should respond to the user's behavior and environment.
Mobile First => Mobile Only
- 91% of U.S. Citizens have their smart phone within reach 24/7
- Smartphone users check their phones an average of 74 times a day
- 10% of mobile users in the U.S. are mobile only users
The Mobile/Tablet/Desktop Myth
RWD Principles
RWD allows for every user to have access to the same content
RWD A Brief History
- In 2010, Ethan Marcotte coined the term in an article on A List Apart
- 2013 was called "The Year of Responsive Web Design" because it was and still is a cost effective alternative to mobile apps
- Today, responsive web design is a minimum requirement for products
The Ingredients of RWD
- Flexible design
- Fluid grids
- Flexible images
- CSS Media Queries
Fluid Grids
With fixed-width sites, we have to adjust the height and width of elements manually.
With fluid grids, the height and width of elements is dependent upon the device height and width.
Fluid Grids
- Define a maximum width for the container
- Divide the content up into a set of columns (usually 12)
- Design elements with proportional widths and heights instead of specific pixel dimensions
- Device width changes, then the grids change in width to scale with the device
Flexible Images
Images expand to the width of their parent
img {
max-width: 100%;
}Media Queries
Media queries apply certain CSS in certain situations, we can target
- Media type (print, screen...)
- Media features (touch, hover, screen width...)
- Combinations of types and features (not, only, and...)
Media Queries
Media queries should come last because they will overwrite other styles in the cascade
#header-image CSS
Larger image for screens > 1200px wide
Hide image for print media
Standard Media Queries
Device width >= 320px and < 480px
/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}Device width >= 768px and < 1024px and orientation landscape
/* iPads (landscape)*/
@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}Progressive Enhancement
- Start with bare minimum of functionality and gradually enhance functionality
- Emphasizes content first
- Often used with "mobile first"
iPhone:
Tablet
Desktop
Viewport Meta
Use this to control the size of the viewport.
<meta name="viewport" content="width=device-width,
user-scalable=true;">Width=device-width makes the viewport the size of the device.
User-scalable=true allows the user to pinch and zoom on your site.
Let's develop it!
- Let's take a look at our site now on a phone (or you can resize your browser), and find ways to improve it.
- Add the viewport meta tag to the html.
- Use media queries to shift elements around on the page and to increase legibilty.
Retina Images
Retina screens have twice the pixel density than regular screens.
Requires two images: one for retina and one fore regular screens
Exception is SVG because it's a vector graphic
2x Media Queries
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}2x Images
Regular resolution icon
2x resolution icon
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.icon {
background-image: url(images/icon-2x.png) no-repeat 0 0;
background-size: 20px 20px;
}
}Break Time
Responsive Frameworks
Download a pre-built framework with built-in basic styles
- Fluid grids
- Flexible images
- Responsive media queries
- Lots of base styles like
.pull-right,.btn, etc.
Bootstrap
Foundation
What They Include
- Fully responsive out of the box
- Embraces mobile first standards
- Compiled CSS for all sorts of components
- SASS stylesheets for rapid updates
- Javascript for popular components
- Pre-set styles for icons and buttons
- Includes Glyphic icon set
And a Few New Ones...
Drawbacks of Using a UI Framework
- Default styles are ... default and not very exciting
- Requires hacks to make a unique looking site
- The documentation is daunting and can be very indimidating
- Frameworks add bloat and weight to site
- Difficult to refactor and switch to custom UI later on
SASS
What is a CSS Preprocessor?
CSS preprocessors transpile code
Sass => transpilation => CSS
What they do
- Mixins – Classes for classes.
- Parametric mixins – Classes to which you can pass parameters, like functions.
- Nested Rules – Classes within classes, which cut down on repetitive code
- Operations – Math within CSS
- Color functions – Edit your colors
- Namespaces – Groups of styles that can be called by references
- Scope – Make local changes to styles
- JavaScript evaluation – JavaScript expressions evaluated in CSS
Mixins
/* SASS */
@mixin rounded-corners(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#footer {
@include rounded-corners(10px);
}
/* CSS */
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}Nested Rules
/* SASS */
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/* CSS */
#header h1 {font-size: 26px;font-weight: bold;}
#header p {font-size: 12px;}
#header p a {text-decoration: none;}
#header p a:hover {border-width: 1px;}Functions
/* SASS */
@function lighten($color, $amount) {
//function code here
@return $hex-value
}
p {
color: lighten(@base, 5%);
}
/* CSS */
p {
color: #fff00;
}Variables
/* SASS */
$blue: #199FD9;
p {
color: $blue;
}
}
/* CSS */
p {
color: #199FD9;
}