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
190
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
80
React: How to JavaScript Hipster
osbornm
0
140
UX / UI - Lunch & Learn
osbornm
0
270
Practical Knockout
osbornm
0
140
AMD with RequireJS
osbornm
0
110
3D Printing Introduction
osbornm
0
90
Practical HTML 5
osbornm
2
440
Playr
osbornm
1
690
NuGet: Add Reference, Awesome
osbornm
1
910
Other Decks in Technology
See All in Technology
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.1k
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
24
3.2k
Optimizing for Happiness
mojombo
373
69k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
How to Think Like a Performance Engineer
csswizardry
4
590
Become a Pro
speakerdeck
PRO
15
4.8k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Designing the Hi-DPI Web
ddemaree
276
34k
GraphQLとの向き合い方2022年版
quramy
36
13k
Typedesign – Prime Four
hannesfritz
37
2.2k
What the flash - Photography Introduction
edds
65
11k
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