Skip to content

Commit c5330c4

Browse files
author
Nicolas Lupien
committed
Example 03
1 parent 89ef703 commit c5330c4

File tree

10 files changed

+675
-0
lines changed

10 files changed

+675
-0
lines changed

‎03/config.rb

+24
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

‎03/images/grid.png

206 Bytes
Loading

‎03/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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+
<h1>Regular Form</h1>
13+
14+
<form>
15+
<fieldset>
16+
<legend>Contact Us</legend>
17+
<p>
18+
<label>Full name</label><br />
19+
<input type="text" />
20+
</p>
21+
22+
<p>
23+
<label>Email</label><br />
24+
<input type="email" />
25+
</p>
26+
27+
<p>
28+
<label>Message</label><br />
29+
<textarea></textarea>
30+
</p>
31+
</fieldset>
32+
</form>
33+
34+
<h1>Inline form</h1>
35+
<form class="inline">
36+
<fieldset>
37+
<legend>Login</legend>
38+
<p>
39+
<label>Username</label>
40+
<input type="text" />
41+
<label>Password</label>
42+
<input type="password" />
43+
<input type="submit" value="Login" />
44+
</p>
45+
</fieldset>
46+
</form>
47+
</div>
48+
</body>
49+
</html>

‎03/sass/ie.scss

+16
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+
}

‎03/sass/partials/_base.scss

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Here is where you can define your constants for your application and to configure the blueprint framework.
2+
// Feel free to delete these if you want keep the defaults:
3+
4+
$blueprint-grid-columns: 24;
5+
$blueprint-container-size: 950px;
6+
$blueprint-grid-margin: 10px;
7+
8+
// Use this to calculate the width based on the total width.
9+
// Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you.
10+
$blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin;

‎03/sass/print.scss

+8
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); }

‎03/sass/screen.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import "blueprint/reset";
2+
@import "blueprint";
3+
4+
@include blueprint-typography();
5+
6+
#container {
7+
@include container;
8+
}
9+
10+
form {
11+
@include blueprint-form;
12+
}
13+
14+
form.inline {
15+
@include blueprint-inline-form;
16+
}

‎03/stylesheets/ie.css

+109
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+
}

‎03/stylesheets/print.css

+73
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)