端端舝

Hiroki Tani
2015.02.07CSS Nite LP39

Frontend Developer, CSS Architect
Hiroki Tani

唬釦釦扢數及燴砑午珋灍

@cssradar @t32k @hiloki
https://frontendweekly.tokyo/

.selector {
property: value;
}

※
§Yuya Saito a.k.a. CSSRadar

http://codepen.io/hiloki/full/dnGeB

.speaker {
overflow: hidden; /* Clearfix */
padding: 20px;
background-color: #fff;
}
.speaker .avatar {
float: left;
margin-right: 15px;
}
.speaker .avatar > img {
border-radius: 50%;
}
.speaker .inner {
overflow: hidden;
}
＃

.book {
padding: 20px;
background-color: #9DBCB8;
color: #FFF;
}
.book .cover {
float: left;
margin-right: 20px;
}
.book .inner {
overflow: hidden;
}
.book .title {
...
}
...

.event > a {
display: block;
}
.event .thumbnail {
float: left;
margin-right: 15px;
}
.event .inner {
overflow: hidden;
}
＃

/* Media */
.media {
}
.media > .image {
float: left;
}
.media > .body {
overflow: hidden;
}

.speaker {
padding: 20px;
}
.speaker .avatar {
float: left;
margin-right: 15px;
}
border-radius: 60px;
}
.speaker .inner {
overflow: hidden;
}
＃
.speaker {
padding: 20px;
}
.speaker .avatar {
float: left;
margin-right: 15px;
}
border-radius: 60px;
}
.speaker .inner {
overflow: hidden;
}
＃

Hiroki Tani
Hiroki Tani
Block
Element
Modifier

/* Media */
.media {
}
.media__image {
float: left;
}
.media__body {
overflow: hidden;
}

https://github.com/hiloki/flocss

.grid {
/* Clearfix code */
}
.grid--4 .grid__cell {
width: 25%;
}
width: 20%;
}
.grid__cell {
box-sizing: border-box;
float: left;
padding-left: 10px;
padding-right: 10px;
}
@media (max-width: 640px) {
.grid--4 .grid__cell,
width: 100%;
}
.grid__cell {
float: none;
}
}

.text-large,
.text-huge {
font-size: 18px;
}
}
.text-large {
font-size: 24px;
}
.text-huge {
font-size: 48px;
}

.text-24 {
font-size: 24px;
}
.text-48 {
font-size: 48px;
}
!
.text-24,
.text-48 {
font-size: 18px;
}
}

.orange {
background-color: #f26522
}

.orange {
background-color: #6cc655
}

.brand-color {
background-color: #6cc655
}

.speaker__book {
padding: 20px;
background-color: #E9EFE8;
}
.speaker__book__image {
margin-right: 20px;
}
.speaker__book__name {
margin-bottom: 10px;
line-height: 1.3;
font-weight: bold;
font-size: 1.2em;
}
.speaker__book__info {
font-size: 0.875em;
color: #666;
}

.speaker__book {
padding: 20px;
}
.speaker__bookImage {
margin-right: 20px;
}
.speaker__bookName {
line-height: 1.3;
font-weight: bold;
font-size: 1.2em;
}
.speaker__bookInfo {
font-size: 0.875em;
color: #666;
}

.book {
padding: 20px;
}
.book__image {
margin-right: 20px;
}
.book__name {
line-height: 1.3;
font-weight: bold;
font-size: 1.2em;
}
.book__info {
font-size: 0.875em;
color: #666;
}

Nicolas Gallagher, About HTML semantics and front-end architecture
※
§

%media {
}
%media__image {
float: left;
margin-right: 15px;
}
%media__body {
overflow: hidden;
}
!
%avatar {
> img {
border-radius: 50%;
}
}

.speaker {
@extend %media;
}
.speaker-avatar {
@extend %media__image;
@extend %avatar;
}

.speaker {
@extend %media;
}
.speaker-avatar {
@extend %media__image;
@extend %avatar;
}
!
.book {
@extend %media;
}
!
.event {
@extend %media;
}

%media
.speaker .book .event
.event {
@extend .book;
}

%media
.speaker .book .event
.event { // error
@extend .book;
}

rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3 ul,.mod_listType
ul,.mod_listType5 ul,.mod_listType7 ul,.mod_listType8 ul{background-
color:#fff;border:1px solid #c3c3c3;overflow:hidden;border-radius:
12px}.mod_listType1 ul li,.mod_listType3 ul li,.mod_listType4 ul li,.mo
ul li,.mod_listType7 ul li,.mod_listType8 ul li{border-top:#C3C3C2 1px
solid;margin-top:-1px;margin-bottom:1px;font-size:16px}.mod_listType1 u
child a.disable,.mod_listType1 ul li:last-child a.disable,.mod_listType
li:first-child a.disable,.mod_listType3 ul li:last-child a.disable,.mod
ul li:first-child a.disable,.mod_listType4 ul li:last-child
a.disable,.mod_listType5 ul li:first-child a.disable,.mod_listType5 ul
child a.disable,.mod_listType7 ul li:first-child a.disable,.mod_listTyp
li:last-child a.disable,.mod_listType8 ul li:first-child a.disable,.mod
ul li:last-child a.disable{border-radius:12px}.mod_listType1 ul li a,.m
ul li a,.mod_listType4 ul li a,.mod_listType5 ul li a,.mod_listType7 ul
a,.mod_listType8 ul li a{display:block;width:100%;padding:.75em .7em;bo
sizing:border-box;-webkit-text-shadow:1px 1px 2px rgba(0,0,0,.25);text-
1px 2px rgba(0,0,0,.25);position:relative}.mod_listType1 ul li
a::after,.mod_listType11 ul li a::after,.mod_listType12 ul li

rgba(255,255,255,.75)}.mod_listType1 ul,.mod_listType3 ul,.mod_listType
ul,.mod_listType5 ul,.mod_listType7 ul,.mod_listType8 ul{background-
color:#fff;border:1px solid #c3c3c3;overflow:hidden;border-radius:
12px}.mod_listType1 ul li,.mod_listType3 ul li,.mod_listType4 ul li,.mo
ul li,.mod_listType7 ul li,.mod_listType8 ul li{border-top:#C3C3C2 1px
solid;margin-top:-1px;margin-bottom:1px;font-size:16px}.mod_listType1 u
child a.disable,.mod_listType1 ul li:last-child a.disable,.mod_listType
li:first-child a.disable,.mod_listType3 ul li:last-child a.disable,.mod
ul li:first-child a.disable,.mod_listType4 ul li:last-child
a.disable,.mod_listType5 ul li:first-child a.disable,.mod_listType5 ul
child a.disable,.mod_listType7 ul li:first-child a.disable,.mod_listTyp
li:last-child a.disable,.mod_listType8 ul li:first-child a.disable,.mod
ul li:last-child a.disable{border-radius:12px}.mod_listType1 ul li a,.m
ul li a,.mod_listType4 ul li a,.mod_listType5 ul li a,.mod_listType7 ul
a,.mod_listType8 ul li a{display:block;width:100%;padding:.75em .7em;bo
sizing:border-box;-webkit-text-shadow:1px 1px 2px rgba(0,0,0,.25);text-
1px 2px rgba(0,0,0,.25);position:relative}.mod_listType1 ul li
a::after,.mod_listType11 ul li a::after,.mod_listType12 ul li
440kbgzinpped

#main .feature h2 {
border-bottom: 2px solid #F30;
padding: 0.5em 0.2em;
font-size: 1.2em;
}
!
#main .feature .body {
padding: 0 1em;
font-size: 1em;
}

<div id="content">
<div id="main">
<div class="feature">
<h2>Heading</h2>
<div class="body">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>

#main .feature h2 {
border-bottom: 2px solid #F30;
padding: 0.5em 0.2em;
font-size: 1.2em;
!
!
!
}
#content h2 {
color: #F30
}
?/* color
color: #F30
*/

.sidebar .nav .menu li a {
display: block;
border-bottom: 1px solid #899;
padding: 1em;
}
.sidebar .nav .menu .sub-menu {
padding: 0.5em;
background: #EEE;
}
.sidebar .nav .menu .sub-menu li a {
border-bottom: 0;
padding: 0.7em 1em;
}

.side-menu li a {
display: block;
padding: 1em;
}
.side-sub-menu {
padding: 0.5em;
background: #EEE;
}
.side-sub-menu li a {
border-bottom: 0;
padding: 0.7em 1em;
}

