Ideas.Text.HTML.W3CSS

A minimal interface for using W3.CSS, a modern CSS framework with built-in responsiveness. See https://www.w3schools.com/w3css/

Documentation

w3css :: HTMLPage -> HTMLPage

w3class :: BuildXML a => String -> a -> a

w3classIf :: BuildXML a => Bool -> String -> a -> a

data Color

Constructors

Red

Pink

Purple

DeepPurple

Indigo

Blue

LightBlue

Cyan

Aqua

Teal

Green

LightGreen

Lime

Sand

Khaki

Yellow

Amber

Orange

DeepOrange

BlueGray

Brown

LightGray

Gray

DarkGray

Black

PaleRed

PaleYellow

PaleGreen

PaleBlue

White

Instances

Show Color

Methods

showsPrec :: Int -> Color -> ShowS

show :: Color -> String

showList :: [Color] -> ShowS

data Size

Constructors

Tiny

Small

Medium

Large

XL

XXL

XXXL

Jumbo

Instances

Eq Size

Methods

(==) :: Size -> Size -> Bool

(/=) :: Size -> Size -> Bool

Ord Size

Methods

compare :: Size -> Size -> Ordering

(<) :: Size -> Size -> Bool

(<=) :: Size -> Size -> Bool

(>) :: Size -> Size -> Bool

(>=) :: Size -> Size -> Bool

max :: Size -> Size -> Size

min :: Size -> Size -> Size

Show Size

Methods

showsPrec :: Int -> Size -> ShowS

show :: Size -> String

showList :: [Size] -> ShowS

data Position

Constructors

TopLeft

Top

TopRight

CenterLeft

Center

CenterRight

BottomLeft

Bottom

BottomRight

Instances

Eq Position

Methods

(==) :: Position -> Position -> Bool

(/=) :: Position -> Position -> Bool

Show Position

Methods

showsPrec :: Int -> Position -> ShowS

show :: Position -> String

showList :: [Position] -> ShowS

onTop :: Position -> Bool

onLeft :: Position -> Bool

onRight :: Position -> Bool

onBottom :: Position -> Bool

uncamel :: String -> String

Container Classes

container :: BuildXML a => a -> a

HTML container with 16px left and right padding

panel :: BuildXML a => a -> a

HTML container with 16px left and right padding and 16px top and bottom margin

badge :: BuildXML a => a -> a

Circular badge

tag :: BuildXML a => a -> a

Rectangular tag

ul :: BuildXML a => [a] -> a

Unordered list

ulWith :: BuildXML a => (a -> a) -> [a] -> a

Unordered list

code :: BuildXML a => a -> a

Code container

codespan :: BuildXML a => a -> a

Inline code container (for code snippets)

Table Classes

table :: BuildXML a => a -> a

Container for an HTML table

tableAll :: BuildXML a => a -> a

All properties set

striped :: BuildXML a => a -> a

Striped table

bordered :: BuildXML a => a -> a

Bordered lines

centered :: BuildXML a => a -> a

Centered table

hoverable :: BuildXML a => a -> a

Hoverable table

responsive :: BuildXML a => a -> a

Creates a responsive table

Card Classes

card :: BuildXML a => a -> a

Same as w3-card-2

card2 :: BuildXML a => a -> a

Container for any HTML content (2px bordered shadow)

card4 :: BuildXML a => a -> a

Container for any HTML content (4px bordered shadow)

Responsive Classes

row :: BuildXML a => a -> a

Container for one row of fluid responsive content

rowPadding :: BuildXML a => a -> a

Row where all columns have a default padding

content :: BuildXML a => a -> a

Container for fixed size centered content

half :: BuildXML a => a -> a

Half (1/2) screen column container

third :: BuildXML a => a -> a

Third (1/3) screen column container

twothird :: BuildXML a => a -> a

Two third (2/3) screen column container

quarter :: BuildXML a => a -> a

Quarter (1/4) screen column container

threequarter :: BuildXML a => a -> a

Three quarters (3/4) screen column container

