PureCSS Utilities examples
Text
Text size
pure-txt-xxs
pure-txt-xs
pure-txt-sm
pure-txt-md
pure-txt-lg
pure-txt-xl
pure-txt-xxl
Text colors
pure-txt-black
pure-txt-blue
pure-txt-cyan
pure-txt-green
pure-txt-grey
pure-txt-magenta
pure-txt-red
pure-txt-white
pure-txt-yellow
pure-txt-black pure-txt-alpha-10
pure-txt-black pure-txt-alpha-25
pure-txt-black pure-txt-alpha-50
pure-txt-black pure-txt-alpha-75
pure-txt-black pure-txt-alpha-90
Text links
Background colors
pure-bg-black
pure-bg-blue
pure-bg-cyan
pure-bg-green
pure-bg-grey
pure-bg-magenta
pure-bg-red
pure-bg-white
pure-bg-yellow
pure-bg-black pure-bg-alpha-10
pure-bg-black pure-bg-alpha-25
pure-bg-black pure-bg-alpha-50
pure-bg-black pure-bg-alpha-75
pure-bg-black pure-bg-alpha-90
Borders
Border widths
pure-bd-1
pure-bd-2
pure-bd-3
pure-bd-4
pure-bd-5
pure-bd-bottom-1
pure-bd-left-1
pure-bd-right-1
pure-bd-top-1
Border styles
pure-bd-solid
pure-bd-dotted
pure-bd-dashed
Border colors
pure-bd-black
pure-bd-blue
pure-bd-cyan
pure-bd-green
pure-bd-grey
pure-bd-magenta
pure-bd-red
pure-bd-white
pure-bd-yellow
pure-bd-black pure-bd-alpha-10
pure-bd-black pure-bd-alpha-25
pure-bd-black pure-bd-alpha-50
pure-bd-black pure-bd-alpha-75
pure-bd-black pure-bd-alpha-90
Border radius
pure-bd-radius-1
pure-bd-radius-2
pure-bd-radius-3
pure-bd-radius-4
pure-bd-radius-5
pure-bd-radius-pill
pure-bd-radius-circle
Buttons
Opacity
pure-opacity-10
pure-opacity-20
pure-opacity-25
pure-opacity-30
pure-opacity-40
pure-opacity-50
pure-opacity-60
pure-opacity-70
pure-opacity-75
pure-opacity-80
pure-opacity-90
Spacing