I need two demo sites. And I need them in two days

Size: px

Start display at page:

Download "I need two demo sites. And I need them in two days"

Shawn Todd
6 years ago
Views:

1 smacss your up

2 @minamarkham

4 I need two demo sites And I need them in two days

6 CSS is easy.

7 hard CSS is easy.

10 CSS is bullshit.

11 Modular CSS

12 Focusing on creating healthy front-end modules instead of complete pages can help break complex page layouts into reusable solutions. - Dave Rupert

15 small pieces independent portable

16 Navigation, Tabs, Tables, Accordions, Lists, Dropdowns Pagination, Buttons, Labels, Inputs, Breadcrumbs, etc.

17 Tiny Bootstraps

19 Module, Pattern, Component, etc.

20 MVCSS, BEM, OOCSS, Suit, intuit.css

21 SMACSS

22 Scalable & Modular Architecture for CSS

24 Framework

25 categorization naming conventions depth of applicability

26 Categorization

27 base layout modules states themes

28 Base CSS resets, default styles (ex. html, body, h1, ul, etc)

29 Layout grid, major components ex. header, sidebar, nav

30 header content footer

31 header sidebar main content

32 Modules content patterns (ex. search-box, navigation, content-box)

33 navigation hero promo promo promo promo footer-text link-list

34 States module in various states

37 Themes module in various contexts

38 jessicahische.is

39 Naming Conventions

40 Base h1, h2, p, a, etc.

41 Layout.layout-*,.l-*

42 Module.<name>

43 Module.button

44 Sub-module.<name>-<state>

45 Sub-module.button-secondary

46 State.is-*

47 Theme.theme-*

48 Theme.theme-*

49 Depth of Applicability

50 header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a { }

51 10 generations!

52 ,,, Specificity = 0,1,1,11

53 header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a { }

54 header#top-menu > nav > ul > li a + div > ul > li > ul li:hover > a { }

55 .nav-subitem

56 ,,, Specificity = 0,0,1,0

57 .nav-subitem > a

58 ,,, Specificity = 0,0,1,1

59 child selectors class selectors naming conventions

60 Recap

61 categorize css rules meaningful names shallow selectors

62 add some

63 not SASS

64 Namespacing

65 the almighty ampersand

66 .btn { } &:hover { }

67 .btn:hover { }

68 .btn { } form & { }

69 form.btn { }

70 &- or &_

71 .btn { &-secondary { } &_secondary { } }

72 .btn-secondary { }.btn_secondary { }

73 nesting

74 inception rule

75 < 3 levels deep

76 .btn { &-secondary { &-icon { } } }

77 .btn-secondary { }.btn-secondary-icon { }

78 .btn { }.btn-large { }! <div class= btn btn-large >

79 @extend all the things!

80 .btn { }.btn-large {@extend.btn;}! <div class= btn-large >

81 %btn { }.btn-large {@extend %btn;}! <div class= btn-large >

82 don between modules

83 File Structure

84 @import

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

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

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

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

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

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

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

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

93 !important

95 shame.css

96 _shame.scss

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

98 small and readable

99 mina.so/sassystarter

100 Theming

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

102 $theme: rebeccapurple

103 @include theme($rebeccapurple)

104

105 refactor all the things!

106

107 refactor all the things?

108 Baby steps

109 extract components create variables apply naming conventions nest

110 mina.so/smacss-menu

111 Before: 161 lines After: 97 lines

112 Recap

113 namespace with ampersands break modules into partials refactor in chunks

114 Resources

115 smacss.com

116 sass-lang.com

117 sassmeister.com

118 mina.so/smacss

one file so many sites

one file so many sites @minamarkham @gdidfw I build a lot of sites. One site to rule them all Theming Automation Documentation Theming File Structure @import 01. Utilities utilities/_index.scss