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
CSS, LESS, & The New UI
Search
Matthew Osborn
June 29, 2015
Technology
0
220
CSS, LESS, & The New UI
A brown bag on using CSS and LESS
Matthew Osborn
June 29, 2015
Tweet
Share
More Decks by Matthew Osborn
See All by Matthew Osborn
Palmetto - Introductory Messaging
osbornm
0
86
React: How to JavaScript Hipster
osbornm
0
160
UX / UI - Lunch & Learn
osbornm
0
300
Practical Knockout
osbornm
0
170
AMD with RequireJS
osbornm
0
150
3D Printing Introduction
osbornm
0
120
Practical HTML 5
osbornm
2
480
Playr
osbornm
1
730
NuGet: Add Reference, Awesome
osbornm
1
940
Other Decks in Technology
See All in Technology
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
390
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
560
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
140
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
7
2.2k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.8k
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
200
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
270
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
210
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
1
130
Git in Team
kawaguti
PRO
3
370
フレームワークを意識させないワークショップづくり
keigosuda
0
180
Featured
See All Featured
Six Lessons from altMBA
skipperchong
29
4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Side Projects
sachag
455
43k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
It's Worth the Effort
3n
187
28k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
CSS, LESS, & THE NEW UI PART I
BOX MODEL
ELEMENTS INLINE BLOCK
ELEMENTS SPAN H[1-‐6] DIV A ARTI CLE SECTION P
I HEADE R BUTTON NAV INPUT STRONG OL CODE UL FORM PRE DD TABLE LI
ELEMENTS SPAN H[1-‐6] DIV A ARTI CLE SECTION P
I HEADE R BUTTON NAV INPUT STRONG OL CODE UL FORM PRE DD TABLE LI
ELEMENTS SPAN H[1-‐6] DIV A ARTI CLE SECTION P
I HEADE R BUTTON NAV INPUT STRONG OL CODE UL FORM PRE DD TABLE LI
SELECTORS ELEMENT CLASS ID ATTRIBUTE PSEUDO-‐CLASS
HIERARCHY
ELEMENT P { background-‐color: #ebebeb; margin: 10px 0
10px 0; } div, Section { background: #fff; padding: 10px 0; } Article { padding: 10px; }
CLASS .foo { background-‐color: #ebebeb; margin: 10px 0
10px 0; } div.foo { background: #fff; padding: 10px 0; } .foo.bar { padding: 10px; }
ID #foo { background-‐color: #ebebeb; margin: 10px 0
10px 0; } div#foo { background: #fff; padding: 10px 0; } #foo.bar { padding: 10px; }
HIERARCHY div .foo { background-‐color: #ebebeb; margin: 10px
0 10px 0; } div > foo { background: #fff; padding: 10px 0; } #foo + .bar { padding: 10px; }
ATTRIBUTE div[required] { background-‐color: #ebebeb; margin: 10px 0
10px 0; } #foo[placeholder=‘bar’] { background: #fff; padding: 10px 0; } .foo[placeholder~=‘bar’] { padding: 10px; }
PSEUDO CLASS div:hover { background-‐color: #ebebeb; margin: 10px
0 10px 0; } #foo:visited { background: #fff; padding: 10px 0; } .foo:last-‐child { padding: 10px; }
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO,
ATTRIBUTE ELEMENT MOST LEAST
s impler emantic maller s s
<style> .rounded {
padding: 10px; position: relative; } .rounded-‐top-‐left, .rounded-‐top-‐right, .rounded-‐bottom-‐left, .rounded-‐bottom-‐right { height: 10px; position: absolute; width: 10px; } .rounded-‐top-‐left { background-‐image: url(../images/topleft.gif); left: 0; top: 0; } .rounded-‐top-‐right { background-‐image: url(../images/topright.gif); right: 0; top: 0; } .rounded-‐bottom-‐left { background-‐image: url(../images/bottomleft.gif); bottom: 0; left: 0; } .rounded-‐bottom-‐left { background-‐image: url(../images/bottomright.gif); bottom: 0; left: 0; } </style> <div> <div class="rounded-‐top-‐left"></div> <div class="rounded-‐top-‐right"></div> <p>Rounded Corners</p> <div class="rounded-‐bottom-‐left"></div> <div class="rounded-‐bottom-‐right"></div> </div> <style> .rounded { border-‐radius: 10px; } </style> <p class="rounded"> Rounded corners </p> 47 lines 9 lines
<script> $(function () { $("input[type=text]").each(function
() { $(this).val(this.title); $(this).addClass("placeholder"); }); $("input[type=text]").focus(function () { if ($(this).val() === this.title) { $(this).val = ""; $(this).removeClass("placeholder"); } }); $("input[type=text]").blur(function () { if ($(this).val() === "") { $(this).val(this.title); $(this).addClass("placeholder"); } }); }); </script> <form action="/stuff" method="post"> <input type="text" name="value" title="Value" /> <input type="submit" value="Submit" /> </form> <form action="/stuff" method="post"> <input type="text" name="value" placeholder="Value" /> <input type="submit" value="Submit" /> </form> 1 path 5 paths
<div class="header"> <div id="nav">
<ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> <div class="page-‐body"> <div class="post"> <p>Some Content</p> </div> <div id="ads">Ad</div> </div> <div id="footer"> © </div>
<header> <nav> <ul>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav> </header> <section> <article> <p>Some Content</p> </article> <aside>Ad</aside> </section> <footer> © </footer> fixed
COMP > CODE REVIEW ALL THE COMPS WRITE THE
HTML WRITE THE STYLES
COMP > CODE LOOK AT ALL STATES LOOK FOR
COMMOM BITS LOOK TRANSITIONS
COMP > CODE PRESEVRE RELATIONSHIPS LESS IS MORE
VIEW WITH NO STYLING
COMP > CODE LESS IS MORE AS VAGUE AS
POSSIBLE
HANDS ON LAB
CSS, LESS, & THE NEW UI PART II
HANDS ON LAB
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO,
ATTRIBUTE ELEMENT MOST LEAST
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO,
ATTRIBUTE ELEMENT UL
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO,
ATTRIBUTE ELEMENT UL 1
SPECIFICITY 0001 1 UL
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO,
ATTRIBUTE ELEMENT .foo
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO,
ATTRIBUTE ELEMENT .foo 1
SPECIFICITY 0010 1 .foo
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO,
ATTRIBUTE ELEMENT ul#foo
SPECIFICITY STYLE ATTRIBUTE ID CLASS, PSEUDO,
ATTRIBUTE ELEMENT ul#foo 1 1
SPECIFICITY 0101 1 ul#foo 1
SPECIFICITY body div ul#foo li.bar ul#foo li#baz
SPECIFICITY body div ul#foo li.bar ul#foo li#baz
114 212
SPEED ID CLASS TAG UNIVERSAL FAST
SLOW
SPEED #main-‐navigaRon body.home #page-‐wrap
.main-‐navigaRon ul li a.current ul ul li a * #content [Rtle='home'] ID ID Class Class Tag Tag Universal Universal
SPEED RIGHT TO LEFT
SPEED #main-‐nav > li
SPEED #main-‐nav > li ALL li ELEMENTS DECENDENTS
OF #main-‐nav
SPEED #foo #bar ul#baz a
SPEED #foo #bar ul#baz a EXTREMELY SLOW COULD
BE HARD TO OVERRIDE
FLOAT & POSITION
FLOAT float: right;
POSITION top: 0; right: 0;
FLOAT VS POSITION
FLOAT
POSITION
LESS SYNTAX VARIBLES FUNCTIONS MIXINS CALCULATIONS
NESTING IMPORTS
LESS SYNTAX /* NESTING */ #header {
color: red; a { text-‐decoration: none; } } /* GENERATED CSS */ #header { color: red; } #header a { text-‐decoration: none; }
LESS SYNTAX /* NESTING CONT’N */ #header {
a { text-‐decoration: none; &:hover { color: blue; } } } /* GENERATED CSS */ #header a { text-‐decoration: none; } #header a:hover { color: blue; }
LESS SYNTAX /* VARIBLES */ @nice-‐blue: #5B83AD;
@light-‐blue: @nice-‐blue + #111; #header { color: @light-‐blue; } /* GENERATED CSS */ #header { color: #6c94be; }
LESS SYNTAX /* FUNCTIONS */ .box-‐shadow(@style, @c) when
(iscolor(@c)) { -‐webkit-‐box-‐shadow: @style @c; -‐moz-‐box-‐shadow: @style @c; box-‐shadow: @style @c; } #header { .box-‐shadow(0 0 0 5px, #000); } /* GENERATED CSS */ #header { -‐webkit-‐box-‐shadow: 0 0 0 5px #000000; -‐moz-‐box-‐shadow: 0 0 0 5px #000000; box-‐shadow: 0 0 0 5px #000000; }
LESS SYNTAX /* IMPORTS */ @import “foo.less”
@import “bar.css” @import “baz.cshtml” /* COMMENT */ * CSS is also valid less * Depending on conversion client can request and file that returns valid less.
LESS SYNTAX lesscss.org less2css.org
HANDS ON LAB