Skip to content

Layouts and Components

Jump to bottom
flipflop edited this page Jun 15, 2011 · 29 revisions

#How it works

Baseplate uses a simple display model than can be easily ported into server side or client side templating frameworks.

Less is used exclusively as a development tool for abstracting out the details of baseline height and column width calculations for CSS layouts. Baseplate also has a concept of HTML Layouts and Components, because source order, unfortunately, can still dictate how the display can be rendered.

⟁ If you've not heard of or used Less before, please read an An Introduction to Less.

The Display Model

The Layout and Component approach uses a combination of markup and CSS (compiled from Less). The Template display model model is separated into:

###Layouts

  • dev/less/templates/layouts (Less)
  • templates/layouts (HTML : dictates the order and which components to use)

###Components

  • dev/less/templates/components (Less)
  • templates/components (HTML : standardised markup pattern - promoting code re-use)

#Getting Started

##1. Select a baseline

All Layouts and Components adhere to a baseline grid, linked to a fixed set of column and gutter widths. For example, in order to create a Layout for a 18px baseline with 10 columns on a 960 pixel wide page edit dev/less/chassis.grid.constants.less to add your grid values.

✔ Always be sure to import the correct Less file for your Layout. 

✖ You can not share the same layouts across different baseline grids.

##2. Identify Layouts

Layout are grouping containers for Components. Layouts can also be used to house sub layout containers in order to format the display of Components.

##3. Create Layouts

The co-ordinate system for a layout is abstracted from true pixel values and directly linked to the baseline grid for use in Less CSS.


For example a Web Site that adheres to a baseline grid of 18 pixels on a 10 column grid will have locations and dimensions based on multiples of these values.  This approach reduces errors (no need handle the math for baseline calculations) and allows developers to create layouts according to the baseline grid values improving productivity.

Layouts are applied to:

<div id="wrapper" class="layout-<name>"> <!-- content-subnav, content and content-related in here--> </div>

and typically style the following containers:

<div id=”content-subnav” class=”aside”> <!-- side navigation --> </div>

<div id=”content” role=”main”> <!-- main content --> </div>

<div id=”content-related” class=”aside” role=”complimentary”> <!-- additional related content --> </div> 

✔ Layouts and Sub Templates are nicely illustrated in Unicode box drawing entities above each code block. 

✖ Sorry, you will not be able to view them on a PC.

✔ Alternatively you can illustate layouts using http://www.asciiflow.com/

For absolutely positioned layouts, set your Layout position using co-ordinates based in columns (x) baselines (y).

  • Set an Layout height using baselines (if required).
  • Set an Layout width in columns (if required).

##4. Identify Components

Components are re-usable patterns of markup, CSS and JavaScript. The full list is available on the Chassis Landing page or in templates/components/

##5. Create Sub Layouts (if required)

Sub Layouts are positioned relative to the Layouts that contain them and can be formatted for display using baseline and column co-ordinates, just like everything else in Less.

✔ Set a Sub Layout position using co-ordinates based in columns (x) baselines (y) relative to an Layout.

  • Set a Sub Layout height using baselines.
  • Set a Sub Layout width in columns. 

✖ You do not need to set position for floated elements only width and heights.

6. Grid API

###POSITIONING

.top(<Number>)

.right(<Number>)

.bottom(<Number>)

.left(<Number>)

.gutterLeft(<Number>)

.gutterRight(<Number>)

.firstGutterLeft()

.lastGutterRight()

###DIMENSIONS

.contentWidth()

.contentWidthWithoutSideGutters()

.width(<Number>)

.height(<Number>)

###MARGINS AND PADDING

.marginTop(<Number>)

.marginRight(<Number>)

.marginBottom(<Number>)

.marginLeft(<Number>)

.marginLeftGutter(<Number>)

.marginRightGutter(<Number>)

.firstGutterLeftMargin()

.lastGutterRightMargin()

.paddingLeftGutter(<Number>)

.paddingRightGutter(<Number>)

.paddingTop(<Number>)

.paddingRight(<Number>)

.paddingBottom(<Number>)

.paddingLeft(<Number>)

.firstGutterLeftPadding()

.lastGutterRightPadding()

7. Testing

A number of CSS debug and linting styles are available for Layouts and Components. To trigger debugging styles and linting apply the debug classes to the body tag of your page during development.

.debug

(highlights deprecated HTML5 elements and non Web Standards approaches e.g. inline event handlers like “onclick=” or JavaScript Pseudo Protocol URLs like “javascript:” and WAI ARIA roles)

.debug-grid

(show baseline grid background based on Less Constants)

✎ Edit the chassis.grid.constants.less, refresh you page and watch the background grid change!  

.debug-components

(show the component names used by the page)

.debug-layouts

(show layout name and structures used by page)

✔ Add the above styles to the body tag of the page 

#FAQS

Q: I don’t want to use Less and the Baseline Grid API?

A: You don’t have to, you can write CSS as you would normally. The framework does not dictate how you should write your CSS.

Q: Why do we need Layouts?

A: Layouts create an abstraction layer allowing us to control the display the content separately from style information. With this approach we can share common layouts to manage the display of components containing different styles.

Q: I need a size for my component by it’s not in the API?

A: You can use baseline and column variables too e.g.

left: 8* @column + @gutter;

Clone this wiki locally