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
130
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
370
Creating a culture of accessibility
tempertemper
0
130
Accessible form patterns – Sunderland Digital
tempertemper
0
300
Accessible user interface patterns – NUX
tempertemper
4
320
Accessible user interface patterns – Orange Bus
tempertemper
1
100
The Importance of Web Standards
tempertemper
0
180
Other Decks in Technology
See All in Technology
Delegating the chores of authenticating users to Keycloak
ahus1
0
180
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
1.8k
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
250
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
280
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
220
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
630
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
980
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
110
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
180
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
800
CDK Vibe Coding Fes
tomoki10
1
610
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Automating Front-end Workflow
addyosmani
1370
200k
Unsuck your backbone
ammeep
671
58k
Faster Mobile Websites
deanohume
307
31k
Thoughts on Productivity
jonyablonski
69
4.7k
Why Our Code Smells
bkeepers
PRO
336
57k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
RailsConf 2023
tenderlove
30
1.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
4 Signs Your Business is Dying
shpigford
184
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
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