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
79
React: How to JavaScript Hipster
osbornm
0
130
UX / UI - Lunch & Learn
osbornm
0
260
Practical Knockout
osbornm
0
140
AMD with RequireJS
osbornm
0
100
3D Printing Introduction
osbornm
0
88
Practical HTML 5
osbornm
2
440
Playr
osbornm
1
680
NuGet: Add Reference, Awesome
osbornm
1
900
Other Decks in Technology
See All in Technology
Observabilityジャーニーを実現するためのAWSサービス:OSS編
o11yfes2023
0
110
「できる!」を増やすGitHub Copilot活用法 / How to use GitHub Copilot to expand your possibilities
sansan_randd
1
240
iThome2024 Wailing Wall of Enterprise Security
notsurprised
0
280
Prisma ORMを2年運用して培ったノウハウを共有する
tockn
19
5k
TDD - Test Driven Drupal
opdavies
0
3k
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
390
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
37k
Dungeons and Dragons and Rails
joelq
0
230
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
2.9k
OPENLOGI Company Profile for engineer
hr01
1
2.1k
汎用ポリシー言語Rego + OPAと認可・検証事例の紹介 / Introduction Rego & OPA for authorization and validation
mizutani
1
140
Shinagile 2024
kawaguti
PRO
2
120
Featured
See All Featured
Design by the Numbers
sachag
274
18k
Building Adaptive Systems
keathley
32
1.9k
Automating Front-end Workflow
addyosmani
1357
200k
What's new in Ruby 2.0
geeforr
338
31k
Rails Girls Zürich Keynote
gr2m
91
13k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
A better future with KSS
kneath
231
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
67
14k
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