How Behance went responsive with Sass and RequireJS. Jackie

Transcription

1 How Behance went responsive with Sass and RequireJS Jackie July 25,

2 is going How Behance went responsive with Sass and RequireJS Jackie July 25,

3 before after 3

4 My Big Fat Responsive Website ~57 logged out pages ~85 logged in pages 1 responsive page a bunch of responsive UI elements 4

5 Behance Served Orgs & Schools Adobe 5

6 Big Decisions Desktop-first Desktop, tablet, phone* Hide things display: none; off-canvas navigation Prevent zoom 6

7 ??? 7

8 8 R E Q U I R E J S

9 9 R E Q U I R E J S

10 Variables and mixins Modularity and reusability Custom functions* 10

11 layout.php 1 <link rel="stylesheet" href="desktop/site.css" media="(min-width: 1025px)" /> 2 <link rel="stylesheet" href="tablet/site.css" media="(min-width: 604px) and (max-width: 1024px)" /> 3 <link rel="stylesheet" href="phone/site.css" media="(max-width: 603px)" /> 11

12 layout.php 1 <link rel="stylesheet" href="desktop/site.css" media="(min-width: 1025px)" /> 2 <link rel="stylesheet" href="tablet/site.css" media="(min-width: 604px) and (max-width: 1024px)" /> 3 <link rel="stylesheet" href="phone/site.css" media="(max-width: 603px)" /> 12

13 styles.css 1 /* desktop styles */ 2 (min-width: 604px) and (max-width: 1024px) { 4 /* tablet styles */ 5 } 6 (max-width: 603px) { 8 /* phone styles */ 9 } 13

14 Tool Time! LiveReload guard / guard-livereload 14

15 styles.css 1 /* desktop styles */ 2 (min-width: 604px) and (max-width: 1024px) { 4 /* tablet styles */ 5 } 6 (max-width: 603px) { 8 /* phone styles */ 9 } 15

16 _utility.scss 1 $tablet_upper: 1024px!default; 2 $phone_upper: 603px!default; 3 phone { 5 (max-width: $phone_upper) { 8 } 9 10 } 11 tablet { 13 (min-width: $phone_upper+1) and (max-width: $tablet_upper) { 16 } } 16

17 example.scss 1 $color: blue; 2 $color: red!default; 3 $width: 10px!default; 4 5.block { 6 color: $color; 7 width: $width; 8 } compiles to: 1.block { 2 color: blue; 3 width: 10px; 4 } 17

18 _utility.scss 1 $tablet_upper: 1024px!default; 2 $phone_upper: 603px!default; 3 phone { 5 (max-width: $phone_upper) { 8 } 9 10 } 11 tablet { 13 (min-width: $phone_upper+1) and (max-width: $tablet_upper) { 16 } } 18

19 example.scss 1.cover { border-radius; 3 } 4 5.bubble { border-radius( 10px ); 7 } 19

20 example.scss apply-to-ie6-only { 2 * html { 4 } 5 } 6 apply-to-ie6-only { 8 #logo { 9 background-image: url(/logo.gif); 10 } 11 } compiles to: 1 * html #logo { 2 background-image: url(/logo.gif); 3 } 20

21 _tablet.scss tablet { 2 /* tablet styles */ 3 } _phone.scss phone { 2 /* phone styles */ 3 } styles.scss "_utility.scss"; 2 3 /* desktop styles */ 4 "_tablet.scss"; "_phone.scss"; 21

22 styles.css 1 /* desktop styles */ 2 (min-width: 604px) and (max-width: 1024px) { 4 /* tablet styles */ 5 } 6 (max-width: 603px) { 8 /* phone styles */ 9 } 22

23 _utility.scss 1 $tablet_upper: 1024px!default; 2 $phone_upper: 603px!default; 3 phone { 5 (max-width: $phone_upper) { 8 } 9 10 } 11 tablet { 13 (min-width: $phone_upper+1) and (max-width: $tablet_upper) { 16 } } 23

24 Behance Served Orgs & Schools Adobe 24

25 adobe.scss 1 $tablet_upper: 900px; 2 $phone_upper: 480px; 3 "_utility.scss"; 5 6 /* desktop styles */ 7 "adobe/_tablet.scss"; "adobe/_phone.scss"; 25

26 adobe.scss 1 /* desktop styles */ 2 (min-width: 481px) and (max-width: 900px) { 4 /* tablet styles */ 5 } 6 (max-width: 480px) { 8 /* phone styles */ 9 } 26

27 Component upgrades pop-up dialogs input fields buttons etc 27

28 File Structure discover.scss discover/ _phone.scss _phone_and_tablet.scss _tablet.scss network.scss network/ profile.scss project.scss responsive.scss responsive/ _buttons.scss _inputs.scss _popups.scss 28

29 29 doubt it

30 Tool Time! { :debug_info => true } FireSass Chrome Canary sass --watch --sourcemap site.scss:site.css Debugging Sass with Source Maps Getting Started with CSS Source Maps 30

31 31

32 Sprite generation Image helpers Color functions Compass extensions 32

33 CSS: 1.sprite { 2 background-image: url(path/to/sprite.png); 3 } 4 5 only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-devicepixel-ratio: 1.3), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) { 7 8.sprite { 9 background-image: url(path/to/2x-sprite.png); 10 background-size: 438px 128px; 11 } } 14 no thank you OMG 33

