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
Speedy, solid, semantic layout with Susy
Search
tempertemper
April 02, 2015
Technology
0
120
Speedy, solid, semantic layout with Susy
This talk explains how to use Sass for layout, via the powerful yet light-weight Susy library.
tempertemper
April 02, 2015
Tweet
Share
More Decks by tempertemper
See All by tempertemper
Getting started with manual accessibility testing
tempertemper
0
330
Creating a culture of accessibility
tempertemper
0
100
Accessible form patterns – Sunderland Digital
tempertemper
0
250
Accessible user interface patterns – NUX
tempertemper
4
280
Accessible user interface patterns – Orange Bus
tempertemper
1
95
The Importance of Web Standards
tempertemper
0
170
Other Decks in Technology
See All in Technology
Share my, our lessons from the road to re:Invent
naospon
0
150
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.8k
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
120
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
310
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
640
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
520
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
610
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.1k
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
740
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
83k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
How to Ace a Technical Interview
jacobian
276
23k
A Philosophy of Restraint
colly
203
16k
GitHub's CSS Performance
jonrohan
1030
460k
Optimizing for Happiness
mojombo
376
70k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Fireside Chat
paigeccino
34
3.2k
Embracing the Ebb and Flow
colly
84
4.6k
Transcript
Speedy, solid, semantic layout with Susy
Ordered list of contents 1. Reasons why Susy’s great 2.
Installation 3. Basic usage 4. Advanced usage
Layout woes • Lack of flexibility • Too many dependencies
• DIY is a headache B • Separation of concerns • Jack of all trades
Semantics <div class="col-sm-5 .col-md-6">Content</div> <div class="col-sm-5 .col-sm-offset-2 .col-md-6 .col-md- offset-0">Extra
content</div> <main class="main">Content</main> <aside>Extra content</aside>
Flexibility • 4/6/10/18 column grid? • ‘Breaking’ the grid •
Different grids for different screen-widths • Asymmetric grids
Dependencies • Can slow compilation of CSS • Increases complexity
of a project
Maths
None
Master of one • Keeps codebase light • All (layout)
bases covered
http://susy.oddbird.net/
Installation • Bower • Copy/paste .zip • Ruby Gem •
GUI (Codekit, Prepros, etc.)
Compilers • Compass () • Ruby Sass • Libsass ()
Import Susy @import "susy"; @import "../components/susy/sass/susy"; Or
Grid settings (maps) $susy: ( columns: 4, gutters: .25, math:
fluid, );
Laying out body { @include container(60em); padding-right:.5em; padding-left:.5em; } [role="banner"]
.logo { @include span(2 of 4); } [role="navigation"] { @include span(last 2 of 4); }
Overriding li { @include span(4 of 14); padding-right: .5em; padding-left:
.5em; } article li { float: none; width: auto; margin-right: 0; }
Multiple maps $default: ( columns: 4, gutters: .25, math: fluid,
gutter-position: after, ); $medium: ( columns: 6, gutters: .25, math: fluid, gutter-position: after, ); $large: ( columns: 12, gutters: .25, math: fluid, gutter-position: after, );
Breakpoints • Hand-written alongside layout context • Susy breakpoints •
Breakpoint (http://breakpoint-sass.com/)
[role="banner"] .logo { @include layout($default); @include span(2 of 4); @media
(min-width: 30em) { @include layout($medium); @include span(2 of 6); } } [role="navigation"] { @include layout($default); @include span(last 2 of 4); @media (min-width: 30em) { @include layout($medium); @include span(last 4 of 6); } }
Shorthand article { @include span(8 of 12); img { @include
span(last 4 of 8 before); } }
Gallery .gallery li { @include gallery(4 of 12); }
Loads more • Asymmetric grids • Margins and padding: pre,
post, squish, pull, prefix, suffix, bleed • Using span and gutter as a function, instead of a mixin
susydocs.oddbird.net/en/latest/toolkit/
Remind me… • Keeps markup clean • Flexible • Light-weight
• Straightforward syntax • Does one thing well
@tempertemper