Tweet
Tweet

Slide 1

Slide 1 text

Vinay Raghu / @rvinay88 / viii.in

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Slide 4

Slide 4 text

• Separation of concerns

Slide 5

Slide 5 text

http://www.flickr.com/photos/shankbone/2821569368/

Slide 6

Slide 6 text

• 5 grids • xs, sm, md, lg, xl • 5786 loc • CSS minified 98kb • JS minified 29kb

Slide 7

Slide 7 text

• 3 grids • small, medium, large • 6372 loc • CSS minified 146kb • JS minified 86kb

Slide 8

Slide 8 text

• Abstraction • Responsive • Nestable • Source ordering – push and pull

Slide 9

Slide 9 text

• <> • Generic • Symmetric • 2 columns? 12? 16? 24?

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

http://alistapart.com/d/392/content-out-layout/Fig-5-golden-notes.jpg

Slide 12

Slide 12 text

Slide 13

Slide 13 text

• Scalable • Maintainable – 12 columns on small • Non Performant • Code bloat - Unnecessary styles in your code (grunt-uncss, ucss)

Slide 14

Slide 14 text

Slide 15

Slide 15 text

.custom-row-class { @include grid-row(); .custom-column-class { @include grid-column(12); @media #{$small} { @include grid-column(6); } @media #{$medium} { @include grid-column(8); } } }

Slide 16

Slide 16 text

.tab-container{ @extend .large-6; @extend .medium-8; @extend .small-12; @extend .columns; @extend .large-centered; @extend .medium-centered; }

Slide 17

Slide 17 text

Pros • Markup is readable and semantic • Separation of concerns • SCSS readable Cons • More CSS styles and code • Still shipping unused code

Slide 18

Slide 18 text

.tab-container{ @extend %large-6; @extend %medium-8; @extend %small-12; @extend %columns; @extend %large-centered; @extend %medium-centered; }

Slide 19

Slide 19 text

• Modify core features - http://codepen.io/rvinay88/pen/BeFld?editors=010 • @extend only port of bootstrap - https://github.com/rvinay88/sass- bootstrap • http://viii.in/oosass-foundation-and-bootstrap/ • Can’t use @media with @extend • Grid becomes unclear • Chaining of selectors - Debugging nightmare

Slide 20

Slide 20 text

button.disabled, button[disabled], .button.disabled, .disabled.follow-button, .disabled.stats-button, .disabled.btn-wizard, .button[disabled], [disabled].follow-button, [disabled].stats-button, [disabled].btn-wizard { //styles here}

Slide 21

Slide 21 text

• Susy - http://susy.oddbird.net/ • Singularity - http://singularity.gs/ • Jeet - http://jeetframework.com/ • Zen - http://zengrids.com/ • Gridset App - https://gridsetapp.com

Slide 22

Slide 22 text

• Website - http://singularity.gs/ • Github - https://github.com/Team-Sass/Singularity • Modular Scale - http://modularscale.com/ • Tutorial 1 - http://vimeo.com/63509346 • Tutorial 2 - https://www.youtube.com/watch?v=PDbVpyS6jF0

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

• https://github.com/Team-Sass/Singularity/wiki/Spanning-The- Grid#group-context-overrides • https://github.com/Team-Sass/modular-scale • https://gist.github.com/rvinay88/9807303 • http://www.mathsisfun.com/numbers/golden-ratio.html • http://sassmeister.com/gist/9807303

Slide 25

Slide 25 text

No content