Skip to content

Commit 22fa713

Browse files
author
Sebastian Müller
committed
angular#1 Added HTML5 Boilerplate
1 parent aa3c9db commit 22fa713

File tree

5 files changed

+902
-82
lines changed

5 files changed

+902
-82
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ fetch the changes and merge them into your project with git.
9494
app/ --> all of the files to be used in production
9595
css/ --> css files
9696
app.css --> default stylesheet
97+
normalize.css --> browser reset css
9798
img/ --> image files
9899
index.html --> app layout file (the main html template file of the app)
99100
index-async.html --> just like index.html, but loads js files asynchronously

‎app/css/app.css

+286
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,99 @@
1+
/*
2+
* HTML5 Boilerplate
3+
*
4+
* What follows is the result of much research on cross-browser styling.
5+
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
6+
* Kroc Camen, and the H5BP dev community and team.
7+
*/
8+
9+
/* ==========================================================================
10+
Base styles: opinionated defaults
11+
========================================================================== */
12+
13+
html,
14+
button,
15+
input,
16+
select,
17+
textarea {
18+
color: #222;
19+
}
20+
21+
body {
22+
font-size: 1em;
23+
line-height: 1.4;
24+
}
25+
26+
/*
27+
* Remove text-shadow in selection highlight: h5bp.com/i
28+
* These selection declarations have to be separate.
29+
* Customize the background color to match your design.
30+
*/
31+
32+
::-moz-selection {
33+
background: #b3d4fc;
34+
text-shadow: none;
35+
}
36+
37+
::selection {
38+
background: #b3d4fc;
39+
text-shadow: none;
40+
}
41+
42+
/*
43+
* A better looking default horizontal rule
44+
*/
45+
46+
hr {
47+
display: block;
48+
height: 1px;
49+
border: 0;
50+
border-top: 1px solid #ccc;
51+
margin: 1em 0;
52+
padding: 0;
53+
}
54+
55+
/*
56+
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
57+
*/
58+
59+
img {
60+
vertical-align: middle;
61+
}
62+
63+
/*
64+
* Remove default fieldset styles.
65+
*/
66+
67+
fieldset {
68+
border: 0;
69+
margin: 0;
70+
padding: 0;
71+
}
72+
73+
/*
74+
* Allow only vertical resizing of textareas.
75+
*/
76+
77+
textarea {
78+
resize: vertical;
79+
}
80+
81+
/* ==========================================================================
82+
Chrome Frame prompt
83+
========================================================================== */
84+
85+
.chromeframe {
86+
margin: 0.2em 0;
87+
background: #ccc;
88+
color: #000;
89+
padding: 0.2em 0;
90+
}
91+
92+
/* ==========================================================================
93+
Author's custom styles
94+
========================================================================== */
95+
96+
197
/* app css stylesheet */
298

399
.menu {
@@ -28,3 +124,193 @@
28124
content: "";
29125
padding: 0;
30126
}
127+
128+
129+
130+
/* ==========================================================================
131+
Helper classes
132+
========================================================================== */
133+
134+
/*
135+
* Image replacement
136+
*/
137+
138+
.ir {
139+
background-color: transparent;
140+
border: 0;
141+
overflow: hidden;
142+
/* IE 6/7 fallback */
143+
*text-indent: -9999px;
144+
}
145+
146+
.ir:before {
147+
content: "";
148+
display: block;
149+
width: 0;
150+
height: 100%;
151+
}
152+
153+
/*
154+
* Hide from both screenreaders and browsers: h5bp.com/u
155+
*/
156+
157+
.hidden {
158+
display: none !important;
159+
visibility: hidden;
160+
}
161+
162+
/*
163+
* Hide only visually, but have it available for screenreaders: h5bp.com/v
164+
*/
165+
166+
.visuallyhidden {
167+
border: 0;
168+
clip: rect(0 0 0 0);
169+
height: 1px;
170+
margin: -1px;
171+
overflow: hidden;
172+
padding: 0;
173+
position: absolute;
174+
width: 1px;
175+
}
176+
177+
/*
178+
* Extends the .visuallyhidden class to allow the element to be focusable
179+
* when navigated to via the keyboard: h5bp.com/p
180+
*/
181+
182+
.visuallyhidden.focusable:active,
183+
.visuallyhidden.focusable:focus {
184+
clip: auto;
185+
height: auto;
186+
margin: 0;
187+
overflow: visible;
188+
position: static;
189+
width: auto;
190+
}
191+
192+
/*
193+
* Hide visually and from screenreaders, but maintain layout
194+
*/
195+
196+
.invisible {
197+
visibility: hidden;
198+
}
199+
200+
/*
201+
* Clearfix: contain floats
202+
*
203+
* For modern browsers
204+
* 1. The space content is one way to avoid an Opera bug when the
205+
* `contenteditable` attribute is included anywhere else in the document.
206+
* Otherwise it causes space to appear at the top and bottom of elements
207+
* that receive the `clearfix` class.
208+
* 2. The use of `table` rather than `block` is only necessary if using
209+
* `:before` to contain the top-margins of child elements.
210+
*/
211+
212+
.clearfix:before,
213+
.clearfix:after {
214+
content: " "; /* 1 */
215+
display: table; /* 2 */
216+
}
217+
218+
.clearfix:after {
219+
clear: both;
220+
}
221+
222+
/*
223+
* For IE 6/7 only
224+
* Include this rule to trigger hasLayout and contain floats.
225+
*/
226+
227+
.clearfix {
228+
*zoom: 1;
229+
}
230+
231+
/* ==========================================================================
232+
EXAMPLE Media Queries for Responsive Design.
233+
Theses examples override the primary ('mobile first') styles.
234+
Modify as content requires.
235+
========================================================================== */
236+
237+
@media only screen and (min-width: 35em) {
238+
/* Style adjustments for viewports that meet the condition */
239+
}
240+
241+
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
242+
only screen and (min-resolution: 144dpi) {
243+
/* Style adjustments for high resolution devices */
244+
}
245+
246+
/* ==========================================================================
247+
Print styles.
248+
Inlined to avoid required HTTP connection: h5bp.com/r
249+
========================================================================== */
250+
251+
@media print {
252+
* {
253+
background: transparent !important;
254+
color: #000 !important; /* Black prints faster: h5bp.com/s */
255+
box-shadow: none !important;
256+
text-shadow: none !important;
257+
}
258+
259+
a,
260+
a:visited {
261+
text-decoration: underline;
262+
}
263+
264+
a[href]:after {
265+
content: " (" attr(href) ")";
266+
}
267+
268+
abbr[title]:after {
269+
content: " (" attr(title) ")";
270+
}
271+
272+
/*
273+
* Don't show links for images, or javascript/internal links
274+
*/
275+
276+
.ir a:after,
277+
a[href^="javascript:"]:after,
278+
a[href^="#"]:after {
279+
content: "";
280+
}
281+
282+
pre,
283+
blockquote {
284+
border: 1px solid #999;
285+
page-break-inside: avoid;
286+
}
287+
288+
thead {
289+
display: table-header-group; /* h5bp.com/t */
290+
}
291+
292+
tr,
293+
img {
294+
page-break-inside: avoid;
295+
}
296+
297+
img {
298+
max-width: 100% !important;
299+
}
300+
301+
@page {
302+
margin: 0.5cm;
303+
}
304+
305+
p,
306+
h2,
307+
h3 {
308+
orphans: 3;
309+
widows: 3;
310+
}
311+
312+
h2,
313+
h3 {
314+
page-break-after: avoid;
315+
}
316+
}

0 commit comments

Comments
 (0)