Skip to content

Commit 97208ee

Browse files
mattmakaimattmakai
committed
adding new css page, also updated change log
1 parent 44a1952 commit 97208ee

33 files changed

+277
-26
lines changed

‎about-author.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ <h1>About the Author</h1>
8888
<p>Typos, inaccurate statements, or general areas for improvement can be handled
8989
through a pull request on
9090
<a href="https://github.com/makaimc/fullstackpython.github.com/">GitHub</a>.</p>
91-
<br/>
91+
<br/>
9292
Next read the
9393
<a href="/change-log.html">change log</a> section.
9494

@@ -104,6 +104,7 @@ <h1>About the Author</h1>
104104
<a href="/wsgi-servers.html" class="list-group-item ">WSGI Servers</a>
105105
<a href="/web-frameworks.html" class="list-group-item ">Web Frameworks</a>
106106
<a href="/application-dependencies.html" class="list-group-item ">Application Dependencies</a>
107+
<a href="/cascading-style-sheets.html" class="list-group-item ">Cascading Style Sheets</a>
107108
<a href="/static-content.html" class="list-group-item ">Static Content</a>
108109
<a href="/source-control.html" class="list-group-item ">Source Control</a>
109110
<a href="/caching.html" class="list-group-item ">Caching</a>

‎api-integration.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ <h1>API Integration</h1>
8686
across many implementation areas.</p>
8787
<h2>API Integration Resources</h2>
8888
<p>My DjangoCon 2013 talk dove into "<a href="http://www.youtube.com/watch?v=iGP8DQIqxXs">Making Django Play Nice With Third Party Services</a>."</p>
89-
<br/>
89+
<br/>
9090
Next read the
9191
<a href="/no-sql-datastore.html">nosql data stores</a> section.
9292

@@ -102,6 +102,7 @@ <h2>API Integration Resources</h2>
102102
<a href="/wsgi-servers.html" class="list-group-item ">WSGI Servers</a>
103103
<a href="/web-frameworks.html" class="list-group-item ">Web Frameworks</a>
104104
<a href="/application-dependencies.html" class="list-group-item ">Application Dependencies</a>
105+
<a href="/cascading-style-sheets.html" class="list-group-item ">Cascading Style Sheets</a>
105106
<a href="/static-content.html" class="list-group-item ">Static Content</a>
106107
<a href="/source-control.html" class="list-group-item ">Source Control</a>
107108
<a href="/caching.html" class="list-group-item ">Caching</a>

‎application-dependencies.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,9 +167,9 @@ <h2>Application dependency resources</h2>
167167
</ul>
168168
<br/>
169169
Next read the
170-
<a href="/static-content.html">static content</a> section.
170+
<a href="/cascading-style-sheets.html">cascading style sheets</a> section.
171171

172-
</div>
172+
</div>
173173
<div class="col-md-offset-1 col-md-3" id="sidebar">
174174
<div class="list-group">
175175
<a href="/introduction.html" class="list-group-item ">Introduction</a>
@@ -181,6 +181,7 @@ <h2>Application dependency resources</h2>
181181
<a href="/wsgi-servers.html" class="list-group-item ">WSGI Servers</a>
182182
<a href="/web-frameworks.html" class="list-group-item ">Web Frameworks</a>
183183
<a href="/application-dependencies.html" class="list-group-item active">Application Dependencies</a>
184+
<a href="/cascading-style-sheets.html" class="list-group-item ">Cascading Style Sheets</a>
184185
<a href="/static-content.html" class="list-group-item ">Static Content</a>
185186
<a href="/source-control.html" class="list-group-item ">Source Control</a>
186187
<a href="/caching.html" class="list-group-item ">Caching</a>

‎best-python-resources.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ <h2>Newsletters</h2>
163163
and projects from around the web.</p>
164164
</li>
165165
</ul>
166-
<br/>
166+
<br/>
167167
Next read the
168168
<a href="/about-author.html">about the author</a> section.
169169

@@ -179,6 +179,7 @@ <h2>Newsletters</h2>
179179
<a href="/wsgi-servers.html" class="list-group-item ">WSGI Servers</a>
180180
<a href="/web-frameworks.html" class="list-group-item ">Web Frameworks</a>
181181
<a href="/application-dependencies.html" class="list-group-item ">Application Dependencies</a>
182+
<a href="/cascading-style-sheets.html" class="list-group-item ">Cascading Style Sheets</a>
182183
<a href="/static-content.html" class="list-group-item ">Static Content</a>
183184
<a href="/source-control.html" class="list-group-item ">Source Control</a>
184185
<a href="/caching.html" class="list-group-item ">Caching</a>

