Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flexible grids using Sass
Search
Vinay Raghu
March 27, 2014
Technology
2
180
Flexible grids using Sass
A talk on grid design philosophy and using singularity grid system
Vinay Raghu
March 27, 2014
Tweet
Share
More Decks by Vinay Raghu
See All by Vinay Raghu
Content is a beast - a content-first approach to building wordpress websites
rvinay88
0
78
Lean UX: Designing successful apps
rvinay88
0
46
How to build a fully functioning app with Polymer and Firebase
rvinay88
0
110
The art of UI animation
rvinay88
2
320
Flexible grids using Sass
rvinay88
1
210
Other Decks in Technology
See All in Technology
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
Building Products in the LLM Era
ymatsuwitter
10
4.4k
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
FastConnect の冗長性
ocise
1
9.6k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
事業継続を支える自動テストの考え方
tsuemura
0
300
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
4 Signs Your Business is Dying
shpigford
182
22k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Practical Orchestrator
shlominoach
186
10k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Code Reviewing Like a Champion
maltzj
521
39k
KATA
mclloyd
29
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Transcript
Vinay Raghu / @rvinay88 / viii.in
None
<div class=”small-11 small-centered medium-8 medium-uncentered large-6 large-uncentered hide-for-xl hide- for-xxl”></div>
• Separation of concerns <div class=”small-11 small-centered medium-8 medium-uncentered large-6
large-uncentered hide-for-xl hide- for-xxl”></div> <div class=“sidebar-primary”></div>
http://www.flickr.com/photos/shankbone/2821569368/
• 5 grids • xs, sm, md, lg, xl •
5786 loc • CSS minified 98kb • JS minified 29kb
• 3 grids • small, medium, large • 6372 loc
• CSS minified 146kb • JS minified 86kb
• Abstraction • Responsive • Nestable • Source ordering –
push and pull
• <<Designing in the browser>> • Generic • Symmetric •
2 columns? 12? 16? 24?
None
http://alistapart.com/d/392/content-out-layout/Fig-5-golden-notes.jpg
<div class=”small-11 small-centered medium-8 medium-uncentered large-6 large-uncentered hide-for-xl hide- for-xxl”></div>
<div class=“sidebar-primary”></div>
• Scalable • Maintainable – 12 columns on small •
Non Performant • Code bloat - Unnecessary styles in your code (grunt-uncss, ucss)
<div class=”small-11 small-centered medium-8 medium-uncentered large-6 large-uncentered hide- for-xl hide-for-xxl”></div>
.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); } } }
.tab-container{ @extend .large-6; @extend .medium-8; @extend .small-12; @extend .columns; @extend
.large-centered; @extend .medium-centered; }
Pros • Markup is readable and semantic • Separation of
concerns • SCSS readable Cons • More CSS styles and code • Still shipping unused code
.tab-container{ @extend %large-6; @extend %medium-8; @extend %small-12; @extend %columns; @extend
%large-centered; @extend %medium-centered; }
• 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
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}
• Susy - http://susy.oddbird.net/ • Singularity - http://singularity.gs/ • Jeet
- http://jeetframework.com/ • Zen - http://zengrids.com/ • Gridset App - https://gridsetapp.com
• 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
None
• 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
None