]>
Commit | Line | Data |
---|---|---|
19f2f11e NL |
1 | /* |
2 | Ratatouille mini Framework css by Thomas LEBEAU | |
3 | Base on KNACSS => www.KNACSS.com (2013-10) @author: Raphael Goetter, Alsacreations | |
4 | and normalize.css | |
5 | */ | |
6 | ||
7 | * { | |
8 | -webkit-box-sizing: border-box; | |
5ecdfcd0 TC |
9 | -moz-box-sizing: border-box; |
10 | box-sizing: border-box; | |
19f2f11e NL |
11 | } |
12 | ||
13 | html { | |
14 | font-family: sans-serif; /* 1 */ | |
15 | -ms-text-size-adjust: 100%; /* 2 */ | |
16 | -webkit-text-size-adjust: 100%; /* 2 */ | |
17 | } | |
18 | ||
19 | body { | |
20 | font-size: 1em; | |
5ecdfcd0 | 21 | line-height: 1.5; |
19f2f11e NL |
22 | margin: 0; |
23 | } | |
24 | ||
25 | /* ========================================================================== | |
26 | Mise en forme | |
27 | ========================================================================== */ | |
28 | ||
29 | h1:first-child, | |
30 | h2:first-child, | |
31 | h3:first-child, | |
32 | h4:first-child, | |
33 | h5:first-child, | |
34 | h6:first-child, | |
35 | p:first-child, | |
36 | ul:first-child, | |
37 | ol:first-child, | |
5ecdfcd0 | 38 | dl:first-child { |
19f2f11e NL |
39 | margin-top: 0; |
40 | } | |
41 | ||
42 | code, | |
43 | kbd, | |
44 | pre, | |
45 | samp { | |
5ecdfcd0 | 46 | font-family: monospace, serif; |
19f2f11e NL |
47 | } |
48 | ||
49 | pre { | |
5ecdfcd0 | 50 | white-space: pre-wrap; |
19f2f11e NL |
51 | } |
52 | ||
19f2f11e NL |
53 | .upper { |
54 | text-transform: uppercase; | |
55 | } | |
56 | ||
57 | .bold { | |
58 | font-weight: bold; | |
59 | } | |
60 | ||
61 | .inner { | |
62 | margin: 0 auto; | |
5ecdfcd0 | 63 | max-width: 61.25em; /* 980px */ |
19f2f11e NL |
64 | } |
65 | ||
c146f694 TC |
66 | table, |
67 | img, | |
68 | figure { | |
19f2f11e | 69 | max-width: 100%; |
5ecdfcd0 | 70 | height: auto; |
19f2f11e NL |
71 | } |
72 | ||
73 | iframe { | |
74 | max-width: 100%; | |
75 | } | |
76 | ||
77 | .fl { | |
78 | float: left; | |
79 | } | |
80 | ||
81 | .fr { | |
82 | float: right; | |
83 | } | |
84 | ||
85 | table { | |
86 | border-collapse: collapse; | |
87 | } | |
88 | ||
89 | figure { | |
90 | margin: 0; | |
91 | } | |
92 | ||
93 | button, | |
94 | input, | |
95 | select, | |
96 | textarea { | |
5ecdfcd0 TC |
97 | font-family: inherit; |
98 | font-size: 100%; | |
99 | margin: 0; | |
19f2f11e NL |
100 | } |
101 | ||
102 | input[type="search"] { | |
5ecdfcd0 | 103 | -webkit-appearance: textfield; |
19f2f11e NL |
104 | } |
105 | ||
106 | /* ========================================================================== | |
107 | Mise en page | |
108 | ========================================================================== */ | |
109 | ||
110 | .dib { | |
111 | display: inline-block; | |
112 | vertical-align: middle; | |
113 | } | |
114 | ||
115 | .dnone { | |
116 | display: none; | |
117 | } | |
118 | ||
5ecdfcd0 TC |
119 | .dtable { |
120 | display: table; | |
121 | } | |
19f2f11e | 122 | |
5ecdfcd0 TC |
123 | .dtable > * { |
124 | display: table-row; | |
125 | } | |
19f2f11e | 126 | |
5ecdfcd0 TC |
127 | .dtable > * > * { |
128 | display: table-cell; | |
129 | } | |
19f2f11e NL |
130 | |
131 | .element-invisible { | |
132 | border: 0; | |
133 | clip: rect(0 0 0 0); | |
134 | height: 1px; | |
135 | margin: -1px; | |
136 | overflow: hidden; | |
137 | padding: 0; | |
138 | position: absolute; | |
139 | width: 1px; | |
140 | } | |
141 | ||
142 | .small { | |
5ecdfcd0 | 143 | font-size: 0.8em; |
19f2f11e NL |
144 | } |
145 | ||
146 | .big { | |
147 | font-size: 1.2em; | |
148 | } | |
149 | ||
5ecdfcd0 | 150 | /* Width */ |
19f2f11e | 151 | |
5ecdfcd0 TC |
152 | .w100 { |
153 | width: 100%; | |
154 | } | |
155 | ||
156 | .w90 { | |
157 | width: 90%; | |
158 | } | |
159 | ||
160 | .w80 { | |
161 | width: 80%; | |
162 | } | |
19f2f11e | 163 | |
5ecdfcd0 TC |
164 | .w70 { |
165 | width: 70%; | |
166 | } | |
167 | ||
168 | .w60 { | |
169 | width: 60%; | |
170 | } | |
171 | ||
172 | .w50 { | |
173 | width: 50%; | |
174 | } | |
175 | ||
176 | .w40 { | |
177 | width: 40%; | |
178 | } | |
179 | ||
180 | .w30 { | |
181 | width: 30%; | |
182 | } | |
183 | ||
184 | .w20 { | |
185 | width: 20%; | |
186 | } | |
187 | ||
188 | .w10 { | |
189 | width: 10%; | |
190 | } | |
19f2f11e NL |
191 | |
192 | /* ========================================================================== | |
193 | Internet Explorer | |
194 | ========================================================================== */ | |
195 | ||
5ecdfcd0 | 196 | /* IE8 and IE9 */ |
19f2f11e NL |
197 | |
198 | article, | |
199 | aside, | |
200 | details, | |
201 | figcaption, | |
202 | figure, | |
203 | footer, | |
204 | header, | |
205 | hgroup, | |
206 | main, | |
207 | nav, | |
208 | section, | |
209 | summary { | |
5ecdfcd0 | 210 | display: block; |
19f2f11e NL |
211 | } |
212 | ||
5ecdfcd0 | 213 | /* IE8 and IE9 */ |
19f2f11e NL |
214 | |
215 | audio, | |
216 | canvas, | |
217 | video { | |
5ecdfcd0 | 218 | display: inline-block; |
19f2f11e NL |
219 | } |
220 | ||
5ecdfcd0 TC |
221 | @media screen and (-webkit-min-device-pixel-ratio: 0) { |
222 | select { | |
19f2f11e NL |
223 | -webkit-appearance: none; |
224 | border-radius: 0; | |
225 | } | |
226 | } |