34 Sass & Compass: 1.sprite { 2 background-image: url($sprite-path); 3 } 4 pixel_ratio { 6 7.sprite { 8 background-image: url($sprite-path-2x); 9 background-size: image-width($sprite-path) image-height($sprite-path); 10 } } 34

35 colors.scss 1 $color: #fbde2e; 2 3.block { 4 width: 100px; 5 height: 75px; 6 background: $color; 7 } 8 9.lighten { 10 background: lighten( $color, 30% ); 11 } darken { 14 background: darken( $color, 30% ); 15 } tint { 18 background: tint( $color, 30% ); 19 } shade { 22 background: shade( $color, 30% ); 23 } 35

36 36 R E Q U I R E J S

37 How We Do JavaScript AMD with RequireJS MVW with NBD.js Feature detection with has.js Responsive JavaScript with matchmedia 37

38 matchmedia 38

39 site.js 1 if (window.matchmedia("(max-width: 603px)").matches) { 2 /* window is less than 603px wide */ 3 } 39

40 site.js 1 require(['nbd/util/media'], function(media) { 2 3 media({ 4 'phone' : '(max-width: 603px)', 5 'tablet' : '(min-width: 604px) and (max-width: 1024px)', 6 'desktop': '(min-width: 1025px)' 7 }); 8 9 }); 40

41 site.js 1 require(['nbd/util/media'], function(media) { 2 3 // initialize breakpoints here 4 5 if (media.is('phone')) { 6 // window is less than 603px wide 7 } 8 9 media.on('phone', function(isphone) { 10 this.requestview( isphone? 'phone' : 'desktop' ); 11 }); media.on('tablet:enter', initializebasementnavigation); 14 media.on('phone:exit', stoplistenforresize); }); 41

42 BUT WAIT site.js 1 media({ 2 'phone' : '(max-width: 603px)', 3 'tablet' : '(min-width: 604px) and (max-width: 1024px)', 4 'desktop': '(min-width: 1025px)' 5 }); _utility.scss 1 $tablet_upper: 1024px; 2 $phone_upper: 603px; 3 phone { 5 (max-width: $phone_upper) { 8 } 9 10 } 11 tablet { 13 (min-width: $phone_upper+1) and (max-width: $tablet_upper) { 16 } } 42

43 BUT WAIT site.js 1 media({ 2 'phone' : '(max-width: 603px)', 3 'tablet' : '(min-width: 604px) and (max-width: 1024px)', 4 'desktop': '(min-width: 1025px)' 5 }); _utility.scss 1 $tablet_upper: 1024px; 2 $phone_upper: 603px; 3 phone { 5 (max-width: $phone_upper) { 8 } 9 10 } 11 tablet { 13 (min-width: $phone_upper+1) and (max-width: $tablet_upper) { 16 } } 43 REPETITIVE! aka WET - Write Everything Twice that s the opposite of DRY ( Don t Repeat Yourself )

44 Custom Sass Script Functions Custom functions written in Ruby not not JS can read JSON, Ruby can read JSON Sass Script Functions Reference 44

45 example.scss 1.block { 2 background: rgba( 123, 78, 23,.5 ); 3 border-color: hsla( #bada55,.2 ); 4 color: invert( #ac1d1c ); 5 } 45

46 breakpoints.json 1 { 2 'phone' : '(max-width: 603px)', 3 'tablet' : '(min-width: 604px) and (max-width: 1024px)', 4 'desktop': '(min-width: 1025px)' 5 } 46

47 site.js 1 require(['nbd/util/media', 'breakpoints'], function(media, breakpoints) { 2 3 media(breakpoints); 4 5 }); 47

48 config.rb 1 require 'json' 2 3 sass_options = { :custom => {'breakpoint_file' =>'breakpoints.json'} } 4 5 module Sass::Script::Functions 6 def get_breakpoint(breakpoint) 7 8 unless json = JSON.load(IO.read(options[:custom]['breakpoint_file'])) 9 raise Sass::SyntaxError.new("Error: File '#{options[:custom ['breakpoint_file']}' does not exist") 10 end if json[breakpoint.to_s] 13 Sass::Script::String.new(json[breakpoint.to_s]) 14 else 15 raise Sass::SyntaxError.new("Error: Breakpoint '#{breakpoint}' does not exist, choose from the following: #{json.keys.join(', ')}") 16 end 17 end declare :get_breakpoint, [:breakpoint] 20 end 48

49 _utility.scss 1 $break-desktop: get_breakpoint(desktop)!default; 2 $break-tablet: get_breakpoint(tablet)!default; 3 $break-phone: get_breakpoint(phone)!default; 4 tablet { 6 #{$break-tablet} { 9 } } tablet 12 phone { 14 #{$break-phone} { 17 } } phone 49

50 SUPER DRY SUPER REUSABLE THE FUTURE: could be more DRY with Sass variable name interpolation, eg $break-#{breakpoint}: get_breakpoint(breakpoint); 50

51 USE REAL DEVICES 51

52 Tool Time! Open Device Lab weinre weinre/docs/latest/ Adobe Edge Inspect inspect/ 52

53 53

54 PS: We re hiring! 54