apple2idiot

Stuff

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

10 P=49312 20 FOR N=P TO P+15 30 PRINT N,PEEK(N) 40 NEXT N

IDT7132 RAM

%RAM_TABLE%
ADDRESS DATA

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

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

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. ↩