Layout and Design Style Sheets (LDSS)



Introduction

Layout and Design Style Sheets (LDSS) defines a standard for defining the layout and design of an (X)HTML document, among others. It can be seen as the successor to the CSS (Cascading Style Sheets) standard.

This document contains the draft version of the LDSS version 1.0 standard.



Overview

The layout part of LDSS defines a so-called block model, in which the page is split into blocks, the dimensions of which can be either static or dynamic, adapting to resizing of the page in the latter case. Provisions for presets including centering (vertical, horizontal) of blocks is made. Blocks can be nested whereby the parent block affects the positioning of the child block. The page itself is the main block and is always present.

The design part defines properties such as colour, fonts and font-styling. Text is also treated as a block and can be manipulated using the layout properties, as are other data sources such as images. Embedded fonts are under consideration.

Units

When specifying units of distance, size or similar, the following definitions of measurement can be used:

Syntax

Comments

Comments in LDSS can be indicated using the following methods:

Variables

Variables can use any of the characters [a-z, A-Z, 0-9, _], and are prefixed with a dollar sign ($). Variables are defined using

$variable = “string”;



A simple search & replace is performed on variables in the LDSS file prior to it being applied to the target document.

Definition blocks

One or more tag names, class, or id names, followed by a curly bracket open, block definition content (see property lists) and a closing curly bracket.

Tag.class Tag { definition }

Tag#id Tag { definition }



If the tag part is omitted before the dot preceeding the class name, it is interpreted as meaning all tags with that class name.



Blocks

A block can take many forms but in essence it's a rectangular shape, starting with the page itself as the base block.






Page Block

The page block defines the document the other blocks are placed on. It sets the boundaries and base properties. For an HTML document the page block is defined by the <body> tag.

Body { definition }



Sub-block

Sub-blocks are any blocks placed inside the page block. They can be nested to any depth. For an HTML document a sub-block is defined by the <div> tag, with its class or id property linking it to an LDSS definition.

tag-name.class-name { definition }



Or for an id property name:

tag-name#id-name { definition }



It is also possible to use just the name of an HTML tag, and have it apply to all blocks created using that tag. Blocks can also be addressed within blocks:

Block1 tag-name { definition }

Block1 tag-name.class-name { definition }



Properties

For each block a number of properties apply. This section lists all of them divided into Layout and Styling properties.

Layout

Layout properties concern themselves with the positioning of blocks on the Page Block and relative to each other. These properties include dimensions, position, margins around blocks and padding inside blocks.

Dimensions

Height

Height of the block. Defaults to height of the content.

Width

Width of the block. Defaults to width of the content.

Min-height

Minimum height of the block.

Min-width

Minimum width of the block.

Max-height

Maximum height of the block.

Max-width

Maximum width of the block.



Positioning

Position

Defines both x and y parameters, space-separated.

Position-x

Defines x-position relative to top-left of parent block.

Position-y

Defines y-position relative to top-left of parent block.

Position-z

Defines z-position. Defaults to 1.

Fixed

Defines a fixed position relative to the browser window. Reference, x, y.

Align

Aligns to left/center/right/value/%.

Vertical-align

Aligns to top/center/bottom/value/%. Text adds sub/super/text-top/text-bottom.

Alpha

Sets alpha level for entire block. 0-100%.



Margin

Margin

Sets all margins. Space-separated list.

Margin-bottom

Bottom margin.

Margin-left

Left margin.

Margin-top

Top margin.

Margin-right

Right margin.



Padding

Padding

Sets all padding. Space-separated list.

Padding-bottom

Bottom padding.

Padding-left

Left padding.

Padding-top

Top padding.

Padding-right

Right padding.


Style

The style properties include those which affect the appearance of a design, including colours, borders and fonts plus text styles.

Background

Background

Sets all background properties.

Background-attachment

Sets fixed or scrolling background image.

Background-color

Sets a background color.

Background-image

Sets a background image.

Background-position

Sets starting position of background image.

Background-repeat

Sets how a background image is repeated.

Background-alpha

Sets alpha level (transparancy) of background.