col :: BuildXML a => a -> a

Column container for any HTML content

rest :: BuildXML a => a -> a

Occupies the rest of the column width

hideSmall :: BuildXML a => a -> a

Hide content on small screens (less than 601px)

hideMedium :: BuildXML a => a -> a

Hide content on medium screens

hideLarge :: BuildXML a => a -> a

Hide content on large screens (larger than 992px)

image :: BuildXML a => a -> a

Responsive image

mobile :: BuildXML a => a -> a

Adds mobile-first responsiveness to any element. Displays elements as block elements on mobile devices.

Layout Classes

cellRow :: BuildXML a => a -> a

Container for layout columns (cells).

cell :: BuildXML a => a -> a

Layout column (cell).

cellTop :: BuildXML a => a -> a

Aligns content at the top of a column (cell).

cellMiddle :: BuildXML a => a -> a

Aligns content at the vertical middle of a column (cell).

cellBottom :: BuildXML a => a -> a

Aligns content at the bottom of a column (cell).

Bar Classes - Navigation

bar :: BuildXML a => a -> a

Horizontal bar

barBlock :: BuildXML a => a -> a

Vertical bar

barItem :: BuildXML a => a -> a

Provides common style for bar items

sidebar :: BuildXML a => a -> a

Side bar

collapse :: BuildXML a => a -> a

Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class

mainPage :: BuildXML a => a -> a

Container for page content when using the w3-collapse class for responsive side navigations

Dropdown Classes

dropdownClick :: BuildXML a => a -> a

Clickable dropdown element

dropdownHover :: BuildXML a => a -> a

Hoverable dropdown element

Button Classes

button :: BuildXML a => String -> a -> a

Rectangular button with grey background color on hover

btn :: BuildXML a => String -> a -> a

Rectangular button with shadows on hover

ripple :: BuildXML a => String -> a -> a

Rectangular button with ripple effect

Input Classes

input :: BuildXML a => a -> a

Input elements

check :: BuildXML a => a -> a

Checkbox input type

radio :: BuildXML a => a -> a

Radio input type

select :: BuildXML a => a -> a

Input select element

Modal Classes

modal :: BuildXML a => a -> a

Modal container

modalContent :: BuildXML a => a -> a

Modal pop-up element

tooltip :: BuildXML a => a -> a

Tooltip element

tooltipText :: BuildXML a => a -> a

Tooltip text

Animation Classes

animate :: BuildXML a => Position -> a -> a

Animates an element from -300px to 0px

animateOpacity :: BuildXML a => a -> a

Animates an element's opacity from 0 to 1

animateZoom :: BuildXML a => a -> a

Animates an element from 0 to 100% in size

animateFading :: BuildXML a => a -> a

Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out)

spin :: BuildXML a => a -> a

Spin an icon 360 degrees

animateInput :: BuildXML a => a -> a

Animates the width of an input field to 100%

Font and Text Classes

fontSize :: BuildXML a => Size -> a -> a

Specifies a font size: tiny 10px, small 12px, large 18px, xlarge 24px, xxlarge 32px, xxxlarge 48px, jumbo 64px

wide :: BuildXML a => a -> a

Specifies a wider text

serif :: BuildXML a => a -> a

Changes the font to serif

Display Classes

center :: BuildXML a => a -> a

Centered content

left :: BuildXML a => a -> a

Floats an element to the left (float: left)

right :: BuildXML a => a -> a

Floats an element to the right (float: right)

leftAlign :: BuildXML a => a -> a

Left aligned text

rightAlign :: BuildXML a => a -> a

Right aligned text

justify :: BuildXML a => a -> a

Right and left aligned text

circle :: BuildXML a => a -> a

Circled content

hide :: BuildXML a => a -> a

Hidden content (display:none)

showBlock :: BuildXML a => a -> a

Alias of w3-show (display:block)

showInlineBlock :: BuildXML a => a -> a

Show content as inline-block (display:inline-block)

top :: BuildXML a => a -> a

Fixed content at the top of a page

bottom :: BuildXML a => a -> a

