35c3 css demo

Simple stylesheet inspired https://content.events.ccc.de/35C3/Styleguide.pdf and https://pbs.twimg.com/media/DsZNqPMWsAE53H9.jpg:large thx to @c3groc

minified css | css | sass source

fonts

Accessibility ⚠: For higher contrast, add text-white class to parent element!

---

typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

text-left

text-center

text-right

text-justify

text-nowrap no wrap demo

text-breakline break line demo

text-lowercase LOWERCASE demo

text-uppercase uppercase demo

text-capitalize capitalize demo

label

blockquote

code

---

Tables

#	table heading 2	table heading 3	table heading 4
1	table body row 1 2	table body row 1 3	table body row 1 4
2	table body row 2 2	table body row 2 3	table body row 2 4
3	table body row 3 2	table body row 3 3	table body row 3 4

---

colors

text-white

text-fresh

text-hope

text-glint

text-beat

text-tenacity

text-base

text-reboot

bg-white

bg-fresh

bg-hope

bg-glint

bg-beat

bg-tenacity

bg-base

bg-reboot

bg-black

---

buttons

btn btn btn-fresh btn btn-hope btn btn-glint btn btn-beat btn btn-tenacity btn btn-base btn btn-reboot btn btn-white btn btn-black

btn btn-fresh btn-block

btn btn-hope btn-xs btn btn-glint btn-sm btn btn-beat btn btn-tenacity btn-xl

x x x x

---

input

text

required

invalid

disabled

date

time

number

textarea

range

⚠

no IE support 🤷 hover not working for webkit

select

option 1 option 2 option 3

checkbox

checkbox default checkbox default checked

checkbox hope checkbox hope checked

checkbox glint checkbox glint checked

checkbox beat checkbox beat checked

checkbox tenacity checkbox tenacity checked

checkbox base checkbox base checked

radio

radio default radio default checked

radio hope radio hope checked

radio glint radio glint checked

radio beat radio beat checked

radio tenacity radio tenacity checked

radio base radio base checked

switch

switch default

switch hope

switch glint

switch beat

switch tenacity

switch base

---

images

img-auto for responsive images (max-width 100%)

---

grid

simple grid layout (default 12, can be configured in sass), border class added separately for visualization, offsets are absolute!
responsive classes col-xs-* (< 768px), col-sm-* (>= 768px), col-md-* (>= 922px), col-lg-* (>= 1200px), col-xl-* (>= 1800px)

Nested example

---

other

container

container class centered page with 97% of screen limits at 768px, 992px, 1200px and 1800

section

adds a margin of 1em to start and end

border

border

border-fresh

border-hope

border-glint

border-beat

border-tenacity

border-base

horizontal line

---

---

---

---

---

---

---

visibility

	< 768px	>= 768px	>= 922px	>= 1200px	>= 1800px
visible	☑	☑	☑	☑	☑
visible-xs	☑	☐	☐	☐	☐
visible-sm	☐	☑	☐	☐	☐
visible-md	☐	☐	☑	☐	☐
visible-lg	☐	☐	☐	☑	☐
visible-xl	☐	☐	☐	☐	☑
hidden	☐	☐	☐	☐	☐
hidden-xs	☐	☑	☑	☑	☑
hidden-sm	☑	☐	☑	☑	☑
hidden-md	☑	☑	☐	☑	☑
hidden-lg	☑	☑	☑	☐	☑
hidden-xl	☑	☑	☑	☑	☐

	css	screen	print
visible, visible-*, visible-block, visible-*-block	display: block;	☑	☑
visible-inline, visible-*-inline	display: inline;	☑	☑
visible-inline-block, visible-*-inline-block	display: inline-block;	☑	☑
hidden-print		☑	☐
visible-print, visible-print-block	display: block;	☐	☑
visible-print-inline	display: inline;	☐	☑
visible-print-inline-block	display: inline-block;	☐	☑

float

float-left

float-right

clear