Skip to content

Commit de4ffe1

Browse files
author
Nicolas Lupien
committed
Example 08
1 parent 53d9829 commit de4ffe1

File tree

10 files changed

+631
-0
lines changed

10 files changed

+631
-0
lines changed

‎08/config.rb

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Require any additional compass plugins here.
2+
3+
# Set this to the root of your project when deployed:
4+
http_path = "/"
5+
css_dir = "stylesheets"
6+
sass_dir = "sass"
7+
images_dir = "images"
8+
javascripts_dir = "javascripts"
9+
10+
# You can select your preferred output style here (can be overridden via the command line):
11+
# output_style = :expanded or :nested or :compact or :compressed
12+
13+
# To enable relative paths to assets via compass helper functions. Uncomment:
14+
# relative_assets = true
15+
16+
# To disable debugging comments that display the original location of your selectors. Uncomment:
17+
# line_comments = false
18+
19+
20+
# If you prefer the indented syntax, you might want to regenerate this
21+
# project again passing --syntax sass, or you can uncomment this:
22+
# preferred_syntax = :sass
23+
# and then run:
24+
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

‎08/images/grid.png

206 Bytes
Loading

‎08/index.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE>
2+
<html>
3+
<head>
4+
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
5+
<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
6+
<!--[if lt IE 8]>
7+
<link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
8+
<![endif]-->
9+
</head>
10+
<body>
11+
<div id="container">
12+
<header>
13+
<h1>Lorem ipsum</h1>
14+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu odio tortor. Suspendisse potenti. Quisque sapien nisi, malesuada eu volutpat a, volutpat a lacus. Morbi lacinia malesuada semper. Nullam eu erat at sem molestie adipiscing et at ante. Nunc auctor, lorem non porta interdum, turpis dui luctus erat, eget sollicitudin arcu turpis sed eros. Fusce iaculis lectus eget elit sollicitudin eget volutpat orci rhoncus. Ut lobortis laoreet mauris pulvinar ornare. Sed vehicula, justo ac sagittis tristique, lorem erat laoreet felis, sed iaculis leo orci porttitor massa. Curabitur venenatis scelerisque consectetur. Vestibulum eu eleifend nibh. Ut feugiat, neque nec fringilla scelerisque, magna risus vehicula nisl, eu commodo augue tellus ut nisl. Vivamus pharetra imperdiet lobortis.</p>
15+
</header>
16+
17+
<section id="lipsum-1">
18+
<p>Cras elementum tortor in arcu tincidunt ut rhoncus quam posuere. Duis purus leo, varius sit amet adipiscing vitae, ullamcorper sed mauris. Praesent tincidunt, purus eu auctor tempor, mauris lorem tempus neque, vitae interdum tellus augue vel urna. Nam eget gravida nulla. Cras aliquet risus sit amet tellus tristique feugiat. Quisque laoreet ipsum vitae massa ultricies blandit. Morbi iaculis, dolor id tincidunt iaculis, arcu elit scelerisque eros, a viverra justo turpis non tellus. Nulla facilisi. Nulla sit amet metus vel metus convallis aliquet in at libero. Vestibulum imperdiet interdum mauris sit amet mattis. Aliquam erat volutpat.</p>
19+
</section>
20+
21+
<section id="lipsum-2">
22+
<p>Duis vel tellus tellus, non condimentum ligula. Proin sagittis dignissim turpis, vitae semper dui tristique non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis tellus nec quam lacinia euismod. In hac habitasse platea dictumst. Nullam at lacus quis ipsum dapibus hendrerit. Cras sagittis erat non elit suscipit adipiscing. Donec ut risus eros, et mattis ante. Nulla facilisi. Vestibulum fringilla mattis lacus hendrerit suscipit.</p>
23+
</section>
24+
25+
<section id="lipsum-3">
26+
<p>Morbi sed lacus elit, sed bibendum massa. Donec venenatis posuere eros vitae sollicitudin. Fusce volutpat libero in leo venenatis a ultricies sem pretium. Aliquam ac sapien non sapien semper sagittis. Praesent egestas, magna vitae sagittis mollis, purus ligula consectetur libero, quis vestibulum dolor velit id tortor. Etiam lacinia diam vitae nisl pharetra egestas. Phasellus pulvinar ornare malesuada. Integer vitae risus leo. Mauris nec tortor purus. Praesent eget dolor congue sem ultrices ullamcorper. In hac habitasse platea dictumst. Sed urna lorem, volutpat et varius sit amet, ultricies vitae ante. Nunc odio velit, bibendum a pellentesque at, mattis facilisis magna. Nulla eleifend scelerisque neque, imperdiet aliquam felis venenatis et.</p>
27+
</section>
28+
29+
<footer>
30+
<p>Curabitur cursus nisi et odio interdum vulputate. Etiam vestibulum hendrerit nunc tincidunt fringilla. Sed non tellus ac tellus commodo pellentesque. Proin ac elit eget diam mollis cursus. Fusce sapien sem, pretium ut vehicula non, pharetra sed justo. Sed consectetur, mi placerat rutrum rhoncus, lectus magna semper urna, non posuere felis justo a augue. In lobortis ornare lectus et posuere. Ut purus lorem, feugiat vel ullamcorper vitae, mattis a lectus. Maecenas et tincidunt leo. Curabitur luctus auctor semper. Praesent convallis erat ac dolor vestibulum tempor. Donec pretium lacinia lacus eget elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris justo urna, convallis in vestibulum vel, pellentesque quis enim. Ut id libero in libero fermentum congue.</p>
31+
</footer>
32+
</div>
33+
</body>
34+
</html>

