Safe Haskell | None |
---|
- (^-) :: Double -> Css a -> Css a
- (^|) :: Double -> Css a -> Css a
- data ColumnWidth a = ColumnWidth {}
- totalWidth :: Num a => ColumnWidth a -> a
- colw :: Num a => a -> a -> a -> ColumnWidth a
- toColumnWidth :: [(a, a, a)] -> [ColumnWidth a]
- leftContent :: Num t => (t -> Expr) -> t -> Css a -> Css a -> Css a
- rightContent :: Num t => (t -> Expr) -> t -> Css a -> Css a -> Css a
- leftRightContent :: Num t => (t -> Expr) -> t -> t -> Css a -> Css a -> Css a -> Css a
- columns :: Num t => (t -> Expr) -> [((ColumnWidth t, Css a -> Css a), Css a)] -> Css a
width/height
Types
totalWidth :: Num a => ColumnWidth a -> aSource
leftPad + midWidth + rightPad
colw :: Num a => a -> a -> a -> ColumnWidth aSource
short-cut for ColumnWidth
constructor
toColumnWidth :: [(a, a, a)] -> [ColumnWidth a]Source
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 aSource
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 aSource
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 aSource
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 aSource
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)