CSS is for Clark Kent. Sass is for Superman. About John Albin - - PowerPoint PPT Presentation

▶
css is for clark kent sass is for superman about john
SMART_READER_LITE
LIVE PREVIEW

CSS is for Clark Kent. Sass is for Superman. About John Albin - - PowerPoint PPT Presentation

Dec 03, 2023 271 likes •862 views

http://bit.ly/sass-for-superman FRONTEND TRACK | JOHN ALBIN WILKINS | FEBRUARY 7 2013 CSS is for Clark Kent. Sass is for Superman. About John Albin Wilkins JohnAlbin drupal.org/user/11297 @JohnAlbin 2 OReilly book: Sass and Compass

slide-1
SLIDE 1

CSS is for Clark Kent. Sass is for Superman.

FRONTEND TRACK | JOHN ALBIN WILKINS | FEBRUARY 7 2013

http://bit.ly/sass-for-superman

slide-2
SLIDE 2

About John Albin Wilkins JohnAlbin drupal.org/user/11297 @JohnAlbin

2

slide-3
SLIDE 3

O’Reilly book: Sass and Compass – Will be published in the spring of 2013. – Will be awesome. – May contain Lemurs.

3

slide-4
SLIDE 4

The CMS 2013

4

1993

slide-5
SLIDE 5

We had mobile devices in 1993!

5

slide-6
SLIDE 6

Efficiency in CSS

7

slide-7
SLIDE 7

Efficiency in CSS

7

slide-8
SLIDE 8

Obviously, we have a problem.

8

slide-9
SLIDE 9

We’re screwed.

  • Responsive

Web Design

  • SMACSS
  • CSS3
  • Flexbox
  • Vendor Prefixes
  • Transitions
  • OCSS
  • BEM
  • Sass
  • Less
  • Bower
  • HTML5
  • Accessibility
  • Aria
  • Microformats
  • Sprites
  • Data URIs
  • jQuery
  • Media queries
  • YepNope
  • Mobile
  • Testing
  • Require.js
  • Lazy loading
  • Front-end

performance

  • Aggregation

strategies

  • Yeoman
  • Compass
  • Normalize.css
  • Mobile first
  • Canvas
  • AMD
  • Drupal theming

9

slide-10
SLIDE 10

Nicolas Gallagher “Are you new to front-end web development? Here’s a secret: no one else really knows what they’re doing either.” — @necolas

10

slide-11
SLIDE 11

Clark Kent was decent at his job.

11

slide-12
SLIDE 12

Clark Kent was decent at his job.

11

…but Lois Lane kicked his ass.

slide-13
SLIDE 13

2 years ago, at…

slide-14
SLIDE 14

ZERO COMMITMENT!!!!

Sass = CSS + extras Sass compiles to normal CSS Automatic compilation

13

slide-15
SLIDE 15

Installing Sass & Compass

  • Command line — FREE (I use this.)

http://thesassway.com/beginner/getting-started-with-sass-and-compass

sudo gem install compass

  • Compass.app — $10

http://compass.handlino.com

  • Fire.app — $14 (I use this too.)

http://fireapp.handlino.com

  • CodeKit — $25

http://incident57.com/codekit/

14

http://bit.ly/sass-for-superman

slide-16
SLIDE 16

sass --watch

$> sass --watch sass:css [sass dir]:[css dir] >>> Sass is watching for

  • changes. Press Ctrl-C to

stop.

15

slide-17
SLIDE 17

sass --watch

$> sass --watch sass:css [sass dir]:[css dir] >>> Sass is watching for

  • changes. Press Ctrl-C to

stop. SASQUATCH!

15

slide-18
SLIDE 18

Variables and color functions

16

http://bit.ly/superman-1

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

slide-19
SLIDE 19

Variables and color functions

16

http://bit.ly/superman-1

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

slide-20
SLIDE 20

Variables and color functions

16

http://bit.ly/superman-1

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

slide-21
SLIDE 21

