CSS and HTML walkthrough

scottkellum edited this page Oct 10, 2011 · 5 revisions

Before we get started

The CSS branch is perfectly fine to use and is set up to be similar to the other styling branches. A lot of calculation goes into creating the underlying grid so if you wish to change these values it is recommended that you try Sass or Compass.

Getting Started

First, download and unzip the boilerplate. Delete the html/_/css folder and replace it with the css folder. Treesaver requires a web server so move the html folder to either localhost or a remote server.

Now that everything is in place, open up your web browser to view your first Treesaver publication.

Content first

Treesaver strips everything from the <article> tag and places it into grids, so the article pages are all about the content. Everything written into the <article> will run through columns aside from elements placed in <figure> tags.

Fill in all the text, subheads, and content you want run into columns first.

<article>
  <h2>subhed goes here</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</article>

Now that the content is in place, we can add figures, or content that will have a special place on the gird. These usually are titles, images, and videos but can be any piece of HTML you want to give special treatment to. Lets start with the article title.

<article>
  <figure>
    <hgroup data-sizes="title fallback">
      <h1>hed</h1>
      <h2>dek</h2>
    </hgroup>
  </figure>
  <h2>subhed goes here</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</article>

This title figure has one container with “data-sizes” defined with the flags “title” and “fallback”. This means that you can either call it into a grid with “title” and if it is not called it will fallback into the regular text columns.

You can have multiple data-sizes applied to any HTML tag. This is particularly useful when loading images and allows you to choose what size image loads where. For example you may choose to load a small, medium, and large image in witch case a figure might look like this:

<figure>
  <img src="images/small.jpg" data-sizes="small fallback" width="243" height="172" />
  <img src="images/medium.jpg" data-sizes="medium" width="507" height="388" />
  <img src="images/large.jpg" data-sizes="large" width="771" height="604" />
</figure>

Nice! you now have a title and image figure available to manipulate. You may notice some differences in the sample content and this content though. First you may notice the class="zoomable" flag. This allows the figure to lightbox to a larger size if one is available.

<figure class="zoomable">
</figure>

The images are contained in <div> tags. This helps group captions with the corresponding image. data-minWidth and data-minHeight are also attributes of these data-sizes. These help Treesaver measure the figure content and place it easier.

<div data-sizes="single" data-minWidth="243" data-minHeight="202" ratio="4x3">
  <img data-src="img/img.jpg" width="243" height="182" />
  <p class="caption">Caption <span class="credit">Credit</span></p>
</div>

These figures also use data-src instead of src on images. This is so that the other images don’t load in the background. The double data-size doesn’t use this because it also has the class no-treesaver so in case a user doesn’t have JavaScript turned on, they can still view the image.

Ratios can also be added to figures that will help re-scale images with the ratio flag ratio="4x3". This helps keep the number of data-sizes down while allowing you to scale the image to any width on the grid. Ratios included in the CSS version are 16x9, 4x3, 5x4, 1x1, 4x5, and 3x4.

Arranging the content

The content for Treesaver publications is arranged and taged in a simple JSON file html/_/toc.json. The url field is the only required field but title is recommended as it is used for your page title.

{
  "url": "index.html",
  "title": "title"
}

Any information can be added to this file to pull into templates later. JSON can be very sensitive over punctuation so mind your commas.

Editing grids

Seasons provides a grid to work with. By default Seasons has a maximum of a 12 column grid with text columns taking up 3 grid columns (this can be changed in the CSS). To measure widths use w# so w3 would span 3 grid columns, w5 would span 5 and so on. c# indicates the grid column an item starts on. c1 would be the first column, c7 would be the 7th and so on. Stringing these together helps to quickly place items. An item with the classes c4 w3 starts at the 4th grid column and spans 3 columns.

Seasons grid

Grids exist in sets for various screen sizes and pages. Each set is for a particular section like a department, cover, feature and so on. Grids are contained in the html/_/resources.html file.

To begin, lets build a department grid. To create a grid just create a <div> with the class “grid” and the name of it’s set, in this case “department”

<div class="grid department">
</div>

Now that we have that set up, we need to define the width of this particular grid and add columns. Columns are filled in markup order so place them from left to right.