‎08/sass/ie.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import "blueprint";
2+
3+
// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
4+
// @include blueprint-ie
5+
6+
//Recommended Blueprint configuration with scoping and semantic layout:
7+
body.bp {
8+
@include blueprint-ie(true);
9+
// Note: Blueprint centers text to fix IE6 container centering.
10+
// This means all your texts will be centered under all version of IE by default.
11+
// If your container does not have the .container class, don't forget to restore
12+
// the correct behavior to your main container (but not the body tag!)
13+
// Example:
14+
// .my-container
15+
// text-align: left
16+
}

‎08/sass/partials/_base.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@import "blueprint/liquid";
2+
3+
$grid-background-column-width: $blueprint-liquid-grid-width;
4+
$grid-background-gutter-width: $blueprint-liquid-grid-margin;
5+
$grid-background-offset: 0;
6+
7+

‎08/sass/print.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import "blueprint";
2+
3+
// To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
4+
// @include blueprint-print
5+
6+
//Recommended Blueprint configuration with scoping and semantic layout:
7+
body.bp {
8+
@include blueprint-print(true); }

‎08/sass/screen.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@import "blueprint/reset";
2+
@import "partials/base";
3+
@import "blueprint";
4+
@import "blueprint/liquid";
5+
@import "compass/layout/grid-background";
6+
7+
@include blueprint-typography;
8+
9+
#container {
10+
@include container;
11+
@include grid-background;
12+
width: 99%;
13+
}
14+
15+
header, footer {
16+
@include column($blueprint-grid-columns);
17+
}
18+
19+
#lipsum-1, #lipsum-2, #lipsum-3 {
20+
@include column($blueprint-grid-columns/3);
21+
}
22+
23+
#lipsum-3 {
24+
@include last;
25+
}
26+
27+

‎08/stylesheets/ie.css

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/* line 7, ../sass/ie.scss */
2+
body.bp {
3+
text-align: center;
4+
}
5+
/* line 44, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
6+
* html body.bp legend {
7+
margin: 0px -8px 16px 0;
8+
padding: 0;
9+
}
10+
/* line 48, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
11+
html > body.bp p code {
12+
*white-space: normal;
13+
}
14+
/* line 60, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
15+
body.bp .container {
16+
text-align: left;
17+
}
18+
/* line 62, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
19+
body.bp sup {
20+
vertical-align: text-top;
21+
}
22+
/* line 64, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
23+
body.bp sub {
24+
vertical-align: text-bottom;
25+
}
26+
/* line 66, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
27+
body.bp hr {
28+
margin: -8px auto 11px;
29+
}
30+
/* line 68, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
31+
body.bp img {
32+
-ms-interpolation-mode: bicubic;
33+
}
34+
/* line 70, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
35+
body.bp fieldset {
36+
padding-top: 0;
37+
}
38+
/* line 72, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
39+
body.bp legend {
40+
margin-top: -0.2em;
41+
margin-bottom: 1em;
42+
margin-left: -0.5em;
43+
}
44+
/* line 76, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
45+
body.bp fieldset, body.bp #IE8#HACK {
46+
padding-top: 1.4em;
47+
}
48+
/* line 77, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
49+
body.bp legend, body.bp #IE8#HACK {
50+
margin-top: 0;
51+
margin-bottom: 0;
52+
}
53+
/* line 78, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
54+
body.bp textarea {
55+
overflow: auto;
56+
}
57+
/* line 80, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
58+
body.bp label {
59+
position: relative;
60+
top: -0.25em;
61+
}
62+
/* line 84, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
63+
body.bp input.text {
64+
margin: 0.5em 0;
65+
background-color: white;
66+
border: 1px solid #bbbbbb;
67+
}
68+
/* line 88, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
69+
body.bp input.text:focus {
70+
border: 1px solid #666666;
71+
}
72+
/* line 90, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
73+
body.bp input.title {
74+
margin: 0.5em 0;
75+
background-color: white;
76+
border: 1px solid #bbbbbb;
77+
}
78+
/* line 94, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
79+
body.bp input.title:focus {
80+
border: 1px solid #666666;
81+
}
82+
/* line 96, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
83+
body.bp input.checkbox {
84+
position: relative;
85+
top: 0.25em;
86+
}
87+
/* line 99, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
88+
body.bp input.radio {
89+
position: relative;
90+
top: 0.25em;
91+
}
92+
/* line 102, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
93+
body.bp input.button {
94+
position: relative;
95+
top: 0.25em;
96+
}
97+
/* line 105, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
98+
body.bp textarea {
99+
margin: 0.5em 0;
100+
}
101+
/* line 107, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
102+
body.bp select {
103+
margin: 0.5em 0;
104+
}
105+
/* line 109, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_ie.scss */
106+
body.bp button {
107+
position: relative;
108+
top: 0.25em;
109+
}

‎08/stylesheets/print.css

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/* line 7, ../sass/print.scss */
2+
body.bp {
3+
line-height: 1.5;
4+
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
5+
color: black;
6+
background: none;
7+
font-size: 10pt;
8+
}
9+
/* line 45, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
10+
body.bp .container {
11+
background: none;
12+
}
13+
/* line 47, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
14+
body.bp hr {
15+
background: #cccccc;
16+
color: #cccccc;
17+
width: 100%;
18+
height: 2px;
19+
margin: 2em 0;
20+
padding: 0;
21+
border: none;
22+
}
23+
/* line 55, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
24+
body.bp hr.space {
25+
background: white;
26+
color: white;
27+
}
28+
/* line 58, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
29+
body.bp h1, body.bp h2, body.bp h3, body.bp h4, body.bp h5, body.bp h6 {
30+
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
31+
}
32+
/* line 60, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
33+
body.bp code {
34+
font-size: 0.9em;
35+
font-family: "andale mono", "lucida console", monospace;
36+
}
37+
/* line 65, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
38+
body.bp a img {
39+
border: none;
40+
}
41+
/* line 68, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
42+
body.bp a:link, body.bp a:visited {
43+
background: transparent;
44+
font-weight: 700;
45+
text-decoration: underline;
46+
}
47+
/* line 72, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
48+
body.bp p img.top {
49+
margin-top: 0;
50+
}
51+
/* line 74, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
52+
body.bp blockquote {
53+
margin: 1.5em;
54+
padding: 1em;
55+
font-style: italic;
56+
font-size: 0.9em;
57+
}
58+
/* line 79, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
59+
body.bp .small {
60+
font-size: 0.9em;
61+
}
62+
/* line 81, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
63+
body.bp .large {
64+
font-size: 1.1em;
65+
}
66+
/* line 83, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
67+
body.bp .quiet {
68+
color: #999999;
69+
}
70+
/* line 85, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_print.scss */
71+
body.bp .hide {
72+
display: none;
73+
}

0 commit comments

Comments
 (0)