SimpleCss.Tricks.Layouts

width/height

(^-) :: Double -> Css a -> Css a

setting width in procents

(^|) :: Double -> Css a -> Css a

setting height in procents

Types

data ColumnWidth a

represents column layout

Constructors

ColumnWidth

Fields

leftPad :: a

left padding width

midWidth :: a

content width

rightPad :: a

right padding width

Instances

Show a => Show (ColumnWidth a)

totalWidth :: Num a => ColumnWidth a -> a

leftPad + midWidth + rightPad

colw :: Num a => a -> a -> a -> ColumnWidth a

short-cut for ColumnWidth constructor

toColumnWidth :: [(a, a, a)] -> [ColumnWidth a]

construct list of columnWidth values from list of triplets

Margin layouts

This layouts are based on setting margins and floating menus

leftContent :: Num t => (t -> Expr) -> t -> Css a -> Css a -> Css a

left menu + content

arguments are :

• length constructor
• left menu column width
• left menu
• content

rightContent :: Num t => (t -> Expr) -> t -> Css a -> Css a -> Css a

content + right menu

arguments are :

• length constructor
• right menu column width
• right menu
• content

leftRightContent :: Num t => (t -> Expr) -> t -> t -> Css a -> Css a -> Css a -> Css a

left menu + content + right menu

arguments are :

• length constructor
• left menu column width
• right menu column width
• left menu
• right menu
• content

Liquid layouts

Tricky floating and nesting.

Requires color and background-color to be set for all columns

columns :: Num t => (t -> Expr) -> [((ColumnWidth t, Css a -> Css a), Css a)] -> Css a

liquid layouts

Places n-columns, implementation of Matthew James Taylor's liquid layout technique.

See http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

every columns is wrapped in two divs (inner an outer) and floated, styling is applied to both divs, it makes possible to construct columns of equal height, they look like.

All inherited properties should be assigned for each column.

For example if you want to make two columns one is black background and white text and another mirrors colors, you should define colors for BOTH columns. Otherwise one column will spread all over the screen

elems = [p text1, p text2]

decl1 = dot [C.color <:> white, C.backgroundColor <:> black]
decl2 = dot [C.color <:> black, C.backgroundColor <:> white]
ds = [decl1, decl2]
 
ws = toColumnWidth [(10, 40, 10), (10, 40, 10)]

res = columns pct (zip (zip ws ds) elems)