IDM 222. Web Design II. IDM 222: Web Authoring II 1

Transcription

1 IDM 222 Web Design II IDM 222: Web Authoring II 1

2 PSA: Web Hos,ng IDM 222: Web Authoring II 2 Public service announcement. Anyone who cancelled their Bluehost hosting plan and is now using github.io Github's built in hosting - you will not be able to do so next term for IDM232 Scripting II. If you need the Drexel affiliate link to sign up for a new account at the discounted rate send me an .

3 Week 7 Preprocessors IDM 222: Web Authoring II 3 Does anyone know what a preprocessor is or how it is used? Preprocessors can greatly accelerate development when used correctly. A preprocessor takes an arbitrary source file and converts it into something that the browser understands. There are preprocessor tools for CSS and JavaScript.

4 CSS Preprocessors Demaree, 2011 html { font-size: 100%; body { background-color: #333; color: #fff; margin: 3rem; h1 { font-size: 3rem; margin: 1.5rem 0.95rem; Demaree, 2011 Ge,ng Started with Sass. IDM 222: Web Authoring II 4 CSS' simplicity has always been one of its defining, most welcome features. CSS style sheets are just long lists of rules, each consisting of a selector and some styles to apply. But as our websites and applications get bigger and become more complex, and target a wider range of devices and screen sizes, this simplicity has become a liability.

5 body.home {.media-unit { border: 1px solid #ccc; background-color: #fff;.right { border-left: 1px solid #ccc; h1 { font-size: 24px; IDM 222: Web Authoring II 5 Since browsers arenʼt ready for a new CSS, developers have designed a new style sheet syntax with features to help make their increasingly complex CSS easier to write and manage, then use a preprocessor (a program that runs on your computer or server) to translate the new smart syntax (next slide)

6 body.home.media-unit { border: 1px solid #ccc; background-color: #fff; body.home.media-unit.right { border-left: 1px solid #ccc; body.home.media-unit.right h1 { font-size: 24px; IDM 222: Web Authoring II 6 into the old, dumb CSS that browsers understand.

7 SASS (syntac(cally awesome style sheets) IDM 222: Web Authoring II 7 The new stylesheet syntax they developed is called Sass, which stands for "syntactically awesome style sheets."

8 SASS Syntax #main color: blue font-size: 0.3em IDM 222: Web Authoring II 8 The original versions of Sass looked very different from regular CSS; there were no curly braces, and properties had to be indented with a specific number of spaces or else the compiler would raise an error. Because Sassʼ indented syntax wasnʼt compatible with regular CSS, it was difficult for people with large existing websites to start taking advantage of it without spending time converting their old code to Sass.

9 SASS 3.0 (SCSS) Sassy CSS IDM 222: Web Authoring II 9 So in Sass 3.0 the developers introduced a new, more CSS-like syntax called SCSS (or "Sassy CSS"). SCSS is what the nerds call a "strict superset" of regular CSS, which means anything thatʼs valid CSS is also valid SCSS. In other words, all of your existing style sheets should work with the Sass processor with no problems, allowing you to get your feet wet by playing with some Sass features without learning every facet of the new language.

10 nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; a { display: block; padding: 6px 12px; text-decoration: none; IDM 222: Web Authoring II 10 Unlike regular CSS, Sassʼ SCSS is a real scripting language, with expressions, functions, variables, conditional logic, and loops. You donʼt have to use all of these features to get some benefit out of Sass, but theyʼre there if you need them, and on large projects they can make complex or repetitive CSS much easier to write.

11 Ge#ng Started # install sass gem gem install sass # run Sass from the command line sass input.scss output.css # watch a Sass file sass --watch input.scss:output.css IDM 222: Web Authoring II 11 Sass is written in Ruby; if you're familiar with Ruby and your computer's command prompt, you can find instructions for installing and running the Sass gem on the Sass website.

12 IDM 222: Web Authoring II 12 For those who are less handy on the command line, or who just want a fast and easy way to work with Sass, thereʼs various desktop applications available for Mac and Windows that come with Ruby and has the Sass compiler built in.

13 my_project/ index.html css/ main_style.css scss/ main_style.scss _mixins.scss _colors.scss IDM 222: Web Authoring II 13 Both the Sass command line tool and the desktop applications work by watching your SCSS style sheets for changes as you work on them, then automatically compiling them into regular CSS when you save. The directory where your Sass files live is called the input folder. Your processed CSS files are saved to the output file.

14 build/ index.html css/ styles.css src/ scss/ components/ _buttons.scss _header.scss global/ _settings.scss vendor/ _font-awesome.scss styles.scss IDM 222: Web Authoring II 14 Here's another project structure. The files whose names start with underscores are called partials. As the name would imply they contain "partial" style sheets, chunks of SCSS code to be imported into one of of your main SCSS files.

15 Using Par*als url('/pages/blog.css'); IDM 222: Web Authoring II 15 CSS already provides directive for linking to additional, external style sheets, and some developers like to use it to break up a large projectʼs styles into smaller logical chunks. For example, our main_style.css file might contain nothing statements linking to a bunch of page-specific style sheets. This isnʼt considered the best practice however, because each of these imports is one more file that has to be requested and loaded by the browser, which can make your site load more slowly.

16 Using Par*als 'pages/blog'; IDM 222: Web Authoring II 16 Sass helps out by letting you break large style sheets into partials. You still refer to them using directive (in a new, briefer form), and when your SCSS files are processed, the contents of the partial are inserted directly into the output CSS. The result is one file containing all of your styles. Sass can also automatically minify its CSS output, stripping out unnecessary white space or line breaks to optimize loading times.

17 DRY (don't repeat yourself) body.home.media-unit { border: 1px solid #ccc; background-color: #fff; body.home.media-unit.right { border-left: 1px solid #ccc; body.home.media-unit.right h1 { font-size: 24px; IDM 222: Web Authoring II 17 Now that our style sheets are better organized, let's try to make them less repetitive. One of Sass's nicest features is nested rules. In a regular CSS file, rules must be listed sequentially, and every rule's selector must include all of its elements. Apart from being really, really repetitive, this code doesnʼt do anything to help us understand how the HTML elements weʼre styling relate to each other.

18 DRY Nes(ng body.home {.media-unit { border: 1px solid #ccc; background-color: #fff;.right { border-left: 1px solid #ccc; h1 { font-size: 24px; IDM 222: Web Authoring II 18 With nesting, we can write SCSS code that is both less redundant and easier to follow: After processing this will result in the same CSS as above. Unfortunately, the shorter syntax wonʼt make your CSS files any smaller or load any faster. But nesting will help keep your code clean, logical, and well-organized, which should also make it easier to manage over time.

19 Nes$ng.container { width: 100%; /* If the device is wider than 940px, incorporate a max-width. screen and (min-width: 58.75em) { max-width: 56.25rem; IDM 222: Web Authoring II 19 Another cool nesting trick: Sass allows you to nest media queries inside other rules, making it easier to see which styles are applied to a given object on your page:

20 Nes$ng.container { width: screen and (min-width: 58.75em) {.container { max-width: 56.25rem; IDM 222: Web Authoring II 20 When processing this file, Sass knows how to convert this back into valid CSS, copying the.container selector inside the media query like so:

21 Variables $variable_name: "value"; IDM 222: Web Authoring II 21 Sass variables are great for two reasons. First, and most importantly, they make code easier to change by reducing duplication. But they also allow you to assign names to special property values like colors, which helps you understand the intent behind a given style.

22 Variables button { background-color: #99cc00; h1, h2 { color: #99cc00; div { border: 3px solid #99cc00; IDM 222: Web Authoring II 22 Let's pretend we're working on a large scale site where a number of elements in the UI use a specific green color, #99cc00, or "Brand green" for short. This color appears hundreds of times in the CSS, used on everything from buttons to headline colors; if we ever changed the branding colors away from this shade of green it would be a lot of work to change every instance of this color code.

23 Variables $branding-green: "#99cc00"; $branding-link-color: $branding-green; a { color: $branding-link-color; IDM 222: Web Authoring II 23 By using variables instead of the raw hex code, it's easy - just change the variable and the new color appears everywhere, instantly. You can even set variables to other variables, which helps keep your style sheets semantic:

24 Variables $sans-serif-font: 'ff-dagny-web-pro', 'Helvetica Neue', Arial, sans-serif; $serif-font: 'ff-tisa-web-pro', Georgia, Times, serif;.banner h1 { font-family: $sans-serif-font; IDM 222: Web Authoring II 24 You can assign almost any kind of value to a variable; apart from color hex values, they're especially good for font-family stacks:

25 Mixins $highlight-color: highlighted-bold-text { font-weight: bold; background-color: $highlight-color;.result-with-highlights { span highlighted-bold-text; IDM 222: Web Authoring II 25 Mixins are reusable sets of properties or rules that you include, or "mix", into other rules. You define them using keyword and include them using keyword.

26 Mixins.result-with-highlights { span highlighted-bold-text;.highlighted highlighted-bold-text; IDM 222: Web Authoring II 26 Once youʼve defined a mixin, you can reuse it anywhere else in the same file. Here Iʼm saying that elements with a class named highlighted should also have the color and font weight properties specified by the mixin:

27 transition($args) { -webkit-transition: $args; -moz-transition: $args; -ms-transition: $args; -o-transition: $args; transition: $args; a { color: transition(color.3s ease); &:hover { color: black; IDM 222: Web Authoring II 27 This is really useful for applying new CSS3 properties to elements, while ensuring wide cross-browser compatibility via vendor prefixes and fallback stacks. In regular CSS, vendor fallbacks can be annoying to use because theyʼre so verbose, which leads to a lot of boring copy-and-pasting. Sass mixins let us use new kinds of styles in a bulletproof way without writing a lot of code. Here Iʼve defined a mixin that builds a simple transition using vendor-prefixed properties for WebKit, Firefox, and IE, followed by the standard transition property from the CSS3 spec. The argument we pass includes which property, the duration and timing function of the transition, which can be unique every time we use the mixin.

28 Mixins $color: button { background-color: $color; border: 1px solid mix(black, $color, 25%); border-radius: 5px; padding:.25em.5em; &:hover { cursor: pointer; background-color: mix(black, $color, 15%); border-color: mix(black, $color, 40%); IDM 222: Web Authoring II 28 Mixins can also contain whole nested rules, not just properties.

29 headline ($color, $size) { color: $color; font-size: $size; IDM 222: Web Authoring II 29 Using mixins to apply simple styles is cool, but what makes mixins awesome is that they can take arguments, just like a function in JavaScript or PHP. And you can use them in combination with more advanced features like expressions and functions to go far beyond organization to implement some great, complex styles. [^Dawson, 2015]

30 headline ($color, $size) { color: $color; font-size: $size; h1 headline(green, 12px); IDM 222: Web Authoring II 30 A mixin can take Sass data values as arguments. These values are specified when you define the mixin and given when the mixin. The arguments are then passed to the mixin as variables. Arguments are included in a comma separated list enclosed in parentheses after the mixin name.

31 Arguments (compiled CSS) h1 { color: green; font-size: 12px; IDM 222: Web Authoring II 31 Here's the compiled CSS.

32 Arguments Order h1 headline(12px, green); /* Compiles to... */ h1 { color: 12px; font-size: green; IDM 222: Web Authoring II 32 As you can see, this doesnʼt work. The mixin just delivers the arguments in the order given.

33 Arguments $base-color: headline($color, $size) { color: $color; font-size: $size; h1 headline($base-color, 12px); IDM 222: Web Authoring II 33 You can also pass Sass variables as arguments. For example lets say we set a $base-color variable in the above example.

34 Arguments (compiled CSS) h1 { color: pink; font-size: 12px; IDM 222: Web Authoring II 34 Here's the compiled CSS.

35 Default headline($size, $color: red) { color: $color; font-size: $size; h1 headline(12px); h1 headline(12px, blue); IDM 222: Web Authoring II 35 When creating your mixin you can specify default values for your arguments. When default values are included you can omit passing that value when calling your mixin. The default value will be used. For example if I update the headline mixin from above with a default value.

36 Default Values (compiled CSS) h1 { color: red; font-size: 12px; h1 { color: blue; font-size: 12px; IDM 222: Web Authoring II 36 In the first h1 we specified a pixel size, so the default value of red was used. In the second example the default value was replaced by the provided color of blue we used in

37 IDM 222: Web Authoring II 37 lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. [Demaree, 2011]

38 .message { border: 1px solid #ccc; padding: 10px; color: #333;.success border-color: green;.error border-color: red;.warning border-color: yellow; IDM 222: Web Authoring II 38

39 Operators.container { width: 100%; article { float: left; width: 600px / 960px * 100%; // 62.5% aside { float: right; width: 300px / 960px * 100%; // 31.25% IDM 222: Web Authoring II 39 Doing math in your CSS is very helpful. Sass has a handful of standard math operators like addition, subtraction, multiplication, division and percentages.

40 Example Time IDM 222: Web Authoring II 40 SCSS example JavaScript example

41 Other Languages (CSS) SCSS Sass Less Stylus IDM 222: Web Authoring II 41

42 Other Languages (Javascript) CoffeeScript TypeScript IDM 222: Web Authoring II 42

43 Other Languages (HTML) Pug (Jade) Haml Slim Kit Nunjucks IDM 222: Web Authoring II 43

44 For Next Week... IDM 222: Web Authoring II 44 Work on your projects. No specific assignment to turn in.

45 Sources [-Demaree, 2011]: Ge1ng Started with Sass. [-Dawson, 2015]: Sass Basics: The Mixin DirecCve [-Richard, 2014]: DRY-ing Out Your Sass Mixins IDM 222: Web Authoring II 45