css architecture for the future 未来を見据えるcss設計
Post on 22-Jan-2018
909 Views
Preview:
TRANSCRIPT
<header class=“lig-header”> <div class=“lig-header-logo”> <a href=“…”>Lig.inc</a> </div> <nav class=“lig-header-nav”> <ul class=“lig-header-nav-list”> <li> <a href=“…”>Top</a> </li> <li> <a href=“…”>About</a> </li> <li> <a href=“…”>Contact</a> </li> </ul> </nav> </header>
.lig-header {…}
.lig-header-logo {…}
.lig-header-logo > a {…}
.lig-header-nav {…}
.lig-header-nav-list {…}
.lig-header-nav > li {…}
.lig-header-nav > li > a {…}
Title textsample text sample text sample text sample text sample text …
Read
ID
Login
PW
LoginTANAKA TARO
sample text sample text sample text sample text sample text sample text sample text
t f
Project A
Read
ID
Login
PW
Login
TANAKA TAROsample text sample text sample text sample text sample text sample text sample text
Project B
Title textsample text sample text sample text sample text sample text …
t
Title textsample text sample text sample text sample text sample text …
Read
ID
Login
PW
LoginTANAKA TARO
sample text sample text sample text sample text sample text sample text sample text
t f
Project A
Read
ID
Login
PW
Login
TANAKA TAROsample text sample text sample text sample text sample text sample text sample text
Project B
Title textsample text sample text sample text sample text sample text …
t
.button { display: inline-block; text-align: center; text-decoration: none; padding: 5px 30px; font-size: 15px; border-radius: 5px; color: #fff; background-color: #000;
//skin style &.button-primary { background-color: #12bd00; } &.button-secondary { background-color: #00a9c7; } }
.button { display: inline-block; text-align: center; text-decoration: none; padding: 5px 30px; font-size: 15px; border-radius: 5px; color: #fff; background-color: #000;
//skin style &.button-primary { background-color: #12bd00; } &.button-secondary { background-color: #00a9c7; } }
Structureは 再利用しやすい
.grid { font-size: 0; > .grid-item { display: inline-block; vertical-align: top; font-size: 15px; } //カラム &.grid-col2 { > .grid-item { width: 50%; } } &.grid-col3 { > .grid-item { width: 33.3333%; } }
&.grid-col4 { > .grid-item { width: 25%; } } &.grid-col5 { > .grid-item { width: 20%; } } &.grid-col6 { > .grid-item { width: 16.6666%; } } &.grid-col7 { > .grid-item { width: 20%;
top related