Skip to content

Commit 5a05c15

Browse files
author
mrmrs
committed
Add missing content back to the docs.
1 parent df30d34 commit 5a05c15

File tree

2 files changed

+39
-8
lines changed

2 files changed

+39
-8
lines changed

‎docs/layout/box-sizing/index.html

+21-6
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
66
<title>
7-
Box Sizing / Layout / Docs / TACHYONS
7+
tachyons-box-sizing / Layout / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mr3rs">
10-
<meta name="description" content="CSS">
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="Tachyons is a css framework for rapidly building well-designed, responsive, and performant UI.">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
12-
<link rel="stylesheet" href="/css/tachyons.css">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
1313
</head>
1414
<body class="w-100 sans-serif">
15-
1615
<header class="w-100 pa3 ph5-ns bg-near-white">
1716
<div class="dt w-100">
1817
<div class="dtc v-mid tl w-50">
@@ -42,7 +41,7 @@
4241
</header>
4342

4443
<main class="">
45-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
44+
<article class="bg-near-white bt b--black-10 ph3 pv3 ph5-ns">
4645
<h4 class="f4 mv0 fw6 dib mr4">tachyons-box-sizing</h4>
4746
<span class="f4 b dib pl0 ml0 mr4">v3.1.0</span>
4847
<span class="f4 b dib pl0 ml0 mr4">156 B</span>
@@ -64,6 +63,22 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-box-sizing</h4>
6463
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
6564
</dl>
6665
</div>
66+
<p class="measure f4 lh-copy">
67+
The box model has been known to trip up a few people. This module should make things a bit easier.
68+
</p>
69+
<p class="measure f5 lh-copy">
70+
While many people make fun of Microsoft's 'Internet Explorer' browser - the one thing that most css authors
71+
agree on is that it's the most favorable box model. Fortunately the box-sizing property is well supported
72+
now so we can fix the atrocity that is the box model that chrome, firefox, safari, and others have implemented in modern browsers.
73+
</p>
74+
<p class="measure f5 lh-copy">
75+
While the * { box-sizing: border-box; } hack has become quite popular - not all elements (think form inputs)
76+
benefit from this box model. This module only applies the border-box model to certain elements as listed below.
77+
There is also a .border-box class you can apply to elements as needed.
78+
</p>
79+
<p class="measure f5 lh-copy">
80+
The benefit of border-box as opposed to content-box (which is the default per the css spec) is that when you declare a width, that is the width of the element, regardless of how much border or padding you add to the element.
81+
</p>
6782
</article>
6883
<div class="ph3 ph5-ns pt4 pb5">
6984
<h2 class="f3 bold">Examples</h2>

‎src/templates/docs/box-sizing/index.html

+18-2
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
<%= name %> / Layout / Docs / TACHYONS
88
</title>
99
<meta name="author" content="@mrmrs">
10-
<meta name="description" content="Functional CSS for humans">
10+
<meta name="description" content="Tachyons is a css framework for rapidly building well-designed, responsive, and performant UI.">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212
<link rel="stylesheet" href="/css/tachyons.min.css">
1313
</head>
1414
<body class="w-100 sans-serif">
1515
<%= siteHeader %>
1616
<main class="">
17-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
17+
<article class="bg-near-white bt b--black-10 ph3 pv3 ph5-ns">
1818
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
1919
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
2020
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
@@ -36,6 +36,22 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
3636
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
3737
</dl>
3838
</div>
39+
<p class="measure f4 lh-copy">
40+
The box model has been known to trip up a few people. This module should make things a bit easier.
41+
</p>
42+
<p class="measure f5 lh-copy">
43+
While many people make fun of Microsoft's 'Internet Explorer' browser - the one thing that most css authors
44+
agree on is that it's the most favorable box model. Fortunately the box-sizing property is well supported
45+
now so we can fix the atrocity that is the box model that chrome, firefox, safari, and others have implemented in modern browsers.
46+
</p>
47+
<p class="measure f5 lh-copy">
48+
While the * { box-sizing: border-box; } hack has become quite popular - not all elements (think form inputs)
49+
benefit from this box model. This module only applies the border-box model to certain elements as listed below.
50+
There is also a .border-box class you can apply to elements as needed.
51+
</p>
52+
<p class="measure f5 lh-copy">
53+
The benefit of border-box as opposed to content-box (which is the default per the css spec) is that when you declare a width, that is the width of the element, regardless of how much border or padding you add to the element.
54+
</p>
3955
</article>
4056
<div class="ph3 ph5-ns pt4 pb5">
4157
<h2 class="f3 bold">Examples</h2>

0 commit comments

Comments
 (0)