HTML5 Authoring 7
HTML5 Authoring 7
The first step in choosing a library is determining what exactly you want to use the library
for? Some possible justifications for using a CSS library include:
• Using the library’s graphic design scheme to make your site appear more uniform and
attractive
• Taking advantage of the library’s page layout system to render a complex multi-
column web layout
• Implementing the library strategy for working in the realm of “responsive design”
where different variants of screen size and screen resolution can be supported.
• Ensuring your site maximizes usability on mobile screens.
Using a library simply because you find it easier may be a poor long-term approach as you
inevitably run into limitations of the library as your project expands.
You might be surprised to know that most libraries and frameworks are free to download
and use. Community volunteers maintain many of these libraries as well.
Accessing a Libary from Your Code
There are generally two ways that these external libraries are accessed from your code.
Some libraries have a complete installation routine in which the library files must be
installed in your project folder. Others will allow you to directly download the library files
and include them using the <link> and <script> tags. Each library should have
instructions for its use on the library website.
Of course, the installation of all libraries differs, but, as an example, we’re going to use
Milligram, a “minimalist CSS framework.”
Milligram is a very small library that’s designed to help you create clean code as well as a
clean interface! Milligram’s web page is an example of the minimalism the company
supports.
Milligram
Visit www.milligram.io and click the button marked “Getting Started.” You’ll now see the
download button which is used to download Milligram’s very small library to your
computer.
Once you have the library downloaded, unzip the files. From the dist folder, grab the file
entitled milligram.min.css and place that in the folder in which you’re going to store your
code.
Using Library Features
We’ll implement the Milligram library thorough linking a series of stylesheets to our HTML
document. Create an HTML basic document structure and add the code in the listing below.
<!DOCTYPE html>
<html>
<head>
<title>CSS Library</title>
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700ital
ic">
<link rel="stylesheet"
href="http://cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="milligram.min.css">
<style>
#container{
margin: 6px;
}
</style>
</head>
<body>
<div id="container">
<h1>Using a library</h1>
<p>Once you install it, using a library like <strong>Milligram</strong>
is actually quite easy.</p>
</div> <!-- container -->
</body>
</html>
Note that this library takes advantage of Google Fonts, specifically varients of the Roboto
typeface. The next link is to a normailze.css file. These important files essentially defeat
the default style sheet in every browser to give you a zero starting point. CSS rules like
space before and after headers is effectively discarded so the library can more easily use
it’s own CSS rules without fear of accidental overrides.
Because the normailze.css file resets everything to zero, I added a style to pull the content away from the
margin of the container.
The third link is tot he milligram.min.css file you just downloaded. This file is a minified
version of the Milligram library. The file itself is compacted so that as little space is used by
the file as possible, making it fast to download every across poor connections.
We’ll implement Milligram features simply by writing HTML. Let’s make some changes to
our documument.
<!DOCTYPE html>
<html>
<head>
<title>CSS Library</title>
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700ital
ic">
<link rel="stylesheet"
href="http://cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="milligram.min.css">
<style>
#container{
margin: 6px;
}
</style>
</head>
<body>
<div id="container">
<h1>Using a library</h1>
<p>Once you install it, using a library like <strong>Milligram</strong>
is actually quite easy.</p>
<h2>Where I like to get coffee:</h2>
<ul>
<li>Starbucks</li>
<li>Dunkin Donuts</li>
<li>McDonald's</li>
<li>Diner</li>
<li>Train Station Coffee Stand</li>
</ul>
src="https://s3.amazonaws.com/coursewareframework/html5authoring/lyme.jpg"/>
<h3>31-4 Baker Ln<br/>
Lyme, CT 06371</h3>
<h4>3 beds 3 baths 2,315 sqft</h4>
<p>Just minutes from a golf course, this contemporary home built in
2005
has all the spaces you desire. Enjoy the 11-acre property with an
inground heated pool, greenhouse, and stone patio. High ceilings,
marble
floors, two fireplaces, and large arched windows create a majestic
feel
in the main living areas. The gourmet kitchen features granite
counters,
a large center island, and breakfast nook. Entertain guests or enjoy
a
night in with family in the game room. Master suite includes a full
bathroom and laundry. Attached to the home is a four-car garage,
giving
you plenty of space for a workshop, storage, and cars. Connect with
us
today to view this home that has it all!</p>
</div> <!-- container -->
</body>
</html>