Movatterモバイル変換

[0]ホーム
URL:

拓樹 谷, profile picture
Uploaded by拓樹 谷
PDF, PPTX37,337 views

メンテナブルでありつづけるためのCSS設計

2014年11月8日 大阪 「Web制作者のためのCSS設計の教科書」出版記念イベント x CSSオジサン #0 のスライドです。

Embed presentation

Download as PDF, PPTX
ًٝذشـٕד֮׶אבֽ׷׋׭ך$44鏣鎘 8FCⵖ⡲罏ך׋׭ך$44鏣鎘ך侄猰剅$44ؔآ؟ٝ
http://www.slideshare.net/hiloki/thinking-about-css-architecture
靼䬪埠 Hiroki Tani Front-end Engineer ! github.com/hiloki twitter.com/hiloki inkdesign.jp
1994.10.10
http://codepen.io/hiloki/full/ahdEF
20 years of CSS 鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ ،صً٦ءّٝծؿ؍ٕةծFUD
20 years of CSS 鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ ،صً٦ءّٝծؿ؍ٕةծFUD
$44כ㠨׸װְׅ
㠨׸װְׅ ͑ 僒׃ְ
Easy .text { color: green; }
Easy .text { color: green; } ! .lead .text { color: blue } div class=lead /div
too Fragile #main { ... } #main .article { ... } #main .article .title { #main .breaking .title { #header #logo img { ... #header li#logoTop { ... #header li#logoTop:after .article-header .datetime ul.member-list li.member .widget p,.widget ul { ... #sidebar .widget { ... } #sidebar li a.register{} body.landing #main section #slider-control div { #bannerList li div#rotate
! ⏲ # 
㠨׸זְ㸣樴ז鏣鎘׾実׭׷ךדכזֻծ 㠨׸׋הֹח⹃孡׾䭯׏ג⥜䗁דֹ׷鏣鎘׾ ˑ 俕谏牂⛲
OOCSS Nicole Sullivan @stubbornella
http://codepen.io/hiloki/full/dnGeB
div class=speaker div class=image img src=tani.jpg /div div class=inner p class=name…/p div class=biography p.../p /div /div /div
.speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
div class=book div class=cover img src=book.jpg /div div class=inner p class=title.../p p class=info ... /p div class=intro p.../p /div ul class=shop li.../li /ul /div /div
.book { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
div class=event a href=event.html div class=thumbnail img src=event.jpg /div div class=inner p class=event__name … /p /div /a /div
.event a { display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
%
/* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
div class=media speaker div class=media__image image img src=tani.jpg /div div class=media__body inner p class=name…/p div class=biography p.../p /div /div /div
div class=media book div class=media__image cover img src=book.jpg /div div class=media__body inner p class=title.../p p class=info ... /p div class=intro p.../p /div ul class=shop li.../li /ul /div /div
div class=media event a href=event.html div class=media__image thumbnail img src=event.jpg /div div class=media__body inner p class=event__name … /p /div /a /div
.speaker { overflow: hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
.book { overflow: hidden; /* Clearfix */ 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; } …
OOCSS
OOCSS SMACSS BEM SUIT CSS AMCSS MCSS FLOCSS
⥯ך $44鏣鎘ךه؎ٝز
1 إؙٖةכ崮ֻծ䠐㔳涸ח
2 ㄏせ鋉⵱׾䭯א
/* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
/* Media */ .media { overflow: hidden; /* Clearfix */ } .media .image { float: left; margin-right: 15px; } .media .body { overflow: hidden; }
/* Media */ .media { overflow: hidden; /* Clearfix */ } .media .image { float: left; margin-right: 15px; } .media .body { overflow: hidden; }
/* Media */ .media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
https://github.com/hiloki/flocss
/* Media */ .c-media { overflow: hidden; /* Clearfix */ } .c-media__image { float: left; margin-right: 15px; } .c-media__body { overflow: hidden; }
!-- 一般的でない略称は避ける -- div class=c-wdt p-rcmdTpcs__li よくわからない /div ! div class=c-widget p-recommendTopics__list 長い...が分かる /div
/* Emmet/Zen-codingのAliasを参考にする */ .u-mts { margin-top: 10px } /* margin-top small */ .u-vam { vertical-align: middle } .u-fl { float: left }
3 㔐粸׶鵤׃׋׵؝ٝه٦طٝزךⱄ鏣鎘
@@@


@@

4 +4ךة٦؜حزחأة؎ٕ׾䭯׋ׇזְ
$('.profile .button') .on('click', function(e){ ... });
div class=profile ... button class=button Save! /button /div
div class=profile ... button class=“profile__button” Save! /button /div
$('.js-save-profile') .on('click', function(e){ ... });
/* スタイルを持たせてはいけない */ .js-save-profile { ... }
div class=profile ... button class=“button js-save-profile“ Save! /button /div
div class=profile ... button class=“profile__button js-save-profile” Save! /button /div
button class=c-button js-tap” Tappable /button ! !-- カスタムデータ属性を使う -- button class=c-button data-tap Tappable /button
5 TUZMF㾩䚍דך鎸鶢כ窫㼎׃זְ
div style=“margin-bottom: 242pxblah blah blah/div
6 ؝٦سךⱄⵃ欽ָׅץגדכזְ
h1 class=section heading The Heading /h1 ! div class=section The Box /div
.section { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; } ! .heading { margin-bottom: 20px; font-size: 18px; font-weight: bold; }
.section { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; } ! .heading { margin-bottom: 20px; padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; font-size: 18px; font-weight: bold; }
h1 class=heading The Heading /h1 ! div class=section The Box /div
.s-box { padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; }
h1 class=“s-box heading” The Heading /h1 ! div class=s-box section The Box /div
7 رؠ؎ش٦הך؝ىُص؛٦ءّٝ
$44فٔفٗإح؟כ鏣鎘ך㉏겗׾鍑寸ׅ׷
No. 
.btn { ... } ! .btn--primary { background-color: #F31; color: #FFF; } ! .btn--large { font-size: 1.5em; }
a class=btn btn--primarySave/a ! a class=btn btn--primary btn--largeRegister/a
%btn { display: inline-block; border-radius: 6px; vertical-align: middle; padding: .6em 1em; cursor: pointer; } ! %btn--primary { background-color: #F31; color: #FFF; font-weight: 700; } ! %btn--large { font-size: 1.5em; }
.save-button { @extend %btn; @extend %btn--primary; } ! .register-button { @extend %btn; @extend %btn--primary; @extend %btn--large; }
.save-button, .register-button { display: inline-block; border-radius: 6px; vertical-align: middle; padding: .6em 1em; cursor: pointer; } ! .save-button, .register-button { background-color: #F31; color: #FFF; font-weight: 700; } ! .register-button { font-size: 1.5em; }
a class=save-buttonSave/a ! a class=register-buttonRegister/a
Smart!
Smart! ׃ַ׃䪔ְָꨇ׃ְ
.mod_listType1 { section { margin-bottom:1em; } h1 { margin:0 0 .5em .5em; font-size:fz(15); -webkit-text-shadow:0px 1px 0px rgba(255,255,255,0.75); text-shadow:0px 1px 0px rgba(255,255,255,0.75); } ul { background-color:#ffffff; border:#c3c3c3 1px solid; overflow:hidden; @include radius(12px); li { border-top:#C3C3C2 1px solid; margin-top:-1px; margin-bottom:1px; font-size:fz(16); :first-child { a.disable { @include radius-tr(12px); @include radius-tl(12px); }
/* listType */ .mod_listType1 section, .mod_listType3 section, .mod_listType4 section, .mod_listType5 section, .mod_listType8 section, .mod_listType7 section { margin-bottom: 1em; } .mod_listType1 h1, .mod_listType3 h1, .mod_listType4 h1, .mod_listType5 h1, .mod_listType8 h1, .mod_listType7 h1 { margin: 0 0 .5em .5em; font-size: 15px; -webkit-text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); } .mod_listType1 ul, .mod_H[JQ䖓 listType3 ul, .mod_listType4 ul, .mod_listType5 ul, .mod_listType8 ul, .mod_listType7 ul { background-border: overflow: border-440kb color: #ffffff; #c3c3c3 1px solid; hidden; radius: 12px; } .mod_listType1 ul li, .mod_listType3 ul li, .mod_listType4 ul li, .mod_listType5 ul li, .mod_listType8 ul li, .mod_listType7 ul li { border-top: #C3C3C2 1px solid; margin-top: -1px; margin-bottom: 1px; font-size: 16px; } .mod_listType1 ul li:first-child a.disable, .mod_listType3 ul li:first-child a.disable, .mod_listType4 ul li:first-child a.disable, .mod_listType5 ul li:first-child a.disable, .mod_listType8 ul li:first-child a.disable, .mod_listType7 ul li:first-child a.disable { border-radius: 12px; border-radius: 12px; } .mod_listType1 ul li:last-child a.disable, .mod_listType3 ul li:last-child a.disable, .mod_listType4 ul li:last-child a.disable, .mod_listType5 ul li:last-child a.disable, .mod_listType8 ul li:last-child a.disable, .mod_listType7 ul li:last-child a.disable { border-radius: 12px; border-radius: 12px;
Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
.c-button--primary { $primaryColor: #F31; background-color: $primaryColor; :hover { background-color: mix($primaryColor,#FFF,80%); } }
Do 1BSUJBM!JNQPSU 知⽃ז!NJYJO ⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
// pc.app.scss // // Foundation @import foundation/normalize; @import foundation/variables; @import foundation/mixin; @import “foundation/base”; ! // Layout @import layout/app; ! // Object @import object/components/button; @import object/components/avatar; @import object/components/media; @import object/project/header; @import object/project/profile; @import object/project/articles;
// object/project/_profile.scss // // =============== // # Profile // =============== ! .p-profile {...} .p-profile__avatar {...} .p-profile__name {...} .p-profile__biography {...} ...
pc.app.scss pc.lp.scss sp.app.scss sp.lp.scss
pc.app.scss pc.lp.scss sp.app.scss sp.lp.scss
/** * Concatenation **/ concat: { pc: { files: { 'temp/pc.app.scss': [ 'app/stylesheets/foundation/*.scss', 'app/stylesheets/layout/_app.scss', 'app/stylesheets/object/component/*.scss', 'app/stylesheets/object/project/*.scss', 'app/stylesheets/object/utility/*.scss' ] } }, sp: { files: { 'temp/sp.app.scss': [ 'app/stylesheets/foundation/*.scss', 'app/stylesheets/layout/_app.scss', 'app/stylesheets/object/component/sp/*.scss', 'app/stylesheets/object/project/sp/*.scss', 'app/stylesheets/object/utility/sp/*.scss'
The first draft ˑ of anything is shit قىؚٝؐؑ؎
Thank you! ! github.com/hiloki twitter.com/hiloki inkdesign.jp

Recommended

PDF
Thinking about CSS Architecture
PDF
Why Sass?
PDF
CSS Components
PDF
CSS設計の理想と現実
PDF
Middleman 一小時完成你的專案原形
PDF
Professional Web Development
PDF
How to Win the Heart of CSS Boys
PDF
HTML, CSS i Javascript Web tehnologije - 2. predavanje - Startit.rs
TXT
Johny see book update
PDF
HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs
PDF
Jogos: indo além do simples CSS 3.0
TXT
thiết kế website bằng blogspot
TXT
Johny coba dulu
 
TXT
Index
PDF
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
PDF
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
DOCX
Practica #4 equipo 4
PDF
box model
 
RTF
Documento
PDF
CSS 101
PDF
CSS-методологии от О до Б
PDF
Основы CSS препроцессоров и их использование в WordPress
PDF
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
PPT
Joomla Day Austin Part 3
DOCX
Portafolio 2do Parcial
TXT
Code blogtangcan
PDF
Basic HTML
PPT
CSS Technieken Toegelicht
PPTX
2016年版 フロントエンド開発フォーマット
PDF
ブラウザにやさしいHTML/CSS

More Related Content

PDF
Thinking about CSS Architecture
PDF
Why Sass?
PDF
CSS Components
PDF
CSS設計の理想と現実
PDF
Middleman 一小時完成你的專案原形
PDF
Professional Web Development
PDF
How to Win the Heart of CSS Boys
PDF
HTML, CSS i Javascript Web tehnologije - 2. predavanje - Startit.rs
Thinking about CSS Architecture
Why Sass?
CSS Components
CSS設計の理想と現実
Middleman 一小時完成你的專案原形
Professional Web Development
How to Win the Heart of CSS Boys
HTML, CSS i Javascript Web tehnologije - 2. predavanje - Startit.rs

What's hot

TXT
Johny see book update
PDF
HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs
PDF
Jogos: indo além do simples CSS 3.0
TXT
thiết kế website bằng blogspot
TXT
Johny coba dulu
 
TXT
Index
PDF
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
PDF
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
DOCX
Practica #4 equipo 4
PDF
box model
 
RTF
Documento
PDF
CSS 101
PDF
CSS-методологии от О до Б
PDF
Основы CSS препроцессоров и их использование в WordPress
PDF
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
PPT
Joomla Day Austin Part 3
DOCX
Portafolio 2do Parcial
TXT
Code blogtangcan
PDF
Basic HTML
PPT
CSS Technieken Toegelicht
Johny see book update
HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs
Jogos: indo além do simples CSS 3.0
thiết kế website bằng blogspot
Johny coba dulu
 
Index
How to Turn Your Ugly Old CSS into a Clean Future-Ready Beauty
Novedades de Front-end 2016 (CSS3, HTML5 y APIs Javascript)
Practica #4 equipo 4
box model
 
Documento
CSS 101
CSS-методологии от О до Б
Основы CSS препроцессоров и их использование в WordPress
HTML5とは何か? HTML5はじめの一歩 - 多摩美メディア芸術基礎II-1
Joomla Day Austin Part 3
Portafolio 2do Parcial
Code blogtangcan
Basic HTML
CSS Technieken Toegelicht

Viewers also liked

PPTX
2016年版 フロントエンド開発フォーマット
PDF
ブラウザにやさしいHTML/CSS
PDF
CSS の歩き方
PDF
ヒューマンリーダブルな CSS 記述法（異次元編）：2016年5月13日 CodeGrid 四周年記念パーティー
PDF
なんでCSSすぐ死んでしまうん
PDF
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
PDF
大規模サイトにおける本当は怖いCSSの話
PDF
Web design
PDF
ノンデザイナーのためのWebデザイン講座
PDF
プログラマがWebデザインについて考えてみた
PDF
プログラマがデザインをがんばってみた
PDF
Webデザインのトーン＆マナーを導き出す手法
PDF
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
PDF
デザインのためのデザイン
PDF
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
PDF
Webデザインのセオリーを学ぼう
KEY
ノンデザイナーのための配色理論
PPT
色彩センスのいらない配色講座
2016年版 フロントエンド開発フォーマット
ブラウザにやさしいHTML/CSS
CSS の歩き方
ヒューマンリーダブルな CSS 記述法（異次元編）：2016年5月13日 CodeGrid 四周年記念パーティー
なんでCSSすぐ死んでしまうん
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
大規模サイトにおける本当は怖いCSSの話
Web design
ノンデザイナーのためのWebデザイン講座
プログラマがWebデザインについて考えてみた
プログラマがデザインをがんばってみた
Webデザインのトーン＆マナーを導き出す手法
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
デザインのためのデザイン
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
Webデザインのセオリーを学ぼう
ノンデザイナーのための配色理論
色彩センスのいらない配色講座

More from 拓樹 谷

PDF
Beyond CSS Architecture
PDF
モダンなCSS設計パターンを考える
PDF
モダンなCSS設計パターンを考える
PDF
Try Web Components
PDF
High Performance Webdesign
PDF
CSSプリプロセッサの取扱説明書
Beyond CSS Architecture
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
Try Web Components
High Performance Webdesign
CSSプリプロセッサの取扱説明書

メンテナブルでありつづけるためのCSS設計

  • 1.
  • 2.
  • 3.
    靼䬪埠 Hiroki TaniFront-end Engineer ! github.com/hiloki twitter.com/hiloki inkdesign.jp
  • 5.
  • 6.
  • 7.
    20 years ofCSS 鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ ،صً٦ءّٝծؿ؍ٕةծFUD
  • 8.
    20 years ofCSS 鄲귅ծٖ؎،ؐزծإؙٖةծًر؍،ծ ،صً٦ءّٝծؿ؍ٕةծFUD
  • 9.
  • 10.
  • 11.
    Easy .text {color: green; }
  • 12.
    Easy .text {color: green; } ! .lead .text { color: blue } div class=lead /div
  • 13.
    too Fragile #main{ ... } #main .article { ... } #main .article .title { #main .breaking .title { #header #logo img { ... #header li#logoTop { ... #header li#logoTop:after .article-header .datetime ul.member-list li.member .widget p,.widget ul { ... #sidebar .widget { ... } #sidebar li a.register{} body.landing #main section #slider-control div { #bannerList li div#rotate
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
    div class=speaker divclass=image img src=tani.jpg /div div class=inner p class=name…/p div class=biography p.../p /div /div /div
  • 19.
    .speaker { overflow:hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
  • 20.
    div class=book divclass=cover img src=book.jpg /div div class=inner p class=title.../p p class=info ... /p div class=intro p.../p /div ul class=shop li.../li /ul /div /div
  • 21.
    .book { overflow:hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  • 22.
    div class=event ahref=event.html div class=thumbnail img src=event.jpg /div div class=inner p class=event__name … /p /div /a /div
  • 23.
    .event a{ display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  • 24.
  • 26.
    /* Media */.media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  • 27.
    div class=media speakerdiv class=media__image image img src=tani.jpg /div div class=media__body inner p class=name…/p div class=biography p.../p /div /div /div
  • 28.
    div class=media bookdiv class=media__image cover img src=book.jpg /div div class=media__body inner p class=title.../p p class=info ... /p div class=intro p.../p /div ul class=shop li.../li /ul /div /div
  • 29.
    div class=media eventa href=event.html div class=media__image thumbnail img src=event.jpg /div div class=media__body inner p class=event__name … /p /div /a /div
  • 30.
    .speaker { overflow:hidden; /* Clearfix */ padding: 20px; background-color: #fff; } .speaker .image { float: left; margin-right: 15px; } .speaker .image img { border-radius: 60px; } .speaker .inner { overflow: hidden; } …
  • 31.
    .book { overflow:hidden; /* Clearfix */ padding: 20px; background-color: #9DBCB8; color: #FFF; } .book .cover { float: left; margin-right: 20px; } .book .inner { overflow: hidden; } .book .title { ... } ...
  • 32.
    .event a{ display: block; } .event .thumbnail { float: left; margin-right: 15px; } .event .inner { overflow: hidden; } …
  • 33.
  • 34.
    OOCSS SMACSS BEMSUIT CSS AMCSS MCSS FLOCSS
  • 35.
  • 36.
  • 37.
  • 38.
    /* Media */.media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  • 39.
    /* Media */.media { overflow: hidden; /* Clearfix */ } .media .image { float: left; margin-right: 15px; } .media .body { overflow: hidden; }
  • 40.
    /* Media */.media { overflow: hidden; /* Clearfix */ } .media .image { float: left; margin-right: 15px; } .media .body { overflow: hidden; }
  • 41.
    /* Media */.media { overflow: hidden; /* Clearfix */ } .media__image { float: left; margin-right: 15px; } .media__body { overflow: hidden; }
  • 42.
  • 43.
    /* Media */.c-media { overflow: hidden; /* Clearfix */ } .c-media__image { float: left; margin-right: 15px; } .c-media__body { overflow: hidden; }
  • 44.
    !-- 一般的でない略称は避ける --div class=c-wdt p-rcmdTpcs__li よくわからない /div ! div class=c-widget p-recommendTopics__list 長い...が分かる /div
  • 45.
    /* Emmet/Zen-codingのAliasを参考にする */.u-mts { margin-top: 10px } /* margin-top small */ .u-vam { vertical-align: middle } .u-fl { float: left }
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
    div class=profile ...button class=button Save! /button /div
  • 56.
    div class=profile ...button class=“profile__button” Save! /button /div
  • 57.
  • 58.
  • 59.
    div class=profile ...button class=“button js-save-profile“ Save! /button /div
  • 60.
    div class=profile ...button class=“profile__button js-save-profile” Save! /button /div
  • 61.
    button class=c-button js-tap”Tappable /button ! !-- カスタムデータ属性を使う -- button class=c-button data-tap Tappable /button
  • 62.
  • 63.
  • 65.
  • 67.
    h1 class=section headingThe Heading /h1 ! div class=section The Box /div
  • 68.
    .section { padding:12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; } ! .heading { margin-bottom: 20px; font-size: 18px; font-weight: bold; }
  • 69.
    .section { padding:12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; } ! .heading { margin-bottom: 20px; padding: 12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; font-size: 18px; font-weight: bold; }
  • 70.
    h1 class=heading TheHeading /h1 ! div class=section The Box /div
  • 71.
    .s-box { padding:12px 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 0 2px #000; }
  • 72.
    h1 class=“s-box heading”The Heading /h1 ! div class=s-box section The Box /div
  • 73.
  • 77.
  • 78.
  • 80.
    .btn { ...} ! .btn--primary { background-color: #F31; color: #FFF; } ! .btn--large { font-size: 1.5em; }
  • 81.
    a class=btn btn--primarySave/a! a class=btn btn--primary btn--largeRegister/a
  • 82.
    %btn { display:inline-block; border-radius: 6px; vertical-align: middle; padding: .6em 1em; cursor: pointer; } ! %btn--primary { background-color: #F31; color: #FFF; font-weight: 700; } ! %btn--large { font-size: 1.5em; }
  • 83.
    .save-button { @extend%btn; @extend %btn--primary; } ! .register-button { @extend %btn; @extend %btn--primary; @extend %btn--large; }
  • 84.
    .save-button, .register-button {display: inline-block; border-radius: 6px; vertical-align: middle; padding: .6em 1em; cursor: pointer; } ! .save-button, .register-button { background-color: #F31; color: #FFF; font-weight: 700; } ! .register-button { font-size: 1.5em; }
  • 85.
    a class=save-buttonSave/a !a class=register-buttonRegister/a
  • 86.
  • 87.
  • 88.
    .mod_listType1 { section{ margin-bottom:1em; } h1 { margin:0 0 .5em .5em; font-size:fz(15); -webkit-text-shadow:0px 1px 0px rgba(255,255,255,0.75); text-shadow:0px 1px 0px rgba(255,255,255,0.75); } ul { background-color:#ffffff; border:#c3c3c3 1px solid; overflow:hidden; @include radius(12px); li { border-top:#C3C3C2 1px solid; margin-top:-1px; margin-bottom:1px; font-size:fz(16); :first-child { a.disable { @include radius-tr(12px); @include radius-tl(12px); }
  • 89.
    /* listType */.mod_listType1 section, .mod_listType3 section, .mod_listType4 section, .mod_listType5 section, .mod_listType8 section, .mod_listType7 section { margin-bottom: 1em; } .mod_listType1 h1, .mod_listType3 h1, .mod_listType4 h1, .mod_listType5 h1, .mod_listType8 h1, .mod_listType7 h1 { margin: 0 0 .5em .5em; font-size: 15px; -webkit-text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); } .mod_listType1 ul, .mod_H[JQ䖓 listType3 ul, .mod_listType4 ul, .mod_listType5 ul, .mod_listType8 ul, .mod_listType7 ul { background-border: overflow: border-440kb color: #ffffff; #c3c3c3 1px solid; hidden; radius: 12px; } .mod_listType1 ul li, .mod_listType3 ul li, .mod_listType4 ul li, .mod_listType5 ul li, .mod_listType8 ul li, .mod_listType7 ul li { border-top: #C3C3C2 1px solid; margin-top: -1px; margin-bottom: 1px; font-size: 16px; } .mod_listType1 ul li:first-child a.disable, .mod_listType3 ul li:first-child a.disable, .mod_listType4 ul li:first-child a.disable, .mod_listType5 ul li:first-child a.disable, .mod_listType8 ul li:first-child a.disable, .mod_listType7 ul li:first-child a.disable { border-radius: 12px; border-radius: 12px; } .mod_listType1 ul li:last-child a.disable, .mod_listType3 ul li:last-child a.disable, .mod_listType4 ul li:last-child a.disable, .mod_listType5 ul li:last-child a.disable, .mod_listType8 ul li:last-child a.disable, .mod_listType7 ul li:last-child a.disable { border-radius: 12px; border-radius: 12px;
  • 90.
    Do 1BSUJBM!JNQPSU 知⽃ז!NJYJOⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  • 91.
    Do 1BSUJBM!JNQPSU 知⽃ז!NJYJOⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  • 92.
    .c-button--primary { $primaryColor:#F31; background-color: $primaryColor; :hover { background-color: mix($primaryColor,#FFF,80%); } }
  • 93.
    Do 1BSUJBM!JNQPSU 知⽃ז!NJYJOⵖꣲׁ׸׋طأز 㢌侧 Don’t !FYUFOE !醱꧟זNJYJO ؕآُ،ٕזطأز
  • 94.
    // pc.app.scss //// Foundation @import foundation/normalize; @import foundation/variables; @import foundation/mixin; @import “foundation/base”; ! // Layout @import layout/app; ! // Object @import object/components/button; @import object/components/avatar; @import object/components/media; @import object/project/header; @import object/project/profile; @import object/project/articles;
  • 95.
    // object/project/_profile.scss //// =============== // # Profile // =============== ! .p-profile {...} .p-profile__avatar {...} .p-profile__name {...} .p-profile__biography {...} ...
  • 96.
  • 97.
  • 99.
    /** * Concatenation**/ concat: { pc: { files: { 'temp/pc.app.scss': [ 'app/stylesheets/foundation/*.scss', 'app/stylesheets/layout/_app.scss', 'app/stylesheets/object/component/*.scss', 'app/stylesheets/object/project/*.scss', 'app/stylesheets/object/utility/*.scss' ] } }, sp: { files: { 'temp/sp.app.scss': [ 'app/stylesheets/foundation/*.scss', 'app/stylesheets/layout/_app.scss', 'app/stylesheets/object/component/sp/*.scss', 'app/stylesheets/object/project/sp/*.scss', 'app/stylesheets/object/utility/sp/*.scss'
  • 101.
    The first draftˑ of anything is shit قىؚٝؐؑ؎
  • 102.
    Thank you! !github.com/hiloki twitter.com/hiloki inkdesign.jp
[8]ページ先頭
©2009-2025 Movatter.jp