Fixed content at the bottom of a page

display :: BuildXML a => Position -> a -> a

Container for w3-display-classes (position: relative)

displayHover :: BuildXML a => a -> a

Displays content on hover inside the w3-display-container

Effect Classes

opacity :: BuildXML a => a -> a

Adds opacity/transparency to an element (opacity: 0.6)

opacityOff :: BuildXML a => a -> a

Turns off opacity/transparency (opacity: 1)

opacityMin :: BuildXML a => a -> a

Adds opacity/transparency to an element (opacity: 0.75)

opacityMax :: BuildXML a => a -> a

Adds opacity/transparency to an element (opacity: 0.25)

grayscaleMin :: BuildXML a => a -> a

Adds a grayscale effect to an element (grayscale: 50%)

grayscale :: BuildXML a => a -> a

Adds a grayscale effect to an element (grayscale: 75%)

grayscaleMax :: BuildXML a => a -> a

Adds a grayscale effect to an element (grayscale: 100%)

sepiaMin :: BuildXML a => a -> a

Adds a sepia effect to an element (sepia: 50%)

sepia :: BuildXML a => a -> a

Adds a sepia effect to an element (sepia: 75%)

sepiaMax :: BuildXML a => a -> a

Adds a sepia effect to an element (sepia: 100%)

overlay :: BuildXML a => a -> a

Creates an overlay effect

Background Color Classes

background :: BuildXML a => Color -> a -> a

Background color

transparent :: BuildXML a => a -> a

Transparent background-color

hover :: BuildXML a => Color -> a -> a

Hover color

Text Color Classes

textColor :: BuildXML a => Color -> a -> a

Text color

Hover Classes

hoverColor :: BuildXML a => Color -> a -> a

Hover text color

hoverOpacity :: BuildXML a => a -> a

Adds transparency to an element on hover (opacity: 0.6)

hoverOpacityOff :: BuildXML a => a -> a

Removes transparency from an element on hover (100% opacity)

hoverShadow :: BuildXML a => a -> a

Adds shadow to an element on hover

hoverGrayscale :: BuildXML a => a -> a

Adds a black and white (100% grayscale) effect to an element

hoverSepia :: BuildXML a => a -> a

Adds a sepia effect to an element on hover

hoverNone :: BuildXML a => a -> a

Removes hover effects from an element

Round Classes

rounded :: BuildXML a => Size -> a -> a

Element rounded (border-radius): small 2px, medium 4px, large 8px, xlarge 16px, xxlarge 32px

Padding Classes

padding :: BuildXML a => Size -> a -> a

Small: Padding 4px top and bottom, and 8px left and right, Medium: Padding 8px top and bottom, and 16px left and right, Large: Padding 12px top and bottom, and 24px left and right.

vpadding :: BuildXML a => Size -> a -> a

Padding top and bottom: medium 16px, large 24px, xlarge 32px, xxlarge 48px, xxxlarge 64px

Margin Classes

margin :: BuildXML a => a -> a

Adds an 16px margin to an element

marginPos :: BuildXML a => Position -> a -> a

section :: BuildXML a => a -> a

Adds an 16px top and bottom margin to an element

Border Classes

border :: BuildXML a => a -> a

Borders (top, right, bottom, left)

borderPos :: BuildXML a => Position -> a -> a

noBorder :: BuildXML a => a -> a

Removes all borders

borderColor :: BuildXML a => Color -> a -> a

Border color

barPos :: BuildXML a => Position -> a -> a

Adds a thick border (bar) to an element

Color themes

data ColorTheme

Constructors

L1

L2

L3

L4

L5

D1

D2

D3

D4

D5

Instances

Show ColorTheme

Methods

showsPrec :: Int -> ColorTheme -> ShowS

show :: ColorTheme -> String

showList :: [ColorTheme] -> ShowS

theme_ :: BuildXML a => a -> a

textTheme :: BuildXML a => a -> a

borderTheme :: BuildXML a => a -> a

theme :: BuildXML a => ColorTheme -> a -> a