.side-menu > li > a {
display: block;
padding: 1em;
}
.side-sub-menu {
padding: 0.5em;
background: #EEE;
}
.side-sub-menu > li > a {
border-bottom: 0;
padding: 0.7em 1em;
}

.side-menu__item {
display: block;
padding: 1em;
}
.side-sub-menu {
padding: 0.5em;
background: #EEE;
}
.side-sub-menu__item {
border-bottom: 0;
padding: 0.7em 1em;
}

https://github.com/gruntjs/grunt-contrib-csslint

.btn-default {
color: #333;
border-color: #ccc;
}
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}

.default-button {
color: #333;
border-color: #ccc;
}
.primary-button {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
}
.info-button {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}

https://speakerdeck.com/dafed/managing-css-projects-with-itcss

Setting
Tools
Generic
Base
Objects
Components
Trumps

$color-ui: #BADA55;
$spacing-unit: 10px;
$type-brand: "UI Font";

@mixin font-brand() {
font-family: $type-brand;
font-weight: 400;
}

* {
box-sizing: border-box;
}

.ul-list {
margin: 0;
padding: 0;
list-style: none;
}
.ul-list__item {
padding: $spacing-unit;
}

.products-list {
@include font-brand;
background: $color-ui;
}
.products-list__item {
padding: $spacing-unit;
color: #FFF;
}

.one-half {
width: 50% !important;
}

"## _base.links.scss
"## _base.page.scss
"## _base.quotes.scss
"## _base.type.scss
"## _components.ads.scss
"## ...
"## _components.promo.scss
"## _components.pull-quote.scss
"## _objects.wrappers.scss
"## _settings.colors.scss
"## _settings.global.scss
"## _tools.aliases.scss
"## _tools.mixins.scss
"## _trumps.show-hide.scss
"## _trumps.widths-responsive.scss
$## csswizardry.scss
https://github.com/csswizardry/csswizardry.github.com/

/**
* #SETTINGS
*/
@import "bower_components/inuit-defaults/settings.defaults";
@import "settings.global";
@import "settings.colors";
@import "bower_components/inuit-responsive-settings/settings.responsive";
!
/**
* #TOOLS
*/
@import "bower_components/inuit-functions/tools.functions";
@import "bower_components/inuit-mixins/tools.mixins";
@import "tools.mixins";
@import "bower_components/inuit-responsive-tools/tools.responsive";
@import "tools.aliases";
!
/**
* #GENERIC
*/
@import "bower_components/inuit-normalize/generic.normalize";
@import "bower_components/inuit-reset/generic.reset";
@import "bower_components/inuit-box-sizing/generic.box-sizing";
@import "bower_components/inuit-shared/generic.shared";
!

.box-a {
margin: 10px;
border-radius: 6px;
background-color: rgba(239,206,130);
}
.box-b {
margin: 15px;
border-radius: 3px;
}
!
.ball-a {
margin: 15px 20px;
border-radius: 100%;
}
.ball-b {
margin: 12px 24px;
border-radius: 80%;
}

.box-a {
margin: 15px;
border-radius: 6px;
}
.box-b {
margin: 10px;
border-radius: 6px;
}
!
.ball-a {
margin: 15px 20px;
}
.ball-b {
margin: 15px;
}

.box {
border-radius: 6px;
}
.box-a {
margin: 15px;
}
.box-b {
margin: 10px;
}
!
.ball {
}
.ball-a {
margin: 15px 20px;
}
.ball-b {
margin: 15px;
}

http://rizzo.lonelyplanet.com/styleguide/

.ranking__item {
counter-increment : rank;
...
}
.ranking__item:before {
display: inline-block;
content: counter(rank);
...
}
.ranking__item:nth-child(1):before {
background-color: #ffd700;
}
background-color: #C0C0C0;
}
background-color: #C87533;
}

.ranking__item {
counter-increment : rank;
...
}
.ranking__rank {
display: inline-block;
content: counter(rank);
...
}
.ranking__rank--1 {
background-color: #ffd700;
}
.ranking__rank--2 {
background-color: #C0C0C0;
}
.ranking__rank--3 {
background-color: #C87533;
}

The first draft of anything is shit.
Ernest Hemingway
※ §

Christopher Alexandar, A pattern language
※
§

twitter.com/hiloki
Thanks
github.com/hiloki

端端舝

唬釦釦扢數及燴砑午珋灍

More Related Content

唬釦釦扢數及燴砑午珋灍