Más contenido relacionado La actualidad más candente (20) Thinking about CSS Architecture9. .text {
color: black;
}
.catchcopy {
color: red;
}
#message .text {
color: green;
}
40. <div class="media">
<div class="media-image">
<img src="/img/seminar/15/tani.jpg">
</div>
<div class="media-body">
<p>...</p>
<ul>
<li><a>...</a></li>
</ul>
<p>...</p>
</div>
</div>
41. <div class="media">
<div class="media-image">
<img src="/img/seminar/15/tani.jpg">
</div>
<div class="media-body">
<p>...</p>
<ul>
<li><a>...</a></li>
</ul>
<p>...</p>
</div>
</div>
42. <div class="media">
<div class="media-image">
<img src="/img/seminar/15/tani.jpg">
</div>
<div class="media-body">
<p>...</p>
<ul>
<li><a>...</a></li>
</ul>
<p>...</p>
</div>
</div>
43. .media {
overflow: hidden; // Clearfix
*zoom: 1; // Clearfix
}
.media-image {
float: left;
margin-right: 10px;
}
.media-image > img {
display: block;
}
.media-body {
overflow: hidden;
}
44. <div class="media skin-a">
<div class="media-image">
<img src="/img/seminar/15/tani.jpg">
</div>
<div class="media-body">
<p>...</p>
<ul>
<li><a>...</a></li>
</ul>
<p>...</p>
</div>
</div>
45. <div class="media skin-b">
<div class="media-image">
<img src="/img/seminar/15/tani.jpg">
</div>
<div class="media-body">
<p>...</p>
<ul>
<li><a>...</a></li>
</ul>
<p>...</p>
</div>
</div>
47. h2 {
font-weight: bold;
font-size: 16px;
}
#news h2 {
border-bottom: 1px solid black;
padding-bottom: 0.5em;
}
48. h2 {
font-weight: bold;
font-size: 16px;
}
#news h2,
#speakers h2 {
border-bottom: 1px solid black;
padding-bottom: 0.5em;
}
51. <div id="speakers">
<h1>Hiroki Tani</h1>
<h2>Session Title</h2>
<div>
<p>...</p>
</div>
<div>
<h2>Books</h2>
<ul>
<li>...</li>
</ul>
</div>
</div>
52. <div id="speakers">
<h1>Hiroki Tani</h1>
<h2>Session Title</h2>
<div>
<p>...</p>
</div>
<div>
<h2>Books</h2>
<ul>
<li>...</li>
</ul>
</div>
</div>
53. <div id="speakers">
<h1>Hiroki Tani</h1>
<h2>Session Title</h2>
<div>
<p>...</p>
</div>
<div>
<h2>Books</h2>
<ul>
<li>...</li>
</ul>
</div>
</div>
55. h2 {
font-weight: bold;
font-size: 16px;
}
.headline {
border-bottom: 1px solid black;
padding-bottom: 0.5em;
}
56. <div id="speakers">
<h1>Hiroki Tani</h1>
<h2 class="headline">Session Title</h2>
<div>
<p>...</p>
</div>
<div>
<h2>Books</h2>
<ul>
<li>...</li>
</ul>
</div>
</div>
57. .heading {
font-weight: bold;
font-size: 16px;
}
.headline {
border-bottom: 1px solid black;
padding-bottom: 0.5em;
}
58. <div id="speakers">
<h1>Hiroki Tani</h1>
<h2 class="heading headline">Session
Title</h2>
<div>
<p>...</p>
</div>
<div>
<h2 class="heading">Books</h2>
<ul>
<li>...</li>
</ul>
</div>
</div>
67. /* # Base */
body, form {
margin: 0;
padding: 0;
}
a {
color: #039;
}
a:hover {
color: #03F;
}
68. /* # Layout */
.l-header, l-article, l-footer {
width: 960px;
margin: auto;
}
.l-article {
border: solid #CCC;
border-width: 1px 0 0;
}
.l-grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.l-grid > li {
display: inline-block;
margin: 0 0 10px 10px;
}
69. /* # Layout */
#header, #article, #footer {
width: 960px;
margin: auto;
}
.l-article {
border: solid #CCC;
border-width: 1px 0 0;
}
.l-grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.l-grid > li {
display: inline-block;
margin: 0 0 10px 10px;
}
70. /* # Layout */
.l-container {
width: 960px;
margin: auto;
}
.l-article {
border: solid #CCC;
border-width: 1px 0 0;
}
.l-grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.l-grid > li {
display: inline-block;
margin: 0 0 10px 10px;
}
71. /* # State */
.is-hidden {
display: none;
}
.is-error {
font-weight: bold;
color: red;
}
.is-tab-active {
border-bottom-color: transparent;
}
72. /* # Theme */
/* ## Pink Theme CSS */
.theme-header {
background-image: url("/theme/pink/
header.png");
}
.theme-border {
1px solid pink;
}
73. /* # Module */
/* ## Button */
.btn { ... }
.btn-primary { ... }
.btn-small { ... }
/* ## UIlist */
.uilist { ... }
.uilist-item { ... }
.uilist-item-icon { ... }
/* ## Widget */
.widget { ... }
.widget-title { ... }
.widget-body { ... }
76. .widget { ... }
.widget p {
margin-top: 10px;
margin-bottom: 10px;
}
78. .widget { ... }
.widget p,
.widget ul {
margin-top: 10px;
margin-bottom: 10px;
}
80. .widget { ... }
.widget-body {
margin-top: 10px;
margin-bottom: 10px;
}
92. <div class="review">
<h1>CSS Architecture</h1>
<p class="reviewer">Review: <span>Hiroki Tani</
span></p>
<time datetime="2013-09-14">2013/09/14</time>
<p class="review-summary">CSS Bible!</p>
<p class="review-description">...</p>
Rating: <span class="rating">4.5</span>
</div>
93. <div itemscope itemtype="http://data-
vocabulary.org/Review">
<h1 itemprop="itemreviewed">CSS Architecture</
h1>
<p>Review: <span itemprop="reviewer">Hiroki
Tani</span></p>
<time itemprop="dtreviewed"
datetime="2013-09-14">2013/09/14</time>
<p itemprop="summary">CSS Bible!</p>
<p itemprop="description">...</p>
Rating: <span itemprop="rating">4.5</span>
</div>
96. /* Sass(.scss) */
%btn {
border-radius: 6px;
padding: 0.5em 1em;
background-color: #CCC;
}
.btn-primary {
@extend %btn;
background-image: linear-gradient(...);
color: #FFF;
}
97. /* CSS */
.btn-primary {
border-radius: 6px;
adding: 0.5em 1em;
background-color: #CCC;
background-image: linear-gradient(...);
color: #FFF;
}
99. /* Sass(.scss) */
%btn {
border-radius: 6px;
padding: 0.5em 1em;
background-color: #CCC;
}
%btn-primary {
border-radius: 6px;
padding: 0.5em 1em;
background-color: #CCC;
}
%btn-large {
font-size: 18px;
}
.save {
@extend %btn;
@extend %btn-primary;
@extend %btn-large;
}
100. /* CSS */
.save {
border-radius: 6px;
adding: 0.5em 1em;
background-color: #CCC;
background-image: linear-gradient(...);
color: #FFF;
font-size: 18px;
}
102. .clearfix:after,.btn_type2_A:after,.bnavi
ul:after,.box_3col:after,.userData
dl:after,.likeTool:after,.likeUser ul:after,.commentUser
ul:after,.userData:after,.circleList li
a:after,.time_count:after,.paging
ul:after,.myData:after,.status:after,.bar:after,.month:a
fter,.month2:after,.about:after,.sort:after,.mainList
ul:after,.mainList2 li
ul:after,.bnr_2col:after,.likeTool_lp:after,.flow:after,
.radio:after,.btn_entry_2col:after,.sort2:after,ul#popup
_message:after,.sort3:after,.f_circleList:after,.f_circl
eList a:after,.mainList3 dl:after,.mainList3
ul:after,.box_2col:after,.frame_desc dl:after {
content: "";
display: block;
clear: both;
height: 0;
}
104. /* # Module */
/* ## Button */
.btn { ... }
.btn-primary { ... }
.btn-small { ... }
/* ## Widget */
.widget { ... }
.widget-title { ... }
.widget-body { ... }
113. .ranking { ... }
.ranking__thumbnail { ... }
.ranking__item { ... }
.nav-line { ... }
.nav-line__item { ... }
.nav-line_separated { ... }
.nav-line_separated__item { ... }
114. /* # Module */
/* ## Button */
.btn { ... }
.btn_primary { ... }
.btn_small { ... }
/* ## Widget */
.widget { ... }
.widget__title { ... }
.widget__body { ... }
115. /* # Module */
/* ## Button */
.btn { ... }
.btn--primary { ... }
.btn--small { ... }
/* ## Widget */
.widget { ... }
.widget__title { ... }
.widget__body { ... }
127. /*
A button suitable for giving stars to someone.
:hover - Subtle hover highlight.
.stars-given - A highlight indicating you've already given a
star.
.stars-given:hover - Subtle hover highlight on top of stars-given
styling.
.disabled - Dims the button to indicate it cannot be used.
Styleguide 2.1.3.
*/
a.button.star{
...
}
a.button.star.stars-given{
...
}
a.button.star.disabled{
...
}