Border, Corner and Outline

Border

Sets all border properties.

Border-alpha

Sets alpha levels for the four borders.

Border-bottom

Sets bottom border properties.

Border-bottom-color

Sets bottom border color.

Border-bottom-style

Sets bottom border style

Border-bottom-width

Sets width of bottom border.

Border-bottom-alpha

Sets alpha level of bottom border.

Border-color

Sets the color of the four borders.

Border-image

Sets image for all the four borders.

Border-left

Sets left border properties.

Border-left-color

Sets left border color.

Border-left-style

Sets left border style.

Border-left-width

Sets left border width.

Border-left-alpha

Sets alpha level of left border.

Border-right

Sets right border properties.

Border-right-color

Sets right border color.

Border-right-style

Sets right border style.

Border-right-width

Sets right border width.

Border-right-alpha

Sets alpha level of right border.

Border-top

Sets top border properties.

Border-top-color

Sets top border color.

Border-top-style

Sets top border style.

Border-top-width

Sets top border width.

Border-top-alpha

Sets alpha level of top border.

Border-style

Sets the style of the four borders.

Border-width

Sets the width of the four borders.

Outline

Sets all outline properties.

Outline-color

Color of outline.

Outline-style

Style of outline.

Outline-width

Width of outline.

Corner

Sets corner properties of the four corners.

Corner-alpha

Sets alpha levels of the four corners.

Corner-image

Sets images for the four corners.

Corner-top-left

Sets bottom corner properties.

Corner-top-left-curve

Curve of bottom corner.

Corner-top-left-color

Color of bottom corner.

Corner-color

Sets color of the four corners.

Corner-right-left

Sets left corner properties.

Corner-right-left-curve

Curve of left corner.

Corner-right-left-color

Color of left corner.

Corner-bottom-left

Sets right corner properties.

Corner-bottom-left-curve

Curve of right corner.

Corner-bottom-left-color

Color of right corner.

Corner-bottom-right

Sets top corner properties.

Corner-bottom-right-curve

Curve of top corner.

Corner-bottom-right-color

Color of top corner.



Fonts

Font

Sets all font properties. Space-separated list.

Font-family

Sets the font family.

Font-size

Sets the font size.

Font-style

Sets the font style. Normal, italic.

Font-weight

Sets the weight of a font. Bold.



Generated Content

Content

Inserted using the :before :after pseudo-elements.

Counter-increment

Increments one or more counters.

Counter-reset

Creates or resets one or more counters.

Quotes

Sets the type of quotation marks for embedded quotations.



List

List-style

Sets all properties for a list.

List-style-image

Specifies an image for the list-item marker.

List-style-position

Whether list-item markers appear in- or outside content flow.

List-style-type

Sets type of list-item marker.

List-flow

Sets flow of list items. Vertical or horizontal.



Text

Color

Color of the text.

Direction

Text direction. Ltr/rtl/down-rtl.

Letter-spacing

Spacing between letters.

Line-height

Sets the line height.

Text-decoration

Specifies decoration added to text.

Text-indent

Indentation of first line in a text block.

Text-shadow

Sets the shadow added to text.

Text-transform

Controls the text capitalization.

White-space

How whitespace is treated.

Word-spacing

The spacing between words.



Pseudo-classes/elements

:active

Add style to active element.

:after

Adds content after an element.

:before

Adds content before an element.

:first-child

Adds style to element which is the first child of another element.

:first-letter

Adds style to the first character of text.

:first-line

Adds style to the first line of text.

:focus

Adds style to an element with keyboard focus.

:hover

Adds style to an element with mouse focus.

:lang

Adds style to an element with specific lang attribute.

:link

Adds style to an unvisited link.

:visited

Adds style to a visited link.





Pre-processor

Before an LDSS stylesheet is applied to a document it is first parsed by a pre-processor. Its task is to look for variable definitions and do a search and replace on those variables, replacing their appearances in the LDSS file with the string content of the variable.

Draft Version LDSS Specification Page 8 of 8

Author: Maya Posch

www.mayaposch.com Revision: 2010/07/07