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
Salvattore
Search
Rolando Murillo
October 26, 2013
Design
0
50
Salvattore
Presented today at Startech by Giorgio Leveroni.
Rolando Murillo
October 26, 2013
Tweet
Share
Other Decks in Design
See All in Design
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
0
220
IPの世界観に寄り添う、マルチブランドなカラーシステム設計
jirosh1998
0
5.1k
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
500
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
MiKS inc. Company PR en_202404
zakkerooni
0
220
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
570
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
320
Goodpatch Tour💙 / We are hiring!
goodpatch
28
700k
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
190
PRDがデザインプロセスを高速化した話
tooomo
1
330
顕在化されていない期待、デザインの灯台
daitorii
1
1.1k
Featured
See All Featured
Building an army of robots
kneath
300
41k
Teambox: Starting and Learning
jrom
128
8.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Scaling GitHub
holman
457
140k
How to Ace a Technical Interview
jacobian
273
22k
Embracing the Ebb and Flow
colly
80
4.2k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Transcript
None
THE PROBLEM
THE “SOLUTION”
THE PROBLEM WITH THE “SOLUTION” MADNESS IMAGELOAD? JS-DEFINED LAYOUT
None
EASY SETUP, CSS-ORIENTED <section class=“test”> <div class=“item”>Item 1</div> <div class=“item”>Item
2</div> <div class=“item”>Item 3</div> … <div class=“item”>Item 20</div> </section>
EASY SETUP, CSS-ORIENTED <div class=“item”> Item 1 </div> <div class=“item”>
Item 2 </div> <div class=“item”> Item 3 </div> <div class=“item”> Item 4 </div> <div class=“item”> Item 5 </div> <div class=“item”> Item 6 </div>
EASY SETUP, CSS-ORIENTED <section class=“test” data-columns> <div class=“item”>Item 1</div> <div
class=“item”>Item 2</div> <div class=“item”>Item 3</div> … <div class=“item”>Item 20</div> </section>
.test[data-columns]::before { content: ‘3 .column.size-1of3’ } EASY SETUP, CSS-ORIENTED .column
{ float: left; } .size-1of3 { width: 33.333%; }
<section class=“test” data-columns> <div class=“column size-1of3”> <div class=“item”>Item 1</div> <div
class=“item”>Item 4</div> … </div> <div class=“column size-1of3”> <div class=“item”>Item 2</div> <div class=“item”>Item 5</div> … </div> <div class=“column size-1of3”> <div class=“item”>Item 3</div> <div class=“item”>Item 6</div> … </div> </section> EASY SETUP, CSS-ORIENTED
PROBLEM SOLVED, THE RIGHT WAY <div class=“item”> Item 1 </div>
<div class=“item”> Item 2 </div> <div class=“item”> Item 3 </div> <div class=“item”> Item 4 </div> <div class=“item”> Item 5 </div> <div class=“item”> Item 6 </div>
@media screen and (min-width: 481px) and .test[data-columns]::before { content: ‘2
.column.size-1of2’ } } @media screen and (min-width: 601px) and .test[data-columns]::before { content: ‘3 .column.size-1of3’ } } MEDIA QUERIES COMPATIBLE
IN USE lamula.pe tadpoles.in
GIVE IT A TRY salvattore.com by @rnmp and @ppold