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
84
React: How to JavaScript Hipster
osbornm
0
150
UX / UI - Lunch & Learn
osbornm
0
290
Practical Knockout
osbornm
0
160
AMD with RequireJS
osbornm
0
140
3D Printing Introduction
osbornm
0
110
Practical HTML 5
osbornm
2
470
Playr
osbornm
1
730
NuGet: Add Reference, Awesome
osbornm
1
940
Other Decks in Technology
See All in Technology
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
30
11k
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
4k
5min GuardDuty Extended Threat Detection EKS
takakuni
0
160
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
OpenHands🤲にContributeしてみた
kotauchisunsun
1
470
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
600
GitHub Copilot の概要
tomokusaba
1
140
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
300
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
120
Kotlin Coroutine Mechanisms: A Surprisingly Deep Rabbithole
amanda_hinchman
2
100
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Being A Developer After 40
akosma
90
590k
Building an army of robots
kneath
306
45k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
It's Worth the Effort
3n
185
28k
Writing Fast Ruby
sferik
628
62k
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