Embed Size (px)
Citation preview
Sass: The learning bridge between HTML/CSS and
JavaScript
Jen KramerHarvard University Extension School • O’Reilly Media, Inc.
HTML5 Developer’s Conference • October 2015
Teaching web design since 2001
Harvard University Extension SchoolMarlboro College Graduate School
Community College of VermontNational UniversityChamplain College
Boston Univ. Center for Digital Imaging Arts
osTraininglynda.com
O’Reilly Media Inc.
2001
• Tables for layout• Spacer GIFs• No CSS• IE 3, Netscape 4
• 640x480 or 800x600 desktop• 256 colors (web-safe colors)• HTML4 (when we thought about standards)
2015
2015
2015
How are we teaching differently in 2015?
Students wind up at universities or hack schools because they don’t know where to start.
Universities often offer information that’s not up to date.
“One of the things that noncredit can do faster than credit is respond to employers’ needs,” said Jim Morris, an associate vice president in the university’s Division of Continuing Studies. “The university can’t be changing its curriculum every six months.”
http://chronicle.com/blogs/wiredcampus/university-run-boot-camps-offer-students-marketable-skills-but-not-course-credit/57494
Good front-end web design curriculum
• User experience
• HTML5 and CSS3
• JavaScript
• CSS preprocessors
• Design/UI
• File management
• Web hosting/FTP
• Workflows
• Content Mgt System
• Identify the next hot thing and learn it
Prior computer experience required.
HTML5Starting with Ugly Web Pages®
CSS3Wow, we can finally make it pretty!
<div class="col-1-2">
<h3>Minuteman Bikeway</h3>
<img src="img/bikeway-225.jpg"
alt="MinutemanBikeway.">
<p>Winding through Cambridge, Arlington,
Lexington, and Bedford, there's lots to enjoy.</p>
<p><a href="http://www.minutemanbikeway.org/"
target="_blank">Read more >></a></p>
</div>
body {
font-size: 100%;
font-family: Arial, Geneva, sans-serif;
background-color: #B1D3EE;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Cabin Condensed', sans-serif;
}
a {
color: #2772B0;
}
for(var i = 0; i < f.length; i++) {
var e = f.elements[i];
if (((e.type == "text") || (e.type == "textarea")) && !e.optional) {
// first check if the field is empty
if ((e.value == null) || (e.value == "") || isblank(e.value)) {
empty_fields += "\n " + e.name;
continue;
}
// Now check for fields that are supposed to be numeric.
if (e.numeric || (e.min != null) || (e.max != null)) {
var v = parseFloat(e.value);
if (isNaN(v) ||
((e.min != null) && (v < e.min)) ||
((e.max != null) && (v > e.max))) {
errors += "- The field " + e.name + " must be a number";
if (e.min != null)
errors += " that is greater than " + e.min;
if (e.max != null && e.min != null)
errors += " and less than " + e.max;
else if (e.max != null)
errors += " that is less than " + e.max;
errors += ".\n";
}
}
}
}
• Hello world
• Variable
• Math, operations
• If/else, loops
• Arrays
• Hooray, now you can program!
We can do better.
Sass as a learning bridge
• Sass is the most popular pre-processor, with data structures that resemble other programming languages
• Variables, math operations, if/else, loops are all part of Sass
• Break up file structure into partial files and manage these
• Introduces compiling, workflows, code reuse
$primary-color: #987654;
$space: 1em;
$half-space: $space/2
%box {
width: 10em;
height: 10em;
margin: $space;
padding: $space;
color: white;
font-size: 0.8em;
font-weight: bold;
}
.box-primary {
@extend %box;
color: $primary-color;
border-radius: 1rem;
}
.box-secondary {
@extend %box;
border: 1px solid blue;
}
@mixin alert-variant($background, $border, $text-color) {
background-color: $background;
border-color: $border;
color: $text-color;
hr {
border-top-color: darken($border, 5%);
}
.alert-link {
color: darken($text-color, 10%);
}
}
div {
color: darken($primary-color, 20%);
}
$base-font-size: 16px;
@function pxtoem ($px, $base: $base-font-size) {
@return ($px / $base) * 1em;
}
.container {
max-width: pxtoem(320px);
}
@if $adjust {
// We set the font color based on the darkness of the bg.
@if $bg-lightness >= 50% and $bg == blue {
h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; }
}
@else if $bg-lightness >= 50% {
h1,h2,h3,h4,h5,h6,p { color: $panel-font-color; }
}
@else {
h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; }
p a {text-decoration: underline;
color: lighten($primary-color, 45%); }
p a:hover {text-decoration: none;
color: darken($panel-font-color-alt, 20%); }
}
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
.puma-icon {
background-image: url('/images/puma.png'); }
.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }
.egret-icon {
background-image: url('/images/egret.png'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }
What comes after Sass?
•jQuery
•JavaScript
•Framework du Jour
Jen Kramer
• Slides at www.slideshare.net/jen4web
• Free 10 day subscription to Safari books and training videos online: https://www.safaribooksonline.com/register/
[email protected] • www.jenkramer.org
