+
- Intermediate HTML/CSS &
-
-
+
-
- Tell us who you are.
+ What do you hope to get out of this class?
-
-
@@ -117,43 +116,53 @@ 
-
-
-
-
-
-
-
-
+ 
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
+
-
-
-
@@ -360,82 +278,108 @@
-
-
-
-
-
+
+
+
+ 
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
-
+
+
+
+
+
+
- 
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ 
-
+
+
-
-
-
-
- 
-
-
-
-
+
@@ -971,41 +839,33 @@ If you have Illustrator or another program to modify .svg graphics, change the colors to match your site
-
-
-
-
-
-
-
- 
-
-
-
-
+
+
+
@@ -1095,48 +960,19 @@
-
-
-
-
-
-
-
+
+ 
+
+
+
-
+
+ 
+
+
-
-
- 
+
+
+ 
-
+
-
-
-
-
-
- 
- 
-
-
-
-
@@ -1621,33 +1465,34 @@
-
- Intermediate HTML/CSS & Intro to Responsive Design
+Intermediate HTML/CSS &
Intro to Responsive Design
Welcome!
@@ -58,58 +55,60 @@Wifi Info
Download workshop files here
Thanks to our host:
+Thanks to our host Codesmith
Class notes
-All slides are available at:
- http://girldevelopit.github.io/gdi-featured-intermediate-html-css/
All slides are available at:
+ https://erindepew.github.io/gdi-featured-html-css-intermediate/#/What we'll be covering in this class
-We'll be jumping into HTML/CSS right where the beginner class left off.
-We will not be going over the previous class, we just don't have the time!
+We will be building a profile site from scratch
Workshop files
+Workshop Files
Workshop files
-Last reminder to download the files for today's class!
+Workshop Files
-
-
- We have provided a folder that contains sample images for you to use today. We encourage you to be creative so don't feel like you're restricted to these images -
- We've also included a blank index.html file for you to work from, as well as the final site for you to use as a reference if you get stuck. +
- 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.
Cheat sheets
-We've provided a copy of the site you'll be building today with notes on how to break down the layout of the page.
-Common Applications
+HTML & CSS
Common Applications
-HTML & CSS are awesome, right?
-But how do people use them - really? -
Here's a few things we'll be covering today:
--
-
- Horizontal & fixed navigation -
- Heros with full bleed background images -
- Border-radius on images & elements -
- Custom font-faces -
- Three column layouts -
- Fancy buttons -
Standard Practices
-Standard Practices
--
-
- Reset CSS files -
- Standard widths and sizes -
- Containers for layout -
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
-Even though HTML is the structure and CSS is the design, some HTML elements have default styles
-Different browsers display these things differently. A reset gets rid of these inconsistencies.
+Different browsers display HTML elements differently
+A reset file returns all HTML elements to a baseline style
Examples include:
@@ -164,7 +173,7 @@Reset CSS
Reset CSS
+Reset CSS Examples
Most elements:
@@ -184,169 +193,78 @@ Reset CSS
Reset CSS
-We've done all the hard work for you! Instead of typing this out - we've included this in our example files.
-Standard widths and sizes
+Vendor Prefixes
-
-
- Screen sizes vary from computer to computer. Standardize your site on different screen sizes by defining specific widths. -
- Wrap your content in containers to control the max width it can span across a screen. -
- Keep in mind screen sizes also mean different font size display. -
- Retina screens have a higher pixel density and a larger resolution, so fonts appear smaller. +
- 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
Fixed vs. Fluid Width pages
-- Fixed -
+Vendor Prefixes
+Each browser has their own:
-
-
- Fixed websites have a set width for the wrapper, usually 960px to 1024px. -
- The elements inside the wrapper have a set width, or percentage of the wrapper width. -
- No matter the screensize, the user always sees the same size site. -
Fixed vs. Fluid Width pages
-- Fluid -
--
-
- Also referred to as a liquid layout. -
- Majority of the components, including the wrapper, have percentages for their widths. -
- The layout adjusts for the width of the user's screen resolution. -
- Sounds like a responsive site right!? More on that later. +
- + Chrome:-webkit- +
- + Firefox:-moz- +
- + Safari:-webkit- +
- + Opera:-o-
Containers
-Wrappers are a good way to center content if the screen width is wider than your content.
-
- .container {
- width: 100%; /* take up full viewport width */
- max-width: 1440px; /* if viewport is larger than 1440px,
- don't let it take up 100% */
- margin: 0 auto; /* center content in the viewport */
- }
--
-
- The container will take up 100% of the screen if the width of the viewport is less than 1440px. -
- If the viewport is wider than 1440px, it will reach it's max width, and become centered in the viewport. -
HTML5
-HTML 5: What is it?
-Formally, HTML5 is the W3C’s specification for the next version of HTML.
-Informally, people use "HTML5" to refer to a whole set of new web standards and abilities: -
-
-
- HTML5 -
- CSS3 -
- JavaScript -
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.
Quick History of HTML5
--
-
-
- 2004:"WHAT" Working group formed. (WHATWG)
-
-Members from Apple, Mozilla, & Opera set out to develop HTML5.
- -
- 2008:First version of HTML5 published
-
First draft is written, but changes are still coming. HTML5 is continually evolving.
-
- - - 2008:Firefox 3 becomes HTML5 compatable. -
- - Jan. 2010:YouTube now offers HTML5 video player. - - -
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
Okay, not that quick history of HTML5
+Standardizing User Experience
-
-
-
- - April 2010: Steve Jobs trashes Flash & bans it on all Apple devices in favor of HTML5. -
- - Dec. 2010: Chrome opens HTML5 web store. -
- - Sept. 2011: 34% of top 100 sites use HTML5 -
- - Sept. 2012: WC3 proposes stable release of HTML5 by end of 2014! -
- - Oct. 2014: Final and complete! +
- 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
What about the browsers?
-Percentage of HTML5 Elements supported:
+Fixed vs. Fluid Layout: Fixed*
-
-
- - Chrome 43: - 95% supported - -
- - Opera 29: - 94% supported - -
- - Firefox 38: - 84% supported - -
- - Safari 8: - 71% supported - -
- - Internet Explorer 11: - 60% supported - - +
- 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
So what's so cool about it?
-
- Too much to cover in our time together
-But here are some highlights:
-Marks some old things obsolete
- Examples +Fixed vs. Fluid Layout: Fluid
-
-
- Deprecated items (e.g.
-
frame, frameset, noframes)
- - Presentational elements and attributes replaced by CSS (e.g.
-
font, big, center)
+ - Element widths and heights are percentages +
- Elements also have min and max widths (for sanity) +
- Adjusts to different screen widths and resolutions
Redefines a few things
-Gives some old elements semantic meaning and separates them from presentation (e.g.
- b, i, strong, em)
HTML
HTML5 Doctype
<!DOCTYPE html>
+
Minimum information required to ensure that a browser renders using standards mode
Old Doctypes
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">New Structural Elements
+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 +
- 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 -
- E.g. one for the page, one for each section +
- 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 -
- E.g. site navigation +
- Contains major navigational information +
- Usually a list of links +
- Often lives in the header
<footer>
-
-
- Contains information about its containing element -
- E.g. who wrote it, copyright, links to related content, etc. -
- Document can have multiple footer elements -
- E.g. one for the page, one for each section +
- Contains information about its containing element +
- Document can have multiple footer elements
<aside>
-
-
- Tangentially related content -
- E.g. sidebar, pull quotes +
- Tangentially related content
<article>
-
-
- Self-contained related content -
- E.g. blog posts, news stories, comments, reviews, forum posts +
- 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 new HTML elements to layout the site -
- Refer to the example design for hints +
- Use semantic HTML elements to layout the site +
- Refer to the completed project for hints
Horizontal Fixed Nav
All the cool kids are doing it
+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 -
- All the rage these days -
- Be careful - screen heights vary, and it reduces the amount of content visible on smaller screens +
- 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
-Let's include it in a header, since we know we'll be grouping related content here.
Fixed Nav: CSS
-Remember, using fixed position is like using absolute position, except that it's fixed to the viewport, not the containing element.
-We also have to define a width for it, and its location.
nav {
position: fixed;
@@ -463,11 +405,27 @@ Fixed Nav: CSS
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
-Because we've fixed the nav to the top of the viewport, we need to bump the content of the
- body down to be visible to the user.
This should be the same, or more than, the height of the navigation bar.
+position: fixed means we need to move the body content down in order to prevent the navigation from overlapping
body {
padding-top: 70px;
@@ -484,8 +442,7 @@ Fixed Nav: CSS
Fixed Nav: CSS
-Now we need to get those list items next to each other instead of stacked.
-Let's float them to the left and add some padding to the links so they have a large clickable area.
+Align navigation elements and increase click area*
nav {
position: fixed;
top: 0;
@@ -504,15 +461,23 @@ Fixed Nav: CSS
display: block;
}
* The recommended minimum click area is 44x44px for accessibility, for more standards check out Web Accessibility Initiative
Fixed Nav: Adding a brand
+Box Model
+
+ Fixed Nav: Adding a brand logo
We can use an
- H1 with text replacement to include a brand, or logo, in the corner that will still work if images are turned off, making it accesible to screen readers.
H1 with text replacement to display our logo
Fixed Nav: Text replacement & H1s
-#brand {
+ .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;
@@ -540,43 +505,40 @@ Fixed Nav: Text replacement & H1s
Why Text Replacement?
- - If we turn the CSS off for this page - the title will still be visible to the browser.
- - If a user is coming to our site with a screen reader - the title of the site will be readable to them
- - Search engines ♥ it!
+ - 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
- Notice how the edge of the nav bumps up against the edge of the browser? Let's fix that by adding a container around it.
+ 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.
+ Let's give the container a fixed width and see what happens.
.container {
width: 1024px;
margin: 0 auto;
}
- Now wherever we use
- .container it will be 1024px wide and centered.
-
Develop It!
- Let's make some small tweaks to the navigation
+
Let's make some small tweaks to the navigation
- Remove the underlines on the links with
text-decoration
@@ -586,14 +548,18 @@ Develop It!
+
+ Break Time
+ 
+
Hero Section
What is a Hero?
- - Large banner image, prominently placed on a web page, generally in the front and center
- - First visual a visitor encounters on the site and its purpose is to present an overview of the site's most important content
+ - 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
@@ -619,158 +585,78 @@ Hero Examples
Hero: HTML
-Our Hero
- section should look a little something like this:
<section id="hero">
+ <section class="hero">
IMA Zebra
Africa
-</section>
- Hero: CSS
-Now is where the fun really happens!
-#hero {
- background: url(../images/zebra-hero.jpg) no-repeat top left;
- color: #fafafa;
- text-align: center;
-}
-Hero: CSS
-Let's give it a height and some padding too.
-#hero {
+ .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
+
Remember our Box Model. Padding adds to the height & width of elements.
+So the height of our hero will be
400px
Well, that was unexpected...
-Things that are wrong with this hero right now: -
-
-
- That image of your face is way to big! And it's not even a circle! -
- The background image is way too large -
- The headline is really tiny -
Hero: Profile Image
-Let's make the profile image a little smaller.
-We'll use CSS Targeting with the descendant selector to style the image.
-#hero img {
+ .hero img {
width: 150px;
}
- That should do it
Border Magic
-Turning squares into circles with magic!
-Okay, it's not really magic, it's just a bit of CSS3.
-Border-Radius
-Simply put, allows you to create rounded corners on boxes.
-Designers rejoice!
+Border-radius
Border-radius
-20px radius on all corners
-#hero img {
+ 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 {
+ 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 {
+ 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 {
+ 50% radius on all corners
+ .hero img {
border-radius: 50%;
}
Vendor Prefixes
-Vendor Prefixes
-HTML5 and CSS3 are still new!
-This is great, but it means that not all browsers treat new CSS3 properties the same
-Vendor Prefixes
-Flags it as a work-in-progress
-When finished, the browser should support the non-prefixed name
-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
-Back to our Hero!
+Background-size
Background-size
-Notice how the image is too large for the section? Let's fix that with a new property called
- background-size
-
#hero {
+ .hero {
background: url(../images/zebra.jpg) no-repeat top left;
color: #fafafa;
text-align: center;
@@ -779,13 +665,13 @@ Background-size
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 +
Let's make some small tweaks to the Hero
- Move the image down from the top
- Adjust the font size of the header @@ -794,135 +680,119 @@
Develop It!
3-column Content Area
+3-column Layout
Why 3 columns?
-Because 2 columns is so 2013
-Or, because it's a comfortable width for readability. And because 3 is a pleasing design construct.
+Why 3 Columns?
+Commonly used layout due to:
+-
+
- Flexibility +
- Readability +
- Visually pleasing layout with centered content +
3 Column: HTML
-Our code should look something like this:
-<section id="main-content">
+ <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>
+ </section>
<!-- Repeat .column x3 -->
-</section>
+</section> 3 Column: CSS
-Now that we have our 3 columns, we want them to appear next to each other. We can do this by floating them all left.
.column {
float: left;
width: 30%;
padding: 15px;
} We used 30%, because it lets us perfectly spaced columns without doing math! Don't forget padding (or margin) to give the columns some space.
+100% width / 3 columns = 30% column width
Wow. Large Images.
-The images didn't scale with the columns, because they ignore constraints like +
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%;
-}There we go!
-Let's add a border radius to it too, because we ♥ circles
-.column img {
- width: 90%;
- max-width: 90%;
border-radius: 50%;
}3 Column: Container
-We've got our 3 column layout set, our images are scaled based on the width of the column, but our columns are still bumping against the edges of the browser.
-<section id="main-content">
-
- ...
- <section class="column">
- ...
- </section>
- <section class="column">
- ...
- </section>
- <section class="column">
- ...
- </section>
-
-</section>Adding the container, which we already defined the width of, makes everything line up.
+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 these columns +
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 Graphics
-Designers everywhere have always wanted to use vector based graphics on their sites because of their quality.
-Well now you can!
+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
It's not that new really
-It's been a W3C (World Wide Web Consortium) standard since 1999
-In recent years browsers are becoming more and more compatable with SVG graphics.
-Once upon a time, .png graphics weren't supported in browsers, soon the world will know about SVG!
+SVG
+Image source:
+
How to use SVG today
-Use Adobe Illustrator, or another vector program, to create a high quality image.
-Save it as a .svg file.
-Save a high res .png image as a fallback.
+SVG
+Embed:
+
+
+
+ Include SVG
-Use SVG as an image:
-<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">Use SVG as a background image:
-HTML:
-<a href="/" class="logo">
- GDI
-</a>CSS:
+SVG
+Background image:
+.logo {
display: block;
color: transparent;
width: 100px;
height: 82px;
- background: url(kiwi.svg);
+ background: url(logo.svg);
background-size: 100px 82px;
}Browser Support
-Our favorite topic - Internet Explorer
-
- Chris Coyer has written an amazing article with tons of work arounds for our BFF IE8.
-SVG Social Icons
-Now that we know how awesome SVG graphics are, let's use them in our social links section.
-Social Links: HTML
-<section id="social">
+ </section> class="social">
<ul>
<li>
<a href="..">
@@ -933,26 +803,24 @@ Social Links: HTML
</ul>
</section>
- We're using a list for these links for the exact same reason we used them in the navigation. They are a list of links, and should be marked up accordingly.
Social Links: CSS
-We'll need to add a background, some padding, account for the floated list items.
-#social {
+ .social {
background: #57BEC5;
color: #fafafa;
padding: 25px 0;
overflow: hidden;
}
-#social li {
+.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.
+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>
@@ -961,7 +829,7 @@ Centering the List
</ul>
</div>
</section>Next we'll center the +
Next we'll center the
ul with a very flexible technique that will allow us to have a list of any width
Develop It!
@font-face
-Or really, the reason you took this class.
@font-face
-The world of HTML has progressed beyond Times New Roman and Arial
-Yay!
-How do we use new and cool fonts?
+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
Class, meet Google Web Fonts
-Google has hundreds of free, open-source fonts that have been optimized for the web, and ready for us to use!
-The service runs on Google's servers which are fast, reliable and tested. Google provides this service free of charge.
-www.google.com/fonts -
+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
@font-face
-In our example, we've used Lato for the body and Bree Serif for the headlines
-You can use any font you'd like!
+Google Fonts
+In our example, we've used Lato for the body and Bree Serif for the headlines
Using Google Fonts in 3 steps!
+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! +
- Grab the code that Google prepares for you and add it to your site
@import url(http://fonts.googleapis.com/
@@ -1015,7 +875,7 @@ Using Google Fonts in 3 steps!
Integrating into the CSS
+Using Google Fonts
body{
font-family: 'Lato', sans-serif;
@@ -1027,23 +887,28 @@ Integrating into the CSS
Develop It!
-Pick some fonts for your site using Google Fonts.
-Adjust the
- font-size and
- line-height to refine your fonts.
-
+
- Choose your fonts from Google fonts +
- Adjust the
font-sizeandline-height
+
rgba colors & opacity
rgba colors & opacity
-In CSS, we can choose colors with hexadecimal #0000FF or rgb(0, 0, 255)
-In CSS3, there are ways to control opacity of a color too!
+rgba Colors & Opacity
-
-
- rgba - controls the opacity of a color -
- opacity - controls the opacity of an element +
- 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
rgba colors
-controls the opacity of a color
-
-.example2 {
- background-color: rgba(255, 0, 0, 0.8);
-}
- color property using (red, green, blue, opacity)
-opacity is a decimal value from 0 to 1
--
-
- 0 - not visible -
- 1 - fully visible -
opacity
-controls the opacity of an element
-
-.example2 {
- opacity: 0.8;
-}
- decimal value from 0 to 1
--
-
- 0 - not visible -
- 1 - fully visible -
Develop It!
-Change some colors to have alpha transparency or opacity.
-Use http://hex2rgba.devoth.com/ to convert HEX to RGBA.
-Hint: Try making the navbar 80% opaque.
- +-
+
- 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; }
@@ -1157,13 +993,9 @@ text-shadow
Box Shadow
-
- box-shadow
- Adds a drop shadow to an element
-
box-shadow
- box-shadow: offset-x offset-y color
+ box-shadow: offset-x offset-y color
.example1 { box-shadow: 5px 5px red; }
@@ -1194,16 +1026,17 @@ Develop It!
Add shadows to your text
Remember: Be subtle!
Add a box-shadow to the nav
-
+
+
+
+
+ Break Time
+ 
-
+
CSS Gradients
-
-
- Gradients
- Build gradients with CSS - because doing it with images is annoying!
Linear gradients
@@ -1286,24 +1119,36 @@ Radial gradients
- CSS gradients are a pain to do from scratch
- That's why people have made things like the Ultimate CSS Gradient Generator to make our lives easier!
+ CSS Gradient Generator
+ Ultimate CSS Gradient Generator
-
+
Develop It!
-
- Add a background gradient to a section of your site
+
+ - Add a background gradient to a section of your site
+
-
+
Transitions
- Allow property changes in CSS values to occur smoothly over a specified duration
- Create some awesome effects without any JavaScript
-
+ 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
-
@@ -1325,27 +1170,29 @@
Transition Properties
transition-property
-the names of CSS properties that should be transitioned
+The names of CSS properties that should be transitioned
.example1 { transition-property: background-color; }
set to all to transition all CSS properties
+Set to all to transition all CSS properties
.example2 { transition-property: all; }
transition-property
- -- full list of supported properties -
+-
+
- + Animatable examples + +
- + Full list of supported properties + +
transition-duration
-the number of seconds or milliseconds a transition animation should take to complete
+The number of seconds or milliseconds a transition animation should take to complete
.example1 { transition-duration: 2s; }
That's a lot to remember right?
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
+-
+
- 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
-Allow elements rendered by CSS to be transformed in space
Transform: Scale
@@ -1484,129 +1336,121 @@Transform-origin
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.
+-
+
- 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 shoud respond to the user's behavior and environment.
+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.
Wait, people really care?
+Mobile First => Mobile Only
- 91% of U.S. Citizens have their smart phone within reach 24/7 -
- Smartphone users check their phones 150x every day -
- 25% of mobile users in the U.S. don't even own a laptop or desktop +
- Smartphone users check their phones an average of 74 times a day +
- 10% of mobile users in the U.S. are mobile only users
Why it's awesome
-RWD modifies the presentation of a site, without modifying the content of the page. So no matter what, every user has access to the same information.
+The Mobile/Tablet/Desktop Myth
+
+ RWD Principles
+RWD allows for every user to have access to the same content
How did we get here?
+RWD A Brief History
- In 2010, Ethan Marcotte coined the term in an article on A List Apart -
- In 2011, he wrote the book on it (literally), called: "Responsive Web Design" -
- In 2012, RWD was the #2 trend in web design
- 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
-
-
- A Flexible foundation +
- Flexible design
- Fluid grids
- Flexible images -
- CSS Media Queries to make the magic happen +
- 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 resolution.
+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.
How they work
+Fluid Grids
-
-
- First, we define a maximum width for the container -
- Then, we divide the content up into a set of columns, usually 12 -
- Then, we design elements with proportional widths and heights instead of being stuck with specific pixel dimensions -
- Whenever the device width changes, the grids change in width to scale with the device +
- 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
-Text scales easily on smaller devices, but images are a bit tricky.
-Images will overflow their container elements if they're too big for them.
-That's annoying.
-Enter max-width
-By using max-width on images, they will only expand to the size of their parent.
-If their parent has no width, it will just expand to the width of the viewport.
+Flexible Images
+Images expand to the width of their parent
img {
max-width: 100%;
}Media Queries
-Media queries apply certain CSS in certain situations.
+Media queries apply certain CSS in certain situations, we can target
-
-
- Print Media -
- iPhone -
- iPad -
- Even larger screens +
- Media type (print, screen...) +
- Media features (touch, hover, screen width...) +
- Combinations of types and features (not, only, and...)
Include Media Queries Last
-They will overwrite previous styles because they are last in the cascade.
-Here's the CSS for #header-image
+ Media Queries
+Media queries should come last because they will overwrite other styles in the cascade
+#header-image CSS
+
-
And here are the media queries that call for the larger image to be used for screens over 1200px wide, and to turn off the header image if the site is printed.
-
Larger image for screens > 1200px wide
+Hide image for print media
+
Standard MQs
-For devices that have dimensions no smaller than 320px and are not larger than 480px
+Standard Media Queries
+Device width >= 320px and < 480px
/* Smartphones (portrait and landscape) */
-@media only screen and (min-device-width : 320px)
+@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}iPad dimensions with the orientation in landscape.
-/* iPads (landscape) ----------- */
-@media only screen and (min-device-width : 768px)
-and (max-device-width : 1024px)
+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 */
}
How they work
-Rather than looking for a type of device, they look at the capability of the device. You can use them to check for all sorts of things.
+Progressive Enhancement
-
-
- Width & height of the viewport -
- Width & height of the device -
- Orientation - landscape or portrait -
- Resolution - retina or normal +
- Start with bare minimum of functionality and gradually enhance functionality +
- Emphasizes content first +
- Often used with "mobile first"
Mobile First
-By designing sites with mobile first in mind, it makes scaling them down a lot easier.
-Mobile first allows us to simplify the user flow to its basic elements and then enhance it as the screen size increases.
-iPhone:
@@ -1621,33 +1465,34 @@ Desktop
Viewport Meta
-Use this to control the size of the viewport.
-<meta name="viewport" content="width=device-width,
+ 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.
+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.
+-
+
- 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.
-If you're not using SVG Graphics, you'll need two images, one for regular resolution and one for retina.
+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
-Target only retina screens by using this media query:
-@media
-(-webkit-min-device-pixel-ratio: 2),
-(min-resolution: 192dpi) {
+@media
+(-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
- This takes care of two things, 2x pixel ratio on iOS devices and "high res" Android screens.
2x Images
@@ -1660,9 +1505,9 @@2x Images
@media
-(-webkit-min-device-pixel-ratio: 2),
-(min-resolution: 192dpi) {
+@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;
@@ -1670,63 +1515,72 @@ 2x Images
}
- Or, you could just use SVG
+ Break Time
+ 
-
- Responsive frameworks
- Download a pre-built framework that has basic styles already set up.
+ Responsive Frameworks
+ Download a pre-built framework with built-in basic styles
- Fluid grids
- Flexible images
- Responsive media queries
- - Styles for buttons and forms, because they're a pain!
- - Lots of base styles like .pull-right, .btn, etc.
+ - Lots of base styles like
.pull-right, .btn, etc.
Bootstrap
- By far the most popular front-end framework out there.
-
+
Foundation
- Another very popular framework that is just as robust at bootstrap - but in a different way.
- What they include
+ What They Include
- Fully responsive out of the box
- - Embraces Mobile First standards
+ - Embraces mobile first standards
- Compiled CSS for all sorts of components
- - LESS or SASS stylesheets for rapid updates
+ - SASS stylesheets for rapid updates
- Javascript for popular components
- Pre-set styles for icons and buttons
- - Includes Glyphic icon set (awesome!)
+ - Includes Glyphic icon set
+
+
+
+ And a Few New Ones...
+
+ - Semantic UI
+ - Materialize
+ - Material UI
+ - Pure CSS
+ - Skeleton
+ - UIkit
+ - Milligram
- What are the cons?
+ Drawbacks of Using a UI Framework
- Default styles are ... default and not very exciting
- - Requires a fair amount of customization to make a unique looking site
+ - Requires hacks to make a unique looking site
- The documentation is daunting and can be very indimidating
- - Remembering all the class names can be overwhelming
+ - Frameworks add bloat and weight to site
+ - Difficult to refactor and switch to custom UI later on
+
+ SASS
+
- LESS & SASS?!
- These are two very popular CSS preprocessors
+ What is a CSS Preprocessor?
+ CSS preprocessors transpile code
+ Sass => transpilation => CSS
-
- What the what is a CSS Preprocessor?
- CSS preprocessors take code written in the preprocessed language and then convert that code into the same old css we’ve been writing for years.
- Since we're not writing straight CSS, we're not limited to the restrictions of the language.
-
What they do
@@ -1741,9 +1595,11 @@ What they do
- Some highlights
- Mixins!
-/* LESS */ .rounded-corners (@radius: 5px) {
+ Mixins
+
+/* SASS */
+
+@mixin rounded-corners(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
@@ -1752,11 +1608,13 @@ Some highlights
}
#footer {
- .rounded-corners(10px);
-}
+ @include rounded-corners(10px);
+}
+
- /* Compiled CSS read by the browser */
- #footer {
+/* CSS */
+
+#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
@@ -1766,7 +1624,8 @@ Some highlights
Nested Rules
-// LESS
+
+/* SASS */
#header {
h1 {
@@ -1779,47 +1638,107 @@ Nested Rules
}
}
}
-/* Compiled CSS */
+
+/* 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
- LESS
-p {
+
+/* SASS */
+
+@function lighten($color, $amount) {
+ //function code here
+ @return $hex-value
+}
+
+p {
color: lighten(@base, 5%);
}
- SASS
-p {
- color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
+
+/* CSS */
+
+p {
+ color: #fff00;
}
Variables
- LESS
-// LESS
-@blue: #199FD9;
-p {
- color: @blue;
-}
-// Compiled CSS
-p {
- color: #199FD9;
-}
-SASS
-// SASS
+
+/* SASS */
+
$blue: #199FD9;
+
p {
color: $blue;
}
-// Compiled CSS
+}
+
+/* CSS */
+
p {
color: #199FD9;
}
+
+
+
+ Resources
+
+
+
+ Resources
+
+
+
+ Resources
+
+
+
+ Resources
+
+ - Materialize
+ - Material UI
+ - Pure CSS
+ - Skeleton
+ - UIkit
+ - Milligram
+