one file so many sites

Transcription

1 one file so many sites

2 @minamarkham

3 @gdidfw

4

5 I build a lot of sites.

6

7

8

9

10 One site to rule them all

11

12

13

14

15 Theming Automation Documentation

16 Theming

17 File Structure

18 @import

19 01. Utilities 'helpers'; Variables, mixins, functions, etc. Basically anything that doesn t output CSS by itself.

20 01. Utilities 02. Libraries "lib/font- "lib/pesticide"; Third-party libraries such as Susy, Font Awesome, Pesticide, and other plugins.

21 01. Utilities 02. Libraries 03. Base 'base'; CSS resets, Normalize, element styles

22 01. Utilities 02. Libraries 03. Base 04. Layout 'sidebar'; Grid styles, major layout components (e.g. header, footer, sidebar, etc)

23 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 'nav'; Individual modules, such as buttons, navigation, menus, etc.

24 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States 'touch'; Describe states of being, ex: active, collapsed or hidden

25 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States face utilities/_fonts.scss Web fonts imports & declarations

26 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States face 08. Print states/_print.scss Print styles

27 !important

28

29 shame.css

30 _shame.scss

31 01. Utilities 02. Libraries 03. Base 04. Layout 05. Modules 06. States face 08. Print 09. Shame _shame.scss because hacks happen

32 small and readable

33 mina.so/sassystarter

34 Variables

35 Descriptive

36 $red $black $purple $green : #E10E78; : #413F35; : #F68B21; : #B3CB36; _config.scss

37 $red $dkgray $purple : #E10E78; : #413F35; : #F68B21; $dkpurple : #663399; $dkgreen : #B3CB36; $gray : #332421; $blackish : #121212; $kindawhite : #f3f3f3; _config.scss

38 $red $dkgray $purple : #E10E78; : #413F35; : #F68B21; $dkpurple : #663399; $dkgreen : #B3CB36; $gray : #332421; $blackish : #121212; $kindawhite : #f3f3f3; _config.scss

39 $rubinered $charcoal $papaya $kiwi : #E10E78; : #413F35; : #F68B21; : #B3CB36; _config.scss

40 $rubinered $charcoal $papaya $kiwi : #E10E78; : #413F35; : #F68B21; : #B3CB36; _config.scss

41 Functional

42 $color-primary : #E10E78; $color-secondary : #00B3B5; $color-success : #B3CB36; _config.scss

43 $color-primary : #E10E78; $color-secondary : #00B3B5; $color-success : #B3CB36; _config.scss

44 Descriptive + Functional

45 $rubinered $charcoal $papaya $kiwi : #E10E78; : #413F35; : #F68B21; : #B3CB36; $color-primary : $rubinered; $color-secondary : $aqua; $color-success : $kiwi; _config.scss

46 Methods

47 Solution 1: Separate classes

48 .theme-border { }.theme-background { }.theme-button { }

49 .theme-border { }.theme-background { }.theme-button { }

50 Solution 2: Maps & Functions

51 $themes: ( default : #444, unilever : #f1c40f, lipton epson : #c0392b, : #8e44ad ); _config.scss

52 @function map-fetch($map, $keys) { $key: nth($keys, 1); $length: length($keys); $value: map-get($map, $value!= null $length > 1 { $rest: $i from 2 through $length { $rest: append($rest, nth($keys, $i)) map-fetch($value, $rest); $value; } false; } } _functions.scss

53 @mixin theme ($themes: $themes) $theme, $map in $themes {.#{$theme} & { $theme-color: map-fetch($themes, $theme $theme-color: null!global; }}} _mixins.scss

54 .module theme() { color: $theme-color; }} _config.scss

55 .default.module { color: red; }.unilever.module { color: orange; }.lipton.test { color: yellow; }.epson.test { color: green; } _config.scss

56 .default.module { color: red; }.unilever.module { color: orange; }.lipton.test { color: yellow; }.epson.test { color: green; } _config.scss

57 Solution

58 @mixin theme($name) $theme == $name } }

59 $theme: rebeccapurple

60 .module theme($rebeccapurple) { } }

61 *Disclaimer

62 Automation

63

64

65 sass watch concat uglify imagemin sassdoc

66 Split your tasks into modules

67 project/ -Gruntfile.js -grunt/ --sass.js --watch.js --concat.js --uglify.js --imagemin.js --sassdoc.js

68 load-grunt-config

69 Supercharging your Gruntfile - By Paul Bakaus mina.so/super-grunt

70 Documentation

71

72 /** * Media Queries * Allows you to use inline media queries. {String} $breakpoint - breakpoint {String} $query (min-width) - query type {String} $type (screen) - media type scss *.foobar mq(20em) {... } } */ _mixins.scss

73

74

75 Recap

76 mina.so/sassystarter

77 mina.so/one-sass