Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="prose">
  <h2>What is Getting Real</h2>
  <p>Want to build a successful web app? Then it’s time to Get Real. Getting Real is a smaller, faster, better way to build software.</p>
  <ul>
    <li>Getting Real is about skipping all the stuff that represents real (charts, graphs, boxes, arrows, schematics, wireframes, etc.) and actually building the real thing.</li>
    <li>Getting real is less. Less mass, less software, less features, less paperwork, less of everything that’s not essential (and most of what you think is essential actually isn’t).</li>
    <li>Getting Real is staying small and being agile.</li>
  </ul>
  <h3>The benefits of Getting Real</h3>
  <p>Getting Real delivers better results because it forces you to deal with the actual problems you’re trying to solve instead of your ideas about those problems. It forces you to deal with reality.</p>
  <p>Getting Real foregoes functional specs and other transitory documentation in favor of building real screens. A functional spec is make-believe, an illusion of agreement, while an actual web page is reality. That’s what your customers are going to see and use. That’s what matters. Getting Real gets you there faster. And that means you’re making software decisions based on the real thing instead of abstract notions.</p>
  <h3>How To Write Vigorous Software</h3>
  <blockquote>
    Vigorous writing is concise. A sentence should contain no unnecessary words,
    a paragraph no unnecessary sentences, for the same reason that a drawing should
    have no unnecessary lines and a machine no unnecessary parts.
    This requires not that the writer make all sentences short or avoid all detail
    and treat subjects only in outline, but that every word tell.
  </blockquote>
  <p>—From <a href="#">“The Elements of Style”</a> by William Strunk Jr.</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="prose">
  <h2>What is Getting Real</h2>
  <p>Want to build a successful web app? Then it’s time to Get Real. Getting Real is a smaller, faster, better way to build software.</p>
  <ul>
    <li>Getting Real is about skipping all the stuff that represents real (charts, graphs, boxes, arrows, schematics, wireframes, etc.) and actually building the real thing.</li>
    <li>Getting real is less. Less mass, less software, less features, less paperwork, less of everything that’s not essential (and most of what you think is essential actually isn’t).</li>
    <li>Getting Real is staying small and being agile.</li>
  </ul>
  <h3>The benefits of Getting Real</h3>
  <p>Getting Real delivers better results because it forces you to deal with the actual problems you’re trying to solve instead of your ideas about those problems. It forces you to deal with reality.</p>
  <p>Getting Real foregoes functional specs and other transitory documentation in favor of building real screens. A functional spec is make-believe, an illusion of agreement, while an actual web page is reality. That’s what your customers are going to see and use. That’s what matters. Getting Real gets you there faster. And that means you’re making software decisions based on the real thing instead of abstract notions.</p>
  <h3>How To Write Vigorous Software</h3>
  <blockquote>
    Vigorous writing is concise. A sentence should contain no unnecessary words,
    a paragraph no unnecessary sentences, for the same reason that a drawing should
    have no unnecessary lines and a machine no unnecessary parts.
    This requires not that the writer make all sentences short or avoid all detail
    and treat subjects only in outline, but that every word tell.
  </blockquote>
  <p>—From <a href="#">“The Elements of Style”</a> by William Strunk Jr.</p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
:where(.prose) {
  font-size: var(--text-base-responsive);
  max-inline-size: 65ch;
  /* Antialiased fonts */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 800;
    hyphens: auto;
    letter-spacing: -0.02ch;
    line-height: 1.1;
    margin-block: 0.65em;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  h1 {
    font-size: 2.25em;
  }
  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 1.125em;
  }
  h4 {
    font-size: 1em;
  }
  h5 {
    font-size: 0.875em;
  }
  h6 {
    font-size: 0.75em;
  }
  :is(ul, ol, menu) {
    list-style: revert;
    padding-inline-start: revert;
  }
  :is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
    margin-block: 0.65lh;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  hr {
    border-color: var(--color-border-dark);
    border-style: var(--border-style, solid) none none;
    margin: 2lh auto;
  }
  :is(b, strong) {
    font-weight: 700;
  }
  :is(pre, code) {
    background-color: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: 0.3em;
    font-family: var(--font-monospace-code);
    font-size: 0.85em;
  }
  code {
    padding: 0.1em 0.3em;
    white-space: pre-wrap;
  }
  pre {
    border-radius: 0.5em;
    padding: 0.5lh 2ch;
  }
  pre code {
    background-color: transparent;
    border: 0;
    font-size: 1em;
    padding: 0;
  }
  p {
    hyphens: auto;
    letter-spacing: -0.005ch;
  }
  blockquote {
    font-style: italic;
    margin: 0 3ch;
  }
  blockquote p {
    hyphens: none;
  }
  table {
    border: 1px solid var(--color-border-dark);
    border-collapse: collapse;
    margin: 1lh 0;
  }
  th {
    font-weight: 700;
  }
  :is(th, td) {
    border: 1px solid var(--color-border-dark);
    padding: 0.2lh 1ch;
    text-align: start;
  }
  th {
    border-block-end-width: 3px;
  }
  del {
    background-color: hsl(from var(--color-negative) h s l / .1);
    color: var(--color-negative);
  }
  ins {
    background-color: hsl(from var(--color-positive) h s l / .1);
    color: var(--color-positive);
  }
  a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
  }
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.