‎caching.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ <h2>Caching Resources</h2>
8888
<p><a href="http://redis.io/">Redis</a> is a key-value in-memory data store that can
8989
easily be configured for caching with libraries such as
9090
<a href="https://github.com/sebleier/django-redis-cache">django-redis-cache</a>.</p>
91-
<br/>
91+
<br/>
9292
Next read the
9393
<a href="/task-queues.html">task queues</a> section.
9494

@@ -104,6 +104,7 @@ <h2>Caching Resources</h2>
104104
<a href="/wsgi-servers.html" class="list-group-item ">WSGI Servers</a>
105105
<a href="/web-frameworks.html" class="list-group-item ">Web Frameworks</a>
106106
<a href="/application-dependencies.html" class="list-group-item ">Application Dependencies</a>
107+
<a href="/cascading-style-sheets.html" class="list-group-item ">Cascading Style Sheets</a>
107108
<a href="/static-content.html" class="list-group-item ">Static Content</a>
108109
<a href="/source-control.html" class="list-group-item ">Source Control</a>
109110
<a href="/caching.html" class="list-group-item active">Caching</a>

‎cascading-style-sheets.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3+
<meta charset="utf-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="description" content="Full Stack Python shows how an entire Python web application is built and deployed. Each section of the guide explains a different key concept, from the server through the Python WSGI web framework to the front end JavaScript.">
7+
<meta name="author" content="Matt Makai">
8+
<link rel="shortcut icon" href="theme/img/full-stack-python-logo-bw.png">
9+
<title>Cascading Style Sheets</title>
10+
<link href="theme/css/fsp.css" rel="stylesheet">
11+
<!--[if lt IE 9]>
12+
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
13+
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
14+
<![endif]-->
15+
<style>
16+
html,
17+
body {
18+
font-size: 18px;
19+
color: #222;
20+
background: #fefefe;
21+
}
22+
body {
23+
padding-top: 30px;
24+
}
25+
.footer {
26+
padding: 20px 0 30px 0;
27+
}
28+
a, a:hover {border-bottom: 1px dotted; color: #444;}
29+
a:hover {text-decoration: none; color: #000;}
30+
.logo-title {font-size: 56px; color: #403072; padding-top: 80px;
31+
font-family: "News Cycle", "Arial Narrow Bold", sans-serif;
32+
font-weight: bold; line-height: 30px; margin-left: 5px;}
33+
.logo-title a, .logo-title a:hover {color: #000; text-decoration: none;
34+
border-bottom: none;}
35+
.logo-title a:hover {color: gray;}
36+
.logo-image {vertical-align: top; border: none;}
37+
a.list-group-item.active {background: #444; border: 1px solid #222;}
38+
a.list-group-item.active:hover {background: #444; border: 1px solid #222;}
39+
#sidebar {margin-top: 30px;}
40+
41+
@media (max-width: 600px) {
42+
.logo-header-section {
43+
margin: 20px 32px 0 0;
44+
}
45+
}
46+
</style>
47+
48+
<script type="text/javascript">
49+
var _gaq = _gaq || [];
50+
_gaq.push(['_setAccount', 'UA-19910497-7']);
51+
_gaq.push(['_trackPageview']);
52+
53+
(function() {
54+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
55+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
56+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
57+
})();
58+
</script>
59+
</head>
60+
61+
<body>
62+
<a href="https://github.com/makaimc/fullstackpython.github.com" class="github">
63+
<img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" />
64+
</a>
65+
<div class="container">
66+
<div class="row">
67+
<div class="col-md-12">
68+
<div class="logo-header-section">
69+
<a href="/" style="text-decoration: none; border: none;"><img src="theme/img/full-stack-python-logo-bw.png" height="42" width="42" class="logo-image" /></a>
70+
<span class="logo-title"><a href="/">Full Stack Python</a></span>
71+
</div>
72+
</div>
73+
</div>
74+
<div class="row">
75+
<div class="col-md-8">
76+
<h1>Cascading Style Sheets (CSS)</h1>
77+
<p>A Cascading Style Sheet (CSS) files contain rules for how to display and
78+
lay out the HTML content when it is rendered by a web browser.</p>
79+
<h2>Why is CSS necessary?</h2>
80+
<p>CSS separates content contained in the HTML file from how the content
81+
should be displayed. That separation between content and how to display it
82+
enables devices to render the content differently based on factors such as
83+
screen size. For example, a mobile device does not have as much space to
84+
display a navigation bar on the side of a page so it is often pushed down
85+
below the main content. The
86+
<a href="http://getbootstrap.com/examples/blog/">Bootstrap Blog example</a>
87+
shows that scenario when you resize the browser width.</p>
88+
<h2>How is CSS retrieved from the web server?</h2>
89+
<p>The HTML file sent by the web server contains a reference to the CSS file(s)
90+
needed to render the content. The web browser requests the CSS file after the
91+
HTML file as shown below in a screenshot captured of the Chrome Web Developer
92+
Tools network traffic.</p>
93+
<p><img src="theme/img/css-chrome-dev-tools.jpg" width="100%" alt="Google Chrome Web Developer Tools shows how CSS is separate from the HTML content." class="technical-diagram" /></p>
94+
<p>That request for the fsp.css file is made because the HTML file for Full
95+
Stack Python contains a reference to <code>theme/css/fsp.css</code> which is shown
96+
in the view source screenshot below.</p>
97+
<p><img src="theme/img/fsp-css-source.jpg" width="100%" alt="View source screenshot for the fsp.css file in index.html." class="technical-diagram" /></p>
98+
<h2>CSS frameworks</h2>
99+
<ul>
100+
<li>
101+
<p><a href="http://getbootstrap.com/">Bootstrap</a></p>
102+
</li>
103+
<li>
104+
<p><a href="http://foundation.zurb.com/">Foundation</a></p>
105+
</li>
106+
</ul>
107+
<h2>CSS preprocessors</h2>
108+
<ul>
109+
<li>
110+
<p><a href="http://sass-lang.com/">SASS</a></p>
111+
</li>
112+
<li>
113+
<p><a href="http://lesscss.org/">LESS</a></p>
114+
</li>
115+
</ul>
116+
<h2>Design resources</h2>
117+
<ul>
118+
<li>The <a href="http://bootstrappingdesign.com/">Bootstrapping Design</a> book is one of
119+
the clearest and concise resources for learning design that I've ever read.
120+
Highly recommended especially if you feel you have no design skills but
121+
need to learn them.</li>
122+
</ul>
123+
<h2>CSS resources</h2>
124+
<ul>
125+
<li><a href="http://alistapart.com/article/css-positioning-101">CSS Positioning 101</a></li>
126+
</ul>
127+
<br/>
128+
Next read the
129+
<a href="/static-content.html">static content</a> section.
130+
131+
</div>
132+
<div class="col-md-offset-1 col-md-3" id="sidebar">
133+
<div class="list-group">
134+
<a href="/introduction.html" class="list-group-item ">Introduction</a>
135+
<a href="/servers.html" class="list-group-item ">Servers</a>
136+
<a href="/operating-systems.html" class="list-group-item ">Operating Systems</a>
137+
<a href="/web-servers.html" class="list-group-item ">Web Servers</a>
138+
<a href="/platform-as-a-service.html" class="list-group-item ">Platform-as-a-service</a>
139+
<a href="/databases.html" class="list-group-item ">Databases</a>
140+
<a href="/wsgi-servers.html" class="list-group-item ">WSGI Servers</a>
141+
<a href="/web-frameworks.html" class="list-group-item ">Web Frameworks</a>
142+
<a href="/application-dependencies.html" class="list-group-item ">Application Dependencies</a>
143+
<a href="/cascading-style-sheets.html" class="list-group-item active">Cascading Style Sheets</a>
144+
<a href="/static-content.html" class="list-group-item ">Static Content</a>
145+
<a href="/source-control.html" class="list-group-item ">Source Control</a>
146+
<a href="/caching.html" class="list-group-item ">Caching</a>
147+
<a href="/task-queues.html" class="list-group-item ">Task Queues</a>
148+
<a href="/api-integration.html" class="list-group-item ">API Integration</a>
149+
<a href="/no-sql-datastore.html" class="list-group-item ">NoSQL Data Stores</a>
150+
<a href="/web-application-security.html" class="list-group-item ">Web Security</a>
151+
<a href="/logging.html" class="list-group-item ">Logging</a>
152+
<a href="/monitoring.html" class="list-group-item ">Monitoring</a>
153+
<a href="/configuration-management.html" class="list-group-item ">Configuration Management</a>
154+
<a href="/web-analytics.html" class="list-group-item ">Web Analytics</a>
155+
<a href="/best-python-resources.html" class="list-group-item ">Best Python Resources</a>
156+
<a href="/about-author.html" class="list-group-item ">About the Author</a>
157+
<a href="/change-log.html" class="list-group-item ">Change Log</a>
158+
</div>
159+
</div></div>
160+
<hr/>
161+
<div class="footer pull-right">
162+
<a href="http://www.mattmakai.com/" class="underline">Matt Makai</a> 2014
163+
</div>
164+
</div>
165+
166+
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
167+
<script src="theme/js/bootstrap.min.js"></script>
168+
</body>
169+
</html>

0 commit comments

Comments
 (0)