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

Inside the CSS

What’s a CSS file? CSS Style sheets include all visual appearances of objects, texts and media. For example a modification of a headline’s font size in the style sheet will reflect a change of the headline throughout the whole publication.

A brief overview of the main style sheets

#blank-dossier.css
Use this CSS template as a start for your dossier-specific stylesheet.

styles.css
The main stylesheet. Page widths are defined here. All other CSS files containing styling of typography etc. are also being imported.

structure.css
structure.css stores all styles concerning the structure, such as column widths, “content-element” margins etc.

typography.css
Text and headline styles are part of this file (font face, font size, line-height etc.).

fonts.css
All custom fonts, included via @font-face (for more information, see “custom fonts”).

nav.css
Contains all styles concerning the “table of content” (on iOS devices activated with a doubletap) and the navigation bar on desktop browsers.

display-grid.css (deactivated by default)
Display the underlying grid of “content-element” by enabling “display-grid.css”. Just uncomment (delete the “/*” and “*/”) the following lines in the beginning of the main style sheet “styles.css”.

/*Turn on the visual grid view by deleting the "/*"...
@import url('display-grid.css');
... and this » */

media.css
Media related appearances, like image widths and f.e. styling of captions are stored here.

Module-related CSS files

slideshow.css
Manages the appearance of the module „slideshow“. Note: The styling of the captions are saved in “media.css”, because they are used also in other modules.

soundbox.css
The styles of the module “audio”.

card-flip.css
The styles for the module “card-flip”.

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

2 Responses to “Inside the CSS”

  1. Hello :)
    Is there any solutions to render correctly on IE9 (desktop)?
    If I use conditional stylesheets it will solve anything or what kind of solution do I have to do to make it work?

    Best regards (excelent framework by the way :) )

    João Vinagre

  2. Hey there!
    Could you post in the github-Forums about the problems?
    What exactly doesn’t render correctly.

    Cheers
    florian

Leave a comment, suggestion or question.

You must be logged in to post a comment.