Page Title

Tawian frontend

Components

Links and Typo

Lead ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet adipisicing elit, sed do eiusmod italic incididunt ut bold et dolore magna aliqua. Ut enim ad highlight minim veniam, deletion quis nostrud exercitation insertation ullamco laboris underlined nisi ut aliquip ex small ea commodo consequat abbr. Duis aute irure dolor in reprehenderit ⌘ + Space in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.1

Truncate Truncate Truncate Truncate Truncate Truncate Truncate Truncate Truncate Truncate Truncate Truncate

List

  • Item
    • Sub Item
    • Sub Item
    • Sub Item
  • Item
  • Item
  1. One
  2. Two
  3. Three
    1. Three One
    2. Three Two
  4. Four

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quis cumque similique voluptas facilis fugit inventore odit, quidem et ab, quos, blanditiis iure! Ipsum nostrum corrupti architecto fugit, culpa expedita. someone

Code

You can use inline code, inline sample output or code blocks. Use .scroll to prevent code wrapping.

while true; do { echo -e "HTTP/1.1 200 OK\r\n"; cat index.html; } | nc -l 8080; done
$ time sleep 3
3.00 real 0.00 user 0.00 sys
$ exit

Horizontal Rule

Form

Inline Form

Horizontal Form (default on larger screens)

Stateful Form

Help Block

Disabled

Readonly

Required

Vertical Form (default on smaller screens)

File Input with Dropzones, e.g. react-dropzone

Drop Files
Active Style
Rejected Style

Table

states param param param
cell states 90 80 70
normal state 60 85 80
row state 80 65 60
Table with fixed layout and caption
classes param param param
narrow ✗ ✗ ✔
striped ✔ ✔ ✔
/ ✔ ✗ ✔
/ ✔ ✔ ✗
/ ✔ ✗ ✔
/ ✔ ✔ ✗
classes param param param
wide ✗ ✗ ✔
hoverable ✔ ✗ ✔
/ ✔ ✔ ✗

List Group

  • Cras justo odio
  • DISABLED
  • Morbi leo risus Tag
  • ACTIVE
  • Porta ac consectetur
Striped Morbi leo risus Porta ac consectetur Vestibulum at eros ACTIVE LINK

Progress bar

50kb / 125kb

20%

with .narrow

For advanced progress bars consider progressbar.js.

Buttons

Button Groups

Prefix Postfix

Loading Indicator

Tags

Tags have different states like normal and success and info and warning and error.

Icons from bytesize-icons

The icons don't work in IE / Edge. Consider inlining the svg file for Edge or svg4everybody for IE.

Yay

Can be sized, e.g. normal, medium or large.

Tooltips naive version, might be out of screen

Cards

TITLE
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.

in grid
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
with list group
Cras justo odio Dapibus ac facilisis in Morbi leo risus Vestibulum at eros Porta ac consectetur
with image
Image
and a second body
echo "and a third"

Alerts

Default message

Info message

Warning message

Success message

Error message

Images and Figures

You can use Image inline.

.full-width

Image

Figure with Caption

Image
Bildbeschreibung

Details & Summary

Hidden Text Sample

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum molestiae et dicta, vero alias ab tempore obcaecati tempora odit voluptates. Eum inventore omnis, ullam rerum tenetur optio quasi a totam!

Hidden Code Sample $ time sleep 3
3.00 real 0.00 user 0.00 sys
$ exit

Toggleable Cards

Card Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
$ time sleep 3
3.00 real 0.00 user 0.00 sys
$ exit

Basic

Use .container to centralize the main content.

Use .site-header, .site-main and .site-footer for the main sectioning elements.

.site-header contains .site-nav which is not responsive by default but can be appended by .responsive-nav to collapse and show a hamburger icon on smaller screens. It can carry .responsive-nav-animated to add a sliding animation to the nav.

Grid

space
can be
flexibly
distributed
or
fixed
4
4
8
1
1
1
1
1
1
1
1
1
1
1
1

Inline Grid

take the size they need

Modifiers

.grid modifiers

  • To change spacing use grid-narrow or grid-wide
  • To align items with align-items use
    • grid-top: To top
    • grid-middle: To middle
    • grid-bottom: To bottom
    • grid-stretch: Stretch items
    • grid-baseline: To baseline
  • To layout contents with justify-content use
    • grid-left: To left
    • grid-center: To center
    • grid-right: To right
    • grid-between: Add spaces between items
    • grid-around: Add spaces around items

.cell modifiers

  • grid-top: To top
  • grid-middle: To middle
  • grid-bottom: To bottom
  • cell-1: Set item width to 8.3% of parent
  • cell-2: Set item width to 16.7% of parent
  • cell-3: Set item width to 25% of parent
  • cell-4: Set item width to 33% of parent
  • cell-5: Set item width to 41.7% of parent
  • cell-6: Set item width to 50% of parent
  • cell-7: Set item width to 58.3% of parent
  • cell-8: Set item width to 66.7% of parent
  • cell-9: Set item width to 75% of parent
  • cell-10: Set item width to 83.3% of parent
  • cell-11: Set item width to 91.7% of parent
  • cell-12: Set item width to 100% of parent

  1. Example footnote text. ↩