Skip to content

Instantly share code, notes, and snippets.

@jalalhejazi

jalalhejazi/application.css

Last active January 15, 2016 19:10
Show Gist options
  • Save jalalhejazi/5341532 to your computer and use it in GitHub Desktop.
Save jalalhejazi/5341532 to your computer and use it in GitHub Desktop.
Download ZIP
CSS: Nice Scalable Fluid Text formatting
Raw
application.css
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block
}
strong,b {
font-weight: bold
}
i,em,blockquote {
font-style: italic
}
html,body {
min-height: 100%
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background: #fff;
overflow-y: scroll
}
img {
-ms-interpolation-mode: bicubic;
background: transparent;
border: 0
}
img,embed,object,video {
max-width: 100%;
height: inherit;
_width: 100%
}
::-moz-selection {
background: #646464;
color: #fff;
text-shadow: none
}
::selection {
background: #646464;
color: #fff;
text-shadow: none
}
::selection:window-inactive {
background: #dcdcdc;
color: #323232
}
img::selection {
background: transparent
}
img::-moz-selection {
background: transparent
}
body {
font: 75%/1.5em Georgia,serif;
max-width: 40.49984em;
color: #000;
margin: 0 auto;
padding: 1em
}
.ie body {
max-width: 32.90612em;
_width: 32.90612em;
font-size: 100%
}
h1,h2,h3,h4,h5,h6 {
-moz-font-feature-settings: "liga=1, kern=1";
-ms-font-feature-settings: "liga" 1,"kern" 1;
text-rendering: optimizeLegibility;
margin-bottom: 1.42382em;
font-weight: normal
}
p,ul,ol,dl,blockquote,.content img {
margin-bottom: 1.5em;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto
}
abbr {
text-transform: lowercase;
font-variant: small-caps;
letter-spacing: .1em;
cursor: help
}
sub,sup {
vertical-align: baseline;
position: relative;
font-size: 65%;
line-height: 0
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
blockquote {
margin: 1.5em 0 1.5em 1.80203em;
color: #5a5a5a;
position: relative
}
blockquote:before {
-webkit-font-smoothing: antialiased;
color: #8c8c8c;
font-size: 3.60406em;
position: absolute;
font-style: italic;
content: "\201C";
line-height: 1em;
left: -0.60180em;
top: 0
}
ul,ol {
margin-left: 1.5em
}
ul {
list-style-type: circle
}
ol {
list-style-type: lower-roman
}
h1 {
margin: .97em 0 .5em;
line-height: 1.125em;
font-size: 2em
}
.ie h1 {
font-size: 4em
}
h2 {
line-height: 1.77777em;
margin-bottom: 1em;
font-size: 1.2em
}
h3 {
margin: 1.7em 0 .85em;
line-height: 1.5em;
font-size: 1.3em
}
h4 {
line-height: 1.12382em;
margin: 0 0 1.3em;
font-size: 1.2em
}
h5 {
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.5em;
margin: 0 0 1.5em;
font-size: 1em
}
h6 {
font-weight: bold;
margin: 0 0 1.5em
}
pre,code {
font: .9375em/1.26562em monospace,monospace;
-webkit-font-smoothing: subpixel-antialiased
}
pre {
color: #5a5a5a;
padding: 1.5em 1em;
margin-bottom: 3em;
line-height: 1em;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word
}
img {
margin: .5em auto 1.5em auto;
display: block
}
.highlight {
border-color: #000;
background: #fffccf;
color: #000;
margin-top: 3em;
padding: 0 .2em
}
a {
border-bottom: 1px solid #c8c8c8;
text-decoration: none;
color: #505050
}
a:hover {
border-bottom: 1px solid #000;
background: rgba(0,0,0,.05);
color: #000
}
a:active {
outline: 0
}
sup a {
text-decoration: none
}
@media print {
html {
border: 0
}
a[href]:after {
content: " (" attr(href) ")"
}
a[href^="javascript:"]:after,a[href^="#"]:after {
content: ""
}
}
@media screen and (min-width:15.652em) {
body {
font-size: 87.5%
}
h2 {
font-size: 1.26562em
}
h3 {
font-size: 1.5em
}
h4 {
font-size: 1.26562em
}
}
@media screen and (min-width:19.9375em) {
body {
font-size: 100%;
padding: 1.5em
}
h1 {
font-size: 3em
}
.dropcap:first-letter {
font: 3.32956em/0.7em Georgia,serif;
-webkit-font-smoothing: antialiased;
margin: .2em .15em .1em 0;
float: left
}
.ie9 .dropcap:first-letter {
margin: .2em .45em 0 0;
line-height: .9em
}
}
@media screen and (min-width:29.9375em) {
body {
padding: 1.5em 3em;
max-width: 34.3em
}
ul,ol {
margin-left: 0
}
sup.indent {
margin-left: -1.5em
}
}
@media screen and (min-width:38em) {
body {
padding: 4.5em 3em 7.59372em
}
h1 {
margin: .97em 0 .8em;
font-size: 4em
}
}
@media screen and (min-width:99.9375em) {
body {
max-width: 34.43736em;
line-height: 1.75em;
font-size: 112.5%
}
}
pre code {
display: block;
padding: .5em;
background: #002b36;
color: #839496
}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc {
color: #586e75;
font-style: italic
}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title {
color: #859900
}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor {
color: #2aa198
}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id {
color: #268bd2
}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type {
color: #b58900
}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title {
color: #cb4b16
}
pre .deletion {
color: #dc322f
}
pre .tex .formula {
background: #073642
}
Raw
application.html
<!DOCTYPE html>
<html>
<head>
<title>
Creating a basic site with node.js and Express | Jalal Hejazi
</title>
<meta charset="utf-8">
<meta name="author" content="Jalal Hejazi">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../stylesheets/application.css">
</head>
<body>
<article>
<p>
<time datetime="2013" data-updated="true">
2013
</time>
</p>
<h1>
Creating a basic site with node.js and Express
</h1>
<h2 class="dropcap">
A walkthrough on how to create and deploy a basic site with node.js and
the Express framework
</h2>
<h2>
What we are going to do
</h2>
<p>
This walkthrough will go over setting up a basic site using
<a href="http://nodejs.org/">node.js</a>
and Express. The walkthrough is aimed at beginners exploring node.js as
I&#39;ve had many questions from friends and colleagues about creating
and deploying node apps. If you are not a beginner the article probably
won&#39;t be of much use to you. We are going to use
<a href="http://expressjs.com/">express</a>
, an excellent web framework for node created by
<a href="http://tjholowaychuk.com/">TJ Holowaychuk</a>
who seems to be pumping out node.js libraries like he was ten men.
</p>
<p>
Here is
<a href="http://express-tutorial.herokuapp.com/">the site</a>
we are going to create. You might also want to grab the
<a href="https://github.com/Jalalhejazi/express_example">source code</a>
.
</p>
<p>
<a href="http://express-tutorial.herokuapp.com/"><img src="../images/articles/express_example.jpg" alt="Example Express website"></a>
</p>
<h2>
Setup
</h2>
<p>
First we need to setup our development environment. If you are on OSX
I&#39;ve
<a href="../setting-up-nodejs-and-npm-on-mac-osx/index.html">covered how to setup node.js and npm on OSX</a>
in a previous article. If you haven&#39;t got everything installed follow
that article.
</p>
<p>
If you are on Linux there are plenty of
<a href="http://www.google.com/search?q=install+node.js+linux">articles on Google</a>
.
</p>
<p>
For Windows users there are also
<a href="http://www.google.com/search?q=install+node.js+windows">resources on Google</a>
but it is a bit more tricky.
</p>
<h2>
Prerequisites
</h2>
<p>
If everything has installed ok you should now have node.js and npm running
on your machine. At the terminal type
<code>
node -v
</code>
and
<code>
npm -v
</code>
and you should see something like:
</p>
<pre>
<code>
node -v v0.8.21 npm -v 1.2.12
</code>
</pre>
<h2>
Create an Express site
</h2>
<p>
Still with me? We&#39;ve covered a lot already! Now let&#39;s create an
Express site.
</p>
<p>
First let&#39;s install express
</p>
<pre>
<code>
npm install -g express
</code>
</pre>
<p>
The
<code>
-g
</code>
flag means that you are installing express globally on your system.
</p>
<p>
Now we can create an express application.
</p>
<pre>
<code>
express -c stylus express_example
</code>
</pre>
<p>
The
<code>
-c
</code>
states that we want to use stylus for css. You should see the following
output:
</p>
<pre>
<code>
create : express_example create : express_example/package.json create:
express_example/app.js create : express_example/public create : express_example/public/javascripts
create : express_example/public/images create : express_example/public/stylesheets
create : express_example/public/stylesheets/style.styl create : express_example/routes
create : express_example/routes/index.js create : express_example/routes/user.js
create : express_example/views create : express_example/views/layout.jade
create : express_example/views/index.jade install dependencies: $ cd express_example
&amp;&amp; npm install run the app: $ node app
</code>
</pre>
<p>
As per the instructions you&#39;ll need to install dependencies so do
this
</p>
<pre>
<code>
cd express_example &amp;&amp; npm install
</code>
</pre>
<p>
This will install packages and you will see a lot of output. When this
is complete you can boot your application.
</p>
<h2>
Boot the app
</h2>
<p>
That&#39;s all the setup you need. Phew. Now you can boot the app:
</p>
<pre>
<code>
node app.js
</code>
</pre>
<p>
You should see
<code>
Express server listening on port 3000
</code>
and if you open
<a href="http://127.0.0.1:3000/"><a href="http://127.0.0.1:3000">http://127.0.0.1:3000</a>
</a>
you&#39;ll see the default Express page.
</p>
<h2>
Using Git
</h2>
<p>
<a href="http://git-scm.com/">Git</a>
is a version control system that is used heavily in the node.js ecosystem,
particulary with
<a href="https://github.com/">Github</a>
. If you aren&#39;t familiar with Git
<a href="http://scottchacon.com/">Scott Chacon</a>
is your go-to man. He&#39;s written extensively and eloquently on Git
for beginners and experts. Checkout
<a href="http://gitcasts.com/">Gitcasts</a>
for if you are a beginner and
<a href="http://progit.org/">ProGit</a>
for more advanced stuff. We are going to use git to version our site and
publish it so let&#39;s set up our repo now. If your Express server is
still running hit CTRL + C to stop it.
</p>
<pre>
<code>
git init git add . git commit -m &#39;initial commit&#39;
</code>
</pre>
<h2>
Developing node.js sites
</h2>
<p>
Normally when you develop a node.js site you&#39;ll need ot restart your
application each time you make a change. Thankfully our home-grown British
JavaScript genius
<a href="http://remysharp.com/">Remy Sharp</a>
has solved this problem with
<a href="https://github.com/remy/nodemon">nodemon</a>
. Nodemon will reload your application each time it changes so you don&#39;t
need to restart it. If you have used
<a href="https://github.com/rtomayko/shotgun">Shotgun</a>
for Ruby with
<a href="http://www.sinatrarb.com/">Sinatra</a>
it is similar to that. To install run
</p>
<pre>
<code>
npm install -g nodemon
</code>
</pre>
<p>
Then you can start your app with
</p>
<pre>
<code>
nodemon app.js
</code>
</pre>
<p>
Using nodemon means you don&#39;t have to restart your app each time you
make a change. For more infomation on nodemon see the
<a href="https://github.com/remy/nodemon/blob/master/README.md">README</a>
</p>
<h2>
HTML in Express
</h2>
<p>
Express is agnostic as to which templating language you use. Templating
languages can be a hot topic of debate but for this article I&#39;m going
to use
<a href="http://jade-lang.com/">jade</a>
. If you&#39;ve used
<a href="http://haml-lang.com/">haml</a>
it is similar to that. In the example we use jade to setup a layout template.
</p>
<pre>
<code>
!!! 5 html head title= title link(rel=&#39;stylesheet&#39;, href=&#39;/stylesheets/style.css&#39;)
link(rel=&#39;stylesheet&#39;, href=&#39;/stylesheets/chunkfive-fontface.css&#39;)
body header nav ul li a(href=&quot;/&quot;) Home li a(href=&quot;/about&quot;)
About li a(href=&quot;/contact&quot;) Contact section#wrapper!= body footer
section.css-table section.four-column section.cell p Mauris porttitor &lt;br
/&gt;felis eu leo aliquet&lt;br /&gt; ac rutrum odio aliquet section.cell
p Mauris porttitor &lt;br /&gt;felis eu leo aliquet&lt;br /&gt; ac rutrum
odio aliquet section.cell p Mauris porttitor &lt;br /&gt;felis eu leo aliquet&lt;br
/&gt; ac rutrum odio aliquet section.cell p Mauris porttitor &lt;br /&gt;felis
eu leo aliquet&lt;br /&gt; ac rutrum odio aliquet
</code>
</pre>
<p>
This is a common template we can reuse. The line
<code>
section#wrapper!= body
</code>
pulls in content from the page it is used on. Express also supports variables
that you pass through to the template. In this case we pass the title variable.
If you are coming from Sinatra this will all be familiar to you. If you
are not I recommend consulting the
<a href="http://expressjs.com/guide.html">Express documentation</a>
.
</p>
<h2>
CSS in Express
</h2>
<p>
Again Express is agnostic to what you use to generate your CSS - you can
use vanilla CSS but for this example I&#39;m using
<a href="http://learnboost.github.com/stylus/">Stylus</a>
. This is very similar to
<a href="http://sass-lang.com/">Sass</a>
and supports variables, mixins, functions and more. I really like it!
Here&#39;s an example from our stylesheet
</p>
<pre>
<code>
body font 62.5%/1.5 Helvetica, Arial, &quot;Lucida Grande&quot;, &quot;Lucida
Sans&quot;, Tahoma, Verdana, sans-serif text-align center background #000
#wrapper width 920px text-align left margin-left auto margin-right auto
background #fff padding 20px border-bottom-radius(15px)
</code>
</pre>
<p>
You&#39;ll see that stylus is very terse - you don&#39;t need brackets
or commas.
</p>
<h2>
Routing in Express
</h2>
<p>
Routing is similar to
<a href="http://www.sinatrarb.com/">Sinatra</a>
, allowing you to set up RESTful routes.
</p>
<p>
In this example we setup three routes in
<a href="https://github.com/Jalalhejazi/express_example/blob/master/app.js">app.js</a>
</p>
<pre>
<code>
app.get(&#39;/&#39;, function(req, res){ res.render(&#39;index&#39;, {
title: &#39;Home&#39; }); }); app.get(&#39;/about&#39;, function(req, res){
res.render(&#39;about&#39;, { title: &#39;About&#39; }); }); app.get(&#39;/contact&#39;,
function(req, res){ res.render(&#39;contact&#39;, { title: &#39;Contact&#39;
}); });
</code>
</pre>
<p>
See the
<a href="http://expressjs.com/guide.html#routing">Express documentation</a>
for more.
</p>
<h2>
Publishing your site
</h2>
<p>
We&#39;ve now developed a basic node.js site using express and we want
to host it somewhere. Publishing the site to
<a href="http://www.heroku.com/">Heroku</a>
is free and you can be up and running in no time. You can sign up for
an account at
<a href="http://www.heroku.com/">Heroku</a>
for free and then install the
<a href="https://toolbelt.heroku.com/">toolbelt</a>
.
</p>
<p>
To make your example node site work with Heroku you must create a file
called Procfile in the root of the project. Add the following.
</p>
<pre>
<code>
web: node app.js
</code>
</pre>
<p>
To make sure Heroku uses the correct versions of node add this to the
package.json file
</p>
<pre>
<code>
&quot;engines&quot;: { &quot;node&quot;: &quot;0.8.x&quot;, &quot;npm&quot;:
&quot;1.2.x&quot; }
</code>
</pre>
<p>
Then you can use the command line tools to create a site on Heroku and
publish it.
</p>
<pre>
<code>
heroku apps:create git push heroku master
</code>
</pre>
<p>
Easy!
</p>
<p>
Some other node.js hosting providers include
<a href="http://www.nodejitsu.com/">nodejitsu</a>
,
<a href="https://no.de/">Joyent</a>
,
<a href="http://www.cloudfoundry.com/">Cloud Foundry</a>
and
<a href="http://www.duostack.com/">Duostack</a>
.
</p>
<h2>
Conclusion
</h2>
<p>
This article has showed how to create a very basic site using node.js
and Express. It has introduced a number of things from the node.js ecosystem
and showed you how to deploy your app to Nodester.
</p>
<p>
The strengths of node.js as a technology are not so much in building static
websites like this. I encourage you to explore some of the node.js libraries
to see what it can do. Particularly for real-time applications node.js
is extremely exciting and I think we&#39;ll see some great apps built on
node.js. Try starting with
<a href="http://socket.io/">socket.io</a>
for a taste of what to expect.
</p>
<p>
If you find any inaccuracies in the post
<a href="../index.html">send me an email</a>
and I&#39;ll update the post.
</p>
<h2>
Further reading
</h2>
<ul>
<li>
<a href="http://nodejs.org/">node.js</a>
</li>
<li>
<a href="http://expressjs.com/">express - node web framework</a>
</li>
<li>
<a href="http://npmjs.org/">npm - node package manager</a>
</li>
<li>
<a href="http://jade-lang.com/">jade - node.js templating language</a>
</li>
<li>
<a href="http://learnboost.github.com/stylus/">stylus - node.js css framework</a>
</li>
<li>
<a href="../setting-up-nodejs-and-npm-on-mac-osx/index.html">Setting up node.js and npm on Mac OSX</a>
</li>
<li>
<a href="http://express-tutorial.herokuapp.com/">Nodester - Open Source Hosting for node.js</a>
</li>
<li>
<a href="https://github.com/Jalalhejazi/express_example">Source code for this article</a>
</li>
</ul>
<h2>
Tags
</h2>
<ul>
<li>
<a href="../tags/node-js/index.html"> Node.js</a>
</li>
<li>
<a href="../tags/javascript/index.html"> JavaScript</a>
</li>
</ul>
<h2>
</h2>
</article>
<footer>
<p>
</p>
<ul>
<li>
<a href="../index.html" class="highlight">Home</a>
</li>
<li>
<a href="https://github.com/Jalalhejazi" class="highlight">GitHub</a>
</li>
<li>
<a href="https://twitter.com/JalalHejazi" class="highlight">Twitter</a>
</li>
<li>
<a href="https://plus.google.com/u/2/105161683173023685927/?rel=author"
class="highlight">Google+</a>
</li>
</ul>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment