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
200
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
80
Lean UX: Designing successful apps
rvinay88
0
47
How to build a fully functioning app with Polymer and Firebase
rvinay88
0
120
The art of UI animation
rvinay88
2
330
Flexible grids using Sass
rvinay88
1
210
Other Decks in Technology
See All in Technology
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
1
400
Amazon GuardDuty での脅威検出:脅威検出の実例から学ぶ
kintotechdev
0
120
[OCI Technical Deep Dive] OCIで生成AIを活用するためのソリューション解説(2025年8月5日開催)
oracle4engineer
PRO
0
110
o11yツールを乗り換えた話
tak0x00
2
1.6k
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
100
AWS DDoS攻撃防御の最前線
ryutakondo
1
170
Amazon Qで2Dゲームを作成してみた
siromi
0
160
Serverless Meetup #21
yoshidashingo
1
130
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
1
200
アカデミーキャンプ 2025 SuuuuuuMMeR「燃えろ!!ロボコン」 / Academy Camp 2025 SuuuuuuMMeR "Burn the Spirit, Robocon!!" DAY 1
ks91
PRO
0
150
GISエンジニアよ 現場に行け!
sudataka
1
130
Delegate authentication and a lot more to Keycloak with OpenID Connect
ahus1
0
220
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Six Lessons from altMBA
skipperchong
28
3.9k
The Cult of Friendly URLs
andyhume
79
6.5k
BBQ
matthewcrist
89
9.8k
Designing for humans not robots
tammielis
253
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
A better future with KSS
kneath
239
17k
GraphQLとの向き合い方2022年版
quramy
49
14k
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