What you need:
– Basic knowledge in HTML and CSS.
– A Mac and Xcode (no programming skills required) for exporting the app.

Predefined CSS Styles

Here are some preconfigured styles for getting you started. There are plenty styles concerning typography and color. If you want to modify specific styles like headline sizes etc., just dig into the corresponding stylesheet and do so.

  • Large screen = width larger than 768px (desktop, iPad landscape).
  • Medium sized screens = width larger than 420px but smaller than 768px (small desktops and iPad portrait).
  • Small screens = width smaller than 420px (iPhone in landscape and portrait orientation).

Structure

“large-column” (can be combined with “float-right” oder “float-left”)

Main text. It’s width is eight columns on large screens, six columns on medium sized screens and one column on small screens.

“medium-column” (can be combined with “float-right” oder “float-left”)

A column which is half the size of the “content-element” on large and medium screens. On small screens it is as wide as the “content-element”. Images placed in a “medium-column” are always resized to the width of that column.

“small-column” (can be combined with “float-right” oder “float-left”)

Two columns form a “small-column”. Images placed in a “small-column” are always resized to the width of that column.

“full-column”

A column which is always as wide as the “content-element”.

“float-left”, “float-right” (only used in combination with one of the three column-styles)

Always used in combination with “dossier-text”, “small-column” or “medium-column” (seperated by a space, e.g. <Div class=”dossier-text float-right”). Defines whether text is floated left or right.

Media

“media-left” (can only be within “large-column float-right”)

“media-left” places it’s content slightly to the left or right of “large-columns” text. On large screens it’s width is four columns while on medium sized screens it’s three columns. On small screens it’s width is that of the “content-element”.

“media-right” (can only be within “large-column float-left”)

The same as “media-left”, but for a left floated “large-column”.

caption

Defines the styling of a caption.

Laker is now on github! Please discuss issues, suggestions or tipps in the github forums of Laker. Thanks! ;)

5 Responses to “Predefined CSS Styles”

  1. Hi,
    Do you know how to fix orientation in portrait mode for the iPad?
    Tks!

  2. You mean “limit” it to only portrait? You can do that within xcode (I don’t know exactly how to do that, so ask it in the forums or google it) or by deleting the CSS-Classes, which control the landscape-view.

  3. Hi Florian,
    Fantastic work. However, I’m having issues with the block display of contents (toc) when running on the iPad – adding a page (making 5 including the cover, rather than the original 4) pushes the extra entry below the others, meaning the div becomes scrollable along its y axis too. I’ve scanned the styles & can’t see a reason for this behaviour. Any ideas?
    Thanks

  4. Yeah, check Line 297 and following in nav.css:

    body.body-toc-ios {
    width: 1640px;/* The width must be number of table of content entries * width of entry (410px)*/
    margin: 0px; padding: 0px;
    background-color: #000;
    }

    You have to insert the div’s width.

  5. Thanks, can’t believe I missed that! :^p

Leave a comment, suggestion or question.

You must be logged in to post a comment.