Variables and color functions

16

http://bit.ly/superman-1

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

slide-22
SLIDE 22

Nesting (rulesets and properties)

17

http://bit.ly/superman-2

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules

slide-23
SLIDE 23

Nesting (rulesets and properties)

17

http://bit.ly/superman-2

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules

slide-24
SLIDE 24

Comments and output style

18

http://bit.ly/superman-3

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style

slide-25
SLIDE 25

Comments and output style

18

http://bit.ly/superman-3

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style

slide-26
SLIDE 26

Comments and output style

18

http://bit.ly/superman-3

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style

slide-27
SLIDE 27

Comments and output style

18

http://bit.ly/superman-3

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style

slide-28
SLIDE 28

Parent selectors

19

http://bit.ly/superman-4

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#referencing_parent_selectors_

slide-29
SLIDE 29

Parent selectors

19

http://bit.ly/superman-4

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#referencing_parent_selectors_

slide-30
SLIDE 30

@import

20

slide-31
SLIDE 31

@import

20

styles.scss :

slide-32
SLIDE 32

@import

20

styles.scss : normalize.scss : print.scss :

slide-33
SLIDE 33

@import

20

styles.scss : styles.css :

slide-34
SLIDE 34

Partials

21

slide-35
SLIDE 35

Partials

21

styles.scss :

slide-36
SLIDE 36

_init.scss

  • Declare all your variables
  • Import all your modules

(Compass, Zen Grids, etc.)

22

slide-37
SLIDE 37

_init.scss

  • Declare all your variables
  • Import all your modules

(Compass, Zen Grids, etc.)

22

File organization

slide-38
SLIDE 38

Drupal integration

stylesheets[all][] = css/styles.css

23

my-theme.info :

slide-39
SLIDE 39

There’s a module for that™

24

PHP version of Sass = Buggy version of Sass

*

“that” refers to $@#$ing up your CSS.

slide-40
SLIDE 40

Feeling the speed yet?

25

slide-41
SLIDE 41

Extends & placeholder selectors

26

http://bit.ly/superman-5

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholder_selectors_ http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend

slide-42
SLIDE 42

Extends & placeholder selectors

26

http://bit.ly/superman-5

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholder_selectors_ http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend

slide-43
SLIDE 43

Mixins

27

http://bit.ly/superman-6

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins

slide-44
SLIDE 44

Mixins

27

http://bit.ly/superman-6

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins

slide-45
SLIDE 45

Compass!!!!!

28

slide-46
SLIDE 46

Data URIs (with @import “compass”;)

29

slide-47
SLIDE 47

Data URIs (with @import “compass”;)

29

slide-48
SLIDE 48

Data URIs (with @import “compass”;)

29

slide-49
SLIDE 49

CSS3 & Vendor prefixes

30

http://bit.ly/superman-7

http://compass-style.org/reference/compass/css3/border_radius/

slide-50
SLIDE 50

CSS3 & Vendor prefixes

30

http://bit.ly/superman-7

http://compass-style.org/reference/compass/css3/border_radius/

slide-51
SLIDE 51

CSS3 & Vendor prefixes

30

http://bit.ly/superman-7

http://compass-style.org/reference/compass/css3/border_radius/

slide-52
SLIDE 52

Zen Grids

Homepage: http://zengrids.com Webinar: https://www.acquia.com/resources/acquia-tv/ conference/creating-responsive-drupal-sites-zen-grids-and- zen-5-theme-july-19

31

slide-53
SLIDE 53

32

slide-54
SLIDE 54

BOF! ALL THINGS SASS & COMPASS Tomorrow morning @ 10:45am!

33

slide-55
SLIDE 55

What if we all shared?

34

slide-56
SLIDE 56

What if we all shared?

34

slide-57
SLIDE 57

Thank you!

slide-58
SLIDE 58

What did you think?

Session review: http://bit.ly/i-love-superman Stalk Follow me: @JohnAlbin