Skip to content

Commit f600986

Browse files
author
Jamie Hoover ⚔
committed
Testing CSS Updates
Swaps straight Normalizer for Boilerplate. Adds grid for compacting the layout later on.
1 parent 916ebcf commit f600986

File tree

6 files changed

+245
-274
lines changed

6 files changed

+245
-274
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
*.tmproj
1010
tmtags
1111
.idea
12+
.redcar
1213

1314
node_modules/
1415

‎test/css/grid.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.grid {
2+
padding-left: 3%;
3+
}
4+
.grid-one-half,
5+
.grid-one-quarter,
6+
.grid-one-third,
7+
.grid-three-quarters,
8+
.grid-two-thirds {
9+
display: inline-block;
10+
margin: 0 3% 1em 0;
11+
vertical-align: top;
12+
}
13+
.grid-one-half {
14+
width: 45%;
15+
}
16+
.grid-one-quarter {
17+
width: 21%;
18+
}
19+
.grid-one-third {
20+
width: 29%;
21+
}
22+
.grid-three-quarters {
23+
width: 72%;
24+
}
25+
.grid-two-thirds {
26+
width: 64%;
27+
}
28+
/* Mobile */
29+
@media only screen and (min-width: 320px) and (max-width: 768px) {
30+
.grid-one-half,
31+
.grid-one-quarter,
32+
.grid-one-third,
33+
.grid-three-quarters,
34+
.grid-two-thirds {
35+
width: 45%;
36+
}
37+
}
38+
@media only screen and (min-width: 320px) and (max-width: 479px) {
39+
.grid-one-half,
40+
.grid-one-quarter,
41+
.grid-one-third,
42+
.grid-three-quarters,
43+
.grid-two-thirds {
44+
display: block;
45+
width: auto;
46+
}
47+
}

‎test/css/normalizer.css

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
article,
2+
aside,
3+
details,
4+
figcaption,
5+
figure,
6+
footer,
7+
header,
8+
hgroup,
9+
nav,
10+
section {
11+
display: block;
12+
}
13+
audio,
14+
canvas,
15+
video {
16+
display: inline-block;
17+
*display: inline;
18+
*zoom: 1;
19+
}
20+
audio:not([controls]) {
21+
display: none;
22+
}
23+
[hidden] {
24+
display: none;
25+
}
26+
html {
27+
font-size: 100%;
28+
overflow-y: scroll;
29+
-webkit-text-size-adjust: 100%;
30+
-ms-text-size-adjust: 100%;
31+
}
32+
body {
33+
margin: 0;
34+
}
35+
body,
36+
button,
37+
input,
38+
select,
39+
textarea {
40+
font-family: sans-serif;
41+
}
42+
a:focus {
43+
outline: thin dotted;
44+
}
45+
a:hover,
46+
a:active {
47+
outline: 0;
48+
}
49+
h1 {
50+
font-size: 2em;
51+
}
52+
abbr[title] {
53+
border-bottom: 1px dotted;
54+
}
55+
b,
56+
strong {
57+
font-weight: bold;
58+
}
59+
60+
blockquote {
61+
margin: 1em 40px;
62+
}
63+
dfn {
64+
font-style: italic;
65+
}
66+
mark {
67+
background: #ff0;
68+
color: #000;
69+
}
70+
pre,
71+
code,
72+
kbd,
73+
samp {
74+
font-family: monospace, serif;
75+
_font-family: 'courier new', monospace;
76+
font-size: 1em;
77+
}
78+
pre {
79+
white-space: pre;
80+
white-space: pre-wrap;
81+
word-wrap: break-word;
82+
}
83+
q {
84+
quotes: none;
85+
}
86+
q:before,
87+
q:after {
88+
content: '';
89+
content: none;
90+
}
91+
small {
92+
font-size: 75%;
93+
}
94+
sub,
95+
sup {
96+
font-size: 75%;
97+
line-height: 0;
98+
position: relative;
99+
vertical-align: baseline;
100+
}
101+
sup {
102+
top: -0.5em;
103+
}
104+
sub {
105+
bottom: -0.25em;
106+
}
107+
ul,
108+
ol {
109+
margin-left: 0;
110+
padding: 0 0 0 40px;
111+
}
112+
dd {
113+
margin: 0 0 0 40px;
114+
}
115+
nav ul,
116+
nav ol {
117+
list-style: none;
118+
list-style-image: none;
119+
}
120+
img {
121+
border: 0;
122+
-ms-interpolation-mode: bicubic;
123+
}
124+
svg:not(:root) {
125+
overflow: hidden;
126+
}
127+
figure {
128+
margin: 0;
129+
}
130+
form {
131+
margin: 0;
132+
}
133+
fieldset {
134+
border: 1px solid #c0c0c0;
135+
margin: 0 2px;
136+
padding: 0.35em 0.625em 0.75em;
137+
}
138+
legend {
139+
border: 0;
140+
*margin-left: -7px;
141+
}
142+
button,
143+
input,
144+
select,
145+
textarea {
146+
font-size: 100%;
147+
margin: 0;
148+
vertical-align: baseline;
149+
*vertical-align: middle;
150+
}
151+
button,
152+
input {
153+
line-height: normal;
154+
}
155+
button,
156+
input[type="button"],
157+
input[type="reset"],
158+
input[type="submit"] {
159+
cursor: pointer;
160+
-webkit-appearance: button;
161+
*overflow: visible;
162+
}
163+
input[type="checkbox"],
164+
input[type="radio"] {
165+
box-sizing: border-box;
166+
padding: 0;
167+
}
168+
input[type="search"] {
169+
-webkit-appearance: textfield;
170+
-moz-box-sizing: content-box;
171+
-webkit-box-sizing: content-box;
172+
box-sizing: content-box;
173+
}
174+
input[type="search"]::-webkit-search-decoration {
175+
-webkit-appearance: none;
176+
}
177+
button::-moz-focus-inner,
178+
input::-moz-focus-inner {
179+
border: 0;
180+
padding: 0;
181+
}
182+
textarea {
183+
overflow: auto;
184+
vertical-align: top;
185+
}
186+
table {
187+
border-collapse: collapse;
188+
border-spacing: 0;
189+
}

0 commit comments

Comments
 (0)