<div class="grid department w9">
  <div class="column c1"></div>
  <div class="column c4"></div>
  <div class="column c7"></div>
</div>

The grid has a width of 9 grid columns because each text column has a width of 3 grid columns.

Figures get placed into containers on grids. Containers displace the content so placing a title above the columns will push the columns down.

<div class="grid department w9">
  <div class="container c1 w9" data-sizes="title"></div>
  <div class="column c1"></div>
  <div class="column c4"></div>
  <div class="column c7"></div>
</div>

Images can be pulled in the same way, but if you wanted an image to only displace the two columns on the right those columns can be nested.

<div class="grid department w9">
  <div class="container c1 w9" data-sizes="title"></div>
  <div class="column c1"></div>
  <div>
    <div class="container c4 w6" data-sizes="double"></div>
    <div class="column c4"></div>
    <div class="column c7"></div>
  </div>
</div>

Now we are pulling in the "double" image size above columns 2 and 3, but it is covering our title! A regular nested set will ignore its context but of you add the class "group" to it the entire group will be moved in relation to elements above it.

<div class="grid department w9">
  <div class="container c1 w9" data-sizes="title"></div>
  <div class="column c1"></div>
  <div class="group">
    <div class="container c4 w6" data-sizes="double"></div>
    <div class="column c4"></div>
    <div class="column c7"></div>
  </div>
</div>

Great! Now you can place figures at the bottom instead of the top of an area by adding the class bottom. As you start to add other grids to the set you can add classes odd, even, page-1, page-4, no-page-1, onlypage, and so on to have control over where the grid shows up. Adding the class fixed allows you to fix the height as well as the width of a grid and sizetocontainer will snap the grid to the container inside.

Get comfortable with basic placement first, then build up to using some of those other attributes. Grids can become overwhelming quickly.

data in grids

Data from the toc.json file can be pulled into your grids. First the area you are pulling this information into needs to be wrapped in a div with data-ts-template="document". I recommend just wrapping everything in this.

<div class="grid department w9"><div data-ts-template="document">
</div></div>

Now you can place a running hed or foot onto the page using double curly braces around the attribute you wish to pull in.

<div class="grid department w9"><div data-ts-template="document">
  <div class="runningtitle">{{title}}</div>
</div></div>

To recap, a grid set might look like this with all the content and running titles in place:

<div class="grid department w3"><div data-ts-template="document">
  <div class="runningtitle">{{title}}</div>
  <div class="container c1 w3" data-sizes="title"></div>
  <div class="container c1 w3" data-sizes="single"></div>
  <div class="column c1"></div>
</div></div>

<div class="grid department w6"><div data-ts-template="document">
  <div class="runningtitle">{{title}}</div>
  <div class="container c1 w6" data-sizes="title"></div>
  <div class="container c1 w6" data-sizes="double"></div>
  <div class="column c1"></div>
  <div class="column c4"></div>
</div></div>

<div class="grid department w9"><div data-ts-template="document">
  <div class="runningtitle">{{title}}</div>
  <div class="container c1 w9" data-sizes="title"></div>
  <div class="column c1"></div>
  <div class="group">
    <div class="container c4 w6" data-sizes="double"></div>
    <div class="column c4"></div>
    <div class="column c7"></div>
  </div>
</div></div>

Creating the chrome

The chrome is the UI of your Treesaver publication. This has far fiewer rules in terms of layout and again, is contained in the html/_/resources.html file.

Chrome is contained in a div with the class of chrome. You can have different chrome and use min-width and max-width to select them based on screen size.

<div class="chrome">
</div>

Inside this chrome you can position any navigation elements. They are all laid out to copy/paste in the resources.html file bundled with Seasons.

Styling

Finally, back to CSS. There are a number of stylesheets in the CSS folder that to different things. The only ones you need to concern yourself with are grid.css and chrome.css These separate the very different tasks of styling the grids and chrome. Some basic styles are in place to get you started. In general keeping everything in the columns a multiple of the paragraph line-height and not using @font-face for paragraphs will cut down on bugs. Beyond that the styles are fair game to build on.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.