Practice using Skeleton Framework by recreating a new HTML page with it and using their provided CSS document.
Remember Skeleton is mobile up, so the initial CSS in the provided document is for the mobile version and then the media queries are for anything larger than mobile. If everything is based upon percentages and fluid, it shouldn’t be too difficult to rewire your brain. (:
In Class Demo and File Examples
PREPARING FILE ORGANIZATION
1. Download Skeleton files: http://getskeleton.com/
2. Change the name of the downloaded folder “Skeleton-2.0.4” to be just one word and lowercase. Change it to skeleton and drag it into your 360 folder.
3. In this folder, change the name of the newly downloaded index.html to skeleton.html, so you don’t get it confused with your original index.html.
4. In the newly downloaded css folder, create an additional css document called custom.css.
5. In the <head> of the skeleton.html file, add a link for this new css external document alongside the other css links. Should look like this:
<link rel="stylesheet" href="css/custom.css">
6. Now finally go into your original sandbox index.html file in the 360 folder and link to the new skeleton.html file in your nav bar. The link should look like this:
<a href="skeleton/skeleton.html">Skeleton</a>
START ADDING CONTENT TO THE NEW SKELETON HTML
7. You can use similar content such as your name, class, links, images, paragraphs, and so on. It is open as long as you fill up a page and demonstrate a flexible layout of content.
8. Sketch a wireframe for your desired layout. Label the “content boxes” in your sketch so you know how to structure your html.
For example – include things like containers, rows, columns, and one, two, three… (to indicate how many columns wide you want them to be on the page or how far over from the left you want them to be. remember one row needs to add up to twelve columns)
9. Structure your skeleton.html page using containers, rows, and columns – referencing the provided CSS selectors in the linked skeleton.css file.
10. Mess with the skeleton.css sheet as LITTLE as possible. You can change the font-size for body and headings, the body’s font-family, the link colors, list styles, and the horizontal rule only if you want. LEAVE the columns, widths and container ALONE however.
11. Do most of the customizing of your page through your own additional stylesheet, custom.css. Try not to override the columns and widths from the other css file however. This customized sheet is more for styling of look-and-feel, not structural changes. You can also copy and paste the media queries from the skeleton.css file into this file and do your mobile-up customizing inside the media queries. Focus on phablet and desktop for now.
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}