Skip to content

Commit 3232180

Browse files
dannyshaferdannyshafer
committed
add bootstrap grid tutorial
1 parent fc3da89 commit 3232180

File tree

3 files changed

+123
-0
lines changed

3 files changed

+123
-0
lines changed

‎public/img/grid.jpg‎

95.3 KB
Loading

‎sites/en/frontend/grid.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
4+
</head>
5+
<body>
6+
<div class="row">
7+
<div class="col-sm-4" style="background-color: red">
8+
<p style="font-size: 14px">This is a third of the screen.</p>
9+
</div>
10+
<div class="col-sm-4" style="background-color: purple">
11+
<p style="font-size: 14px">This is a third of the screen.</p>
12+
</div>
13+
<div class="col-sm-4" style="background-color: orange">
14+
<p style="font-size: 14px">This is a third of the screen.</p>
15+
</div>
16+
</div>
17+
<div class="row">
18+
<div class="col-sm-3" style="background-color: red">
19+
<p style="font-size: 14px">This is a quarter of the screen.</p>
20+
</div>
21+
<div class="col-sm-3" style="background-color: purple">
22+
<p style="font-size: 14px">This is a quarter of the screen.</p>
23+
</div>
24+
<div class="col-sm-3" style="background-color: orange">
25+
<p style="font-size: 14px">This is a quarter of the screen.</p>
26+
</div>
27+
<div class="col-sm-3" style="background-color: yellow">
28+
<p style="font-size: 14px">This is a quarter of the screen.</p>
29+
</div>
30+
</div>
31+
<div class="row">
32+
<div class="col-sm-6" style="background-color: red">
33+
<p style="font-size: 14px">This is half of the screen.</p>
34+
</div>
35+
<div class="col-sm-6" style="background-color: purple">
36+
<p style="font-size: 14px">This is half of the screen.</p>
37+
</div>
38+
</div>
39+
</body>
40+
</html>

‎sites/en/frontend/griding_with_bootstrap.step‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
goals do
2+
message "As users view sites on laptops, tablets, and phones, web developers have invented a way to accomodate different screen sizes without making seperate sites. This design paradigm uses something called a 'grid' that dynamically updates depending on the screen. This challenge will help you learn to understand the grid and make responsive websites with [Bootstrap's](http://getbootstrap.com/) own system."
3+
goal "Learn about formatting a webpage with Bootstrap's grid system"
4+
goal "Make a website that looks good on a full sized laptop as well as on a phone."
5+
end
6+
7+
steps do
8+
9+
step do
10+
message "Add the Bootstrap CDN link in the head of your page with the following url:"
11+
source_code :html,<<-HTML
12+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
13+
HTML
14+
end
15+
16+
step do
17+
message "For horizontal slicing, Bootstrap uses 'rows', which look like this:"
18+
19+
source_code :html,<<-HTML
20+
<div class="row">
21+
<p>This will take up a whole row</p>
22+
</div>
23+
HTML
24+
25+
message "For vertical slicing, Bootstrap uses a 12-column layout for a webpage, which means that each 'column' represents one twelfth of the screen. 12 columns was selected because a screen can easily be divided up into logical segments: three 4-column elements, four 3-column elements, two 6-column elements, six 2-column elements, and any combination thereof (one 6-column element and three 2-column elements, for example)."
26+
message "Notice the 'col-sm-6'? That's a class that tells Bootstrap that on a small screen, the element should take up six columns. There's also 'col-lg-x' and 'col-md-x' for large and medium screens respectively."
27+
28+
source_code :html,<<-HTML
29+
<div class="row">
30+
<div class="col-sm-6">
31+
<p>This will take up half of a row</p>
32+
</div>
33+
<div class="col-sm-6">
34+
<p>This will take up half of a row</p>
35+
</div>
36+
</div>
37+
HTML
38+
end
39+
40+
step do
41+
message "Using the above as a reference, try to make a page that looks like this:"
42+
message "<img src='../img/grid.jpg'>"
43+
end
44+
45+
step do
46+
message "If you're trying to make a website that will look good on all screen sizes, you can specify different classes for each size like so: "
47+
48+
source_code :html,<<-HTML
49+
<div class="row">
50+
<div class="col-sm-12 col-md-6 col-lg-4">
51+
<p>This will take up a third of a row on a large screen.</p>
52+
</div>
53+
<div class="col-sm-12 col-md-6 col-lg-4">
54+
<p>This will take up half a row on medium screens.</p>
55+
</div>
56+
<div class="col-sm-12 col-md-6 col-lg-4">
57+
<p>This will take up a full row on small screens.</p>
58+
</div>
59+
</div>
60+
HTML
61+
62+
message "Try making some columns and resizing the screen to see how the elements stack and unstack when the screen size changes."
63+
end
64+
65+
end
66+
67+
explanation do
68+
69+
message <<-MARKDOWN
70+
71+
## Final thoughts!
72+
73+
The grid is one of Bootstrap's most powerful features. In fact, many developers who generally build their own components often still use the grid from Bootstrap (or [Foundation](http://foundation.zurb.com/)) simply because it saves time in development by making it easier to build sites that work on all screen sizes.
74+
75+
### Grid Reference
76+
77+
* [Bootstrap Source](http://getbootstrap.com/css/#grid)
78+
* [Grid Tutorial](http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php)
79+
80+
MARKDOWN
81+
end
82+
83+

0 commit comments

Comments
 (0)