CSS and Sass
CSS Basics
Gradients
linear-gradient(#ffa949, firebrick)
Fonts
[font formats: EOT TTF WFF](https://css-tricks.com/understanding-web-fonts-getting/#:~:text=Embedded%20OpenType%20(EOT)%3A%20EOT,to%20render%20your%20web%20fonts.&text=Web%20Open%20Font%20Format%20(WOFF,supported%20by%20all%20modern%20browsers.)
Media queries
Simulate Mobile Devices with Chrome DevTools
treehouse: adjustig layout with media queries
/* example of how media queries works */
@ media (max-width: 960px) {
body {
background: royalblue;
}
}
@ media (max-width: 480px) {
body {
background: darkred;
}
}
Layout
<figure>
<img class="icon-location" src="img/location.svg" alt="Location">
<img class="feat-img" src="img/food.svg" alt="Drinks and food">
<figcaption>
<h4>Time to Eat</h4>
Here is tonights menu...
</figcaption>
</figure>
figure {
margin: 0;
line-height: 0;
position: relative;
}
figcaption {
font-size: .9em;
line-height: 1.5;
color: #fff;
padding: 1em;
background: rgba(19, 43, 102, .85);
position: absolute;
bottom: 0;
width: 100%;
}
/* Creates a badge icon over the top right corner */
.icon-location {
width: 35px;
position: absolute;
top: -15px;
right: -15px;
}
understanding css grid
experimental layout lab: jen simmons
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) treehouse: repeat grid tracks with autofill and autofit
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
prototyping in the browser
using bootstrap allows both desktop and mobile layouts to be created in parallel, with only some adjustments needed.
BradFrost responsive UI patterns
treehouse: responsive nav menus bootstrap
treehouse: landscape responsive layout
Nav menu with rounded corners using first-child & last-child selectors
<header>
<h1>My Site!</h1>
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
.main-nav li:first-child {
border: none;
border-radius:5px 0 0 5px;
}
.main-nav li:last-child {
border-radius: 0 5px 5px 0;
}
Substring Matching Attribute Selectors
adding pdf icon to pdf links
<div>
<h2>The file you requested</h2>
<ul>
<li><a href="http://downloads/gallery.pdf">Download the PDF</a></li>
<li><a href="http://downloads/sites.xls">Download the Spreadsheet</a></li>
</ul>
</div>
a[href^="http:"] {
color: $52bab3;
text-decoration: none;
}
a[href$=".pdf"] {
background-image: url('../img/icn-pdf.svg');
}
a[href$=".xls"] {
background-image: url('../img/icn-xls.svg');
}
a[href*="downloads"] {
background-repeat: no-repeat;
background-size: 18px 18px;
padding-left: 25px;
}
<div class="d-loads">
<a href="downloads/photos.pdf" class="jpg">Download</a>
</div>
.jpg::before {
content: url(../img/icn-jpg.svg);
margin-right: 8px;
}
.d-loads a::after {
content: attr(href);
display: inline-block;
color: initial;
font-size: .65em;
margin-left: 5px;
}
/* first line standout */
.intro:first-line {
font-weight: bold;
font-size: 1.4em;
}
/* Drop Cap */
.intro:first-letter {
float: left;
font-size: 80px;
color: white;
padding: 5px 10px;
background: #384047;
margin: 10px 10px 0 0;
border-radius: 5px;
line-height: 1;
}
Getting started with Sass
### Study responsive layout
https://teamtreehouse.com/library/modular-css-with-sass