146 / 478
1. OnWindows, youmay not have
wget
and
unzip
, but I’m sure you can figure out how to download Bootstrap,
unzip it, and put the contents of the
dist
folder into the
lists/static/bootstrap
folder.
File "/workspace/superlists/functional_tests/tests.py", line 114, in
test_layout_and_styling
delta=5
AssertionError: 110.0 != 512 within 5 delta
Let’s commit just the FT:
$
git add functional_tests/tests.py
$
git commit -m "first steps of FT for layout + styling"
Now it feels like we’re justified in finding a “proper” solution to our need for some better
styling for our site. We can back out our hacky
<p style="text-align: center">
:
$
git reset --hard
git reset --hard
is the “take off and nuke the site from orbit” Git
command, so be careful with it—it blows away all your un-
committed changes. Unlike almost everything else you can do with
Git, there’s no way of going back after this one.
Prettification: Using a CSS Framework
Design is hard, and doubly so now that we have to deal with mobile, tablets, and so
forth. That’s why many programmers, particularly lazy ones like me, are turning to CSS
frameworks to solve some of those problems for them. There are lots of frameworks
out there, but one of the earliest and most popular is Twitter’s Bootstrap. Let’s use that.
You can find bootstrap at
http://getbootstrap.com/.
We’ll download it and put it in a new folder called
static
inside the
lists
app:
1
$
wget -O bootstrap.zip
https://github.com/twbs/bootstrap/releases/download/\
v3.1.0/bootstrap-3.1.0-dist.zip
$
unzip bootstrap.zip
$
mkdir lists/static
$
mv dist lists/static/bootstrap
$
rm bootstrap.zip
Bootstrap comes with a plain, uncustomised installation in the
dist
folder. We’re going
to use that for now, but you should really never do this for a real site—vanilla Bootstrap
is instantly recognisable, and a big signal to anyone in the know that you couldn’t be
bothered to style your site. Learn how to use LESS and change the font, if nothing else!
There is info in Bootstrap’s docs, or there’s a
good guide here.
Our
lists
folder will end up looking like this:
118
|
Chapter 7: Prettification: Layout and Styling, and What to Test About It