Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Managing responsive websites with css preprocessors.

883 views

Published on

Managing responsive websites with css preprocessors presented at Penn State Webconference Tuesday June 23, 2015. Sass and Less preprocessors simplify managing css for responsive websites.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Managing responsive websites with css preprocessors.

  1. 1. Design responsive sites using CSS 3 preprocessors SASS, Compass, Less Brad Rice Web Designer, The University of Akron
  2. 2. Default viewport is 960px
  3. 3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. 4. <style media="screen" type="text/css"> @import url(/global/css/reset-min.css); @import url(/global/css/grids-min.css); @import url(/global/css/base-min.css); @import url(/global/css/template.css); @import url(/global/css/sections.css); @import url(/global/css/navigation.css); @import url(/global/css/scrollable_widget.css); @import url(/global/js/tipTipv13/tipTip.css); </style> <link rel="stylesheet" type="text/css" href="/global/css/print.css" media="print" /> <link rel="stylesheet" type="text/css" href="/global/css/ie.css media="screen" /> <link rel="stylesheet" type="text/css" href="/global/css/site.css media="screen" /> http requests
  5. 5. <link rel="stylesheet" href="//share.uakron.edu/global/includes/css/bootstrap.min.css" /> <link rel="stylesheet" href="//share.uakron.edu/global/includes/css/main.css?d=20150421100248" /> <link rel="stylesheet" href="//share.uakron.edu/global/includes/css/print.css" media="print" /> minimized requests
  6. 6. CSS preprocessor { .scss } { .css }
  7. 7. SCSS @import @import "grids"; @import "webfonts"; @import "compass"; @import "variables"; @import "mixins"; @import "objects"; filename: _grids.scss
  8. 8. SCSS @import @import "tablet"; @import "desktop"; @import "large"; @import "huge"; Use media queries at the bottom of main the sass file
  9. 9. Compiling SASS From command line: sass style.scss - prints to screen sass style.scss ../css/style.css – prints to file sass –-watch style.scss ../css/style.css – watches file for changes with compass: compass watch – watches entire scss directory uses a config.rb file for configuration of where to save file changes
  10. 10. Compiling SASS using Compass
  11. 11. Basics of Sass Mixins Similar sets of properties used multiple times with small variations Extend Sets of properties that match exactly Functions Commonly used operations to determine value Variables $basesize: 12px; $primary-color: #00285e; Nesting Sass adds the ability to nest selectors in ways you can't do in css Built in Functions Sass provides it's own set of functions darken($primary-color, 10%)
  12. 12. $background-color: #ffe4c4; $primary-color: #a52a2a; $secondary-color: #b8860b; $h1-size: 2.2em; h1, h2, h3 { color: $primary-color; } h1 { font-size: $h1-size; } compiled css h1, h2, h3 { color: #a52a2a; } h1 { font-size: 2.2em; } Variables
  13. 13. a { color: #6495ed; &:hover { color: darken(#6495ed, 10%); } &:visited { color: darken(#6495ed, 50%); } } compiled css a { color: #6495ed; } a:hover { color: #3676e8; } a:visited { color: #092049; } Nesting & selector
  14. 14. @mixin text-block($f-size: 1.5em, $l-height: 140%, $m-top: .5em, $m-bottom: .5em) { margin-bottom: $m-bottom; margin-top: $m-top; font-size: $f-size; line-height: $l-height; } .test { @include text-block; } compiled css .test { margin-bottom: .5em; margin-top: .5em; font-size: 1.5em; line-height: 140%; } Mixins
  15. 15. body.test a { color: #6495ed; &:hover { color: darken(#6495ed, 10%); } &:visited { color: darken(#6495ed, 50%); } } compiled css body.test a { color: #6495ed; } body.test a:hover { color: #3676e8; } body.test a:visited { color: #092049; } Use nesting to namespace
  16. 16. .btn-a { background: #777; border: 1px solid black; font-size: 1em; } .btn-b { @extend .btn-a; background: #ff0; } compiled css .btn-a, .btn-b { background: #777; border: 1px solid black; font-size: 1em; } .btn-b { background: #ff0; } Extend
  17. 17. @if theme == 'dark' { background: #000; } @else { background: #fff; } @each $item in $items { <styles> } .item { @for $i from 1 through 3 { &.item-#{$i} { top: $i + 30px; } } } Also: @while < 4 { } Directives @elseif @if @each @while, @for @function
  18. 18. When to use Mixins Similar sets of properties used multiple times with small variations Extend Sets of properties that match exactly Functions Commonly used operations to determine value
  19. 19. Operators Mixins + Addition - Subtraction * Multiplication / Division % Remainder Equality == Equal to != Not equal to String font: Arial + " sans-serif"; Comparison and x and y true if both x and y are true or x or y true if either x or y is true not x true if x is not true
  20. 20. Compass http://compass-style.org/ @import 'compass'; @import 'compass/reset'; html { @include box-sizing; } body { font-size: 100%; } compiled css .. reset stuff html { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-size: 100%; }
  21. 21. Media Queries @mixin respond-to($width){ @media (min-width: $width){ @content; } } div.main { border: 1px solid #000; @include respond-to(750px){ float: left; width: 75%; } } compiled css div.main { border: 1px solid #000; } @media (min-width: 750px) { div.main { float: left; width: 75%; } }
  22. 22. Breakpoint http://breakpoint-sass.com/ $high-tide: 500px; .johnny-utah { @include breakpoint($high-tide) { content: 'Whoa.'; } } compiled css @media (min-width: 500px) { .johnny-utah { content: 'Whoa.'; } }
  23. 23. Working setup
  24. 24. Let's code – Vinyl vintage website David Bowie Grateful DeadFocus Genesis Talking HeadsTodd Rundgren Logo
  25. 25. Sass/Compass productivity • Sass and Compass team up for maximum productivity and help you accomplish browser compatibility • Susy allows you to create your own grid layouts • Bootstrap or Foundation are more complete css frameworks that help you style large sites with lots of configurations • SassMeister.com allows you to play with sass and evaluate frameworks that will best suit your application Foundation sass: http://foundation.zurb.com/docs/sass.html Bootstrap sass: http://getbootstrap.com/getting-started/#download
  26. 26. Less • Less is javascript based, so requires node.js and npm to install and run • Less.js can be a client side processor for times you want runtime generation of css • Less syntax is not very different from Sass. The main issue is using @ for variables instead of $
  27. 27. Tools for the "No command line" types • Codekit (mac): https://incident57.com/codekit/index.html • Cactus (mac): http://cactusformac.com/ • Mixture: http://mixture.io/ • Webstorm: https://www.jetbrains.com/webstorm/ • Scout: http://mhs.github.io/scout-app/ • Prepos: https://prepros.io/
  28. 28. Resources and contact info • bradrice.com/blog • Sass resources – http://www.bradrice.com/sass-resources • Less resources - http://www.bradrice.com/less-resources • Github repo - https://github.com/bradrice/vinyl • Github repo for webstart - https://github.com/bradrice/webstart • Twitter: @brad_rice • Email: brad@bradrice.com

×