Skip to content

Commit b44742f

Browse files
aaronshekeyaaronshekey
committed
Merge branch 'develop' into code-copy-btn
2 parents 4ea6414 + 919f572 commit b44742f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+147
-155
lines changed

‎docs/product/base/grid.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@
55
---
66
<section class="stacks-section">
77
{% header "h2", "Overview" %}
8-
{% tip, "warning", "mb24" %}
9-
<p>Looking for our old flex grid? <a href="{{ "/product/base/flex" | url }}">Flex layouts</a> have been moved and renamed now that CSS grid is here. Our <code class="stacks-code">.grid</code>, and <code class="stacks-code">.grid--cell</code> classes have been removed in favor of <code class="stacks-code">.d-flex</code> and <code class="stacks-code">.flex--item</code>.</p>
10-
<p class="mb0">If you need to continue using the old <code class="stacks-code">.grid</code>, and <code class="stacks-code">.grid--cell</code> classes, Stacks provides a <a href="https://unpkg.com/@stackoverflow/stacks/dist/css/stacks-flexgrid-shim.min.css">shim</a> for backwards compatability.</p>
11-
{% endtip %}
12-
138
<p class="stacks-copy">CSS Grids are the most powerful layout system available in CSS. It has two dimensions, meaning it can handle both columns and rows simultaneously, unlike <a href="{{ "/product/base/flex" | url }}">flex layouts</a> which can only do one at a time. Applying <code class="stacks-code">.d-grid</code> to a container will lay out its children according to the CSS Grid layout spec. Adding atomic modifying classes will change the layout’s behavior. Applying classes to an individual <code class="stacks-code">.grid--item</code> will change that cell’s behavior.</p>
149

1510
{% header "h3", "Examples" %}

‎docs/product/guidelines/releasing.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: page
33
title: Releasing Stacks
4-
description: The following is a guide to releasing a new version of Stacks and making it available in production on Core and Careers.
4+
description: The following is a guide to releasing a new version of Stacks and making it available in production on Stack Overflow and Careers.
55
---
66

77
<section class="stacks-section">
@@ -19,7 +19,7 @@
1919

2020
<section class="stacks-section">
2121
{% header "h2", "Ship the new version to Stack Overflow" %}
22-
<p class="stacks-copy">In order for the new version of Stacks to be usable on Core and Careers, you’ll need to ship to both.</p>
23-
24-
<p class="stacks-copy">Within Core and Careers, run the <code class="stacks-code">update-stacks.bat</code> script within <code class="stacks-code">Tools/</code>. This will copy the files from the latest version of the Stacks repo. You’ll need to do this for both Core and Careers. The script will create a new branch, create a single commit with the updates from Stacks, push the new branch to the repo, and open your browser on the &ldquo;new pull request&rdquo; page.</p>
22+
<p class="stacks-copy">In order for the new version of Stacks to be usable on Stack Overflow and Careers, you’ll need to ship to both.</p>
23+
<p class="stacks-copy">Stack Overflow’s dependencies are now managed via NPM, so updating Stacks there is as simple as bumping the version number in <code class="stacks-code">package.json</code></p>
24+
<p class="stacks-copy">Within the Careers repo, run the <code class="stacks-code">update-stacks.bat</code> script within the <code class="stacks-code">Tools</code> directory. This will copy the files from the latest version of the Stacks repo. The script will create a new branch, create a single commit with the updates from Stacks, push the new branch to the repo, and open your browser on the &ldquo;new pull request&rdquo; page.</p>
2525
</section>

‎lib/css/atomic/_stacks-borders.less‎ renamed to ‎lib/css/atomic/borders.less‎

File renamed without changes.

‎lib/css/atomic/_stacks-colors.less‎ renamed to ‎lib/css/atomic/colors.less‎

File renamed without changes.

‎lib/css/atomic/_stacks-flex.less‎ renamed to ‎lib/css/atomic/flex.less‎

File renamed without changes.

‎lib/css/atomic/_stacks-grid.less‎ renamed to ‎lib/css/atomic/grid.less‎

File renamed without changes.

‎lib/css/atomic/_stacks-misc.less‎ renamed to ‎lib/css/atomic/misc.less‎

File renamed without changes.

‎lib/css/atomic/_stacks-spacing.less‎ renamed to ‎lib/css/atomic/spacing.less‎

File renamed without changes.

‎lib/css/atomic/_stacks-typography.less‎ renamed to ‎lib/css/atomic/typography.less‎

File renamed without changes.

‎lib/css/atomic/_stacks-width-height.less‎ renamed to ‎lib/css/atomic/width-height.less‎

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -42,18 +42,18 @@
4242
// $$ STATIC
4343
.ws0,
4444
.w0 { width: 0 !important; }
45-
.ws1 { width: @s-step !important; }
46-
.ws2 { width: @s-step * 2 !important; }
47-
.ws3 { width: @s-step * 3 !important; }
48-
.ws4 { width: @s-step * 4 !important; }
49-
.ws5 { width: @s-step * 5 !important; }
50-
.ws6 { width: @s-step * 6 !important; }
51-
.ws7 { width: @s-step * 7 !important; }
52-
.ws8 { width: @s-step * 8 !important; }
53-
.ws9 { width: @s-step * 9 !important; }
54-
.ws10 { width: @s-step * 10 !important; }
55-
.ws11 { width: @s-step * 11 !important; }
56-
.ws12 { width: @s-full !important; }
45+
.ws1 { width: var(--s-step) !important; }
46+
.ws2 { width: calc(var(--s-step) * 2) !important; }
47+
.ws3 { width: calc(var(--s-step) * 3) !important; }
48+
.ws4 { width: calc(var(--s-step) * 4) !important; }
49+
.ws5 { width: calc(var(--s-step) * 5) !important; }
50+
.ws6 { width: calc(var(--s-step) * 6) !important; }
51+
.ws7 { width: calc(var(--s-step) * 7) !important; }
52+
.ws8 { width: calc(var(--s-step) * 8) !important; }
53+
.ws9 { width: calc(var(--s-step) * 9) !important; }
54+
.ws10 { width: calc(var(--s-step) * 10) !important; }
55+
.ws11 { width: calc(var(--s-step) * 11) !important; }
56+
.ws12 { width: var(--s-full) !important; }
5757

5858
// $$ SPACING UNITS
5959
.w2 { width: var(--su-static2) !important; }
@@ -73,21 +73,21 @@
7373
// $ MAX-WIDTH
7474
// ----------------------------------------------------------------------------
7575
.wmx0 { max-width: 0 !important; }
76-
.wmx1 { max-width: @s-step !important; }
77-
.wmx2 { max-width: @s-step * 2 !important; }
76+
.wmx1 { max-width: var(--s-step) !important; }
77+
.wmx2 { max-width: calc(var(--s-step) * 2) !important; }
7878
.wmx25 { max-width: 25% !important; }
79-
.wmx3 { max-width: @s-step * 3 !important; }
80-
.wmx4 { max-width: @s-step * 4 !important; }
81-
.wmx5 { max-width: @s-step * 5 !important; }
79+
.wmx3 { max-width: calc(var(--s-step) * 3) !important; }
80+
.wmx4 { max-width: calc(var(--s-step) * 4) !important; }
81+
.wmx5 { max-width: calc(var(--s-step) * 5) !important; }
8282
.wmx50 { max-width: 50% !important; }
83-
.wmx6 { max-width: @s-step * 6 !important; }
84-
.wmx7 { max-width: @s-step * 7 !important; }
83+
.wmx6 { max-width: calc(var(--s-step) * 6) !important; }
84+
.wmx7 { max-width: calc(var(--s-step) * 7) !important; }
8585
.wmx75 { max-width: 75% !important; }
86-
.wmx8 { max-width: @s-step * 8 !important; }
87-
.wmx9 { max-width: @s-step * 9 !important; }
88-
.wmx10 { max-width: @s-step * 10 !important; }
89-
.wmx11 { max-width: @s-step * 11 !important; }
90-
.wmx12 { max-width: @s-full !important; }
86+
.wmx8 { max-width: calc(var(--s-step) * 8) !important; }
87+
.wmx9 { max-width: calc(var(--s-step) * 9) !important; }
88+
.wmx10 { max-width: calc(var(--s-step) * 10) !important; }
89+
.wmx11 { max-width: calc(var(--s-step) * 11) !important; }
90+
.wmx12 { max-width: var(--s-full) !important; }
9191
#stacks-internals #responsify('.wmx100', { max-width: 100% !important; });
9292
#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; });
9393
#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; });
@@ -96,21 +96,21 @@
9696
// $ MIN-WIDTH
9797
// ----------------------------------------------------------------------------
9898
.wmn0 { min-width: 0 !important; }
99-
.wmn1 { min-width: @s-step !important; }
100-
.wmn2 { min-width: @s-step * 2 !important; }
99+
.wmn1 { min-width: var(--s-step) !important; }
100+
.wmn2 { min-width: calc(var(--s-step) * 2) !important; }
101101
.wmn25 { min-width: 25% !important; }
102-
.wmn3 { min-width: @s-step * 3 !important; }
103-
.wmn4 { min-width: @s-step * 4 !important; }
104-
.wmn5 { min-width: @s-step * 5 !important; }
102+
.wmn3 { min-width: calc(var(--s-step) * 3) !important; }
103+
.wmn4 { min-width: calc(var(--s-step) * 4) !important; }
104+
.wmn5 { min-width: calc(var(--s-step) * 5) !important; }
105105
.wmn50 { min-width: 50% !important; }
106-
.wmn6 { min-width: @s-step * 6 !important; }
107-
.wmn7 { min-width: @s-step * 7 !important; }
106+
.wmn6 { min-width: calc(var(--s-step) * 6) !important; }
107+
.wmn7 { min-width: calc(var(--s-step) * 7) !important; }
108108
.wmn75 { min-width: 75% !important; }
109-
.wmn8 { min-width: @s-step * 8 !important; }
110-
.wmn9 { min-width: @s-step * 9 !important; }
111-
.wmn10 { min-width: @s-step * 10 !important; }
112-
.wmn11 { min-width: @s-step * 11 !important; }
113-
.wmn12 { min-width: @s-full !important; }
109+
.wmn8 { min-width: calc(var(--s-step) * 8) !important; }
110+
.wmn9 { min-width: calc(var(--s-step) * 9) !important; }
111+
.wmn10 { min-width: calc(var(--s-step) * 10) !important; }
112+
.wmn11 { min-width: calc(var(--s-step) * 11) !important; }
113+
.wmn12 { min-width: var(--s-full) !important; }
114114
#stacks-internals #responsify('.wmn100', { min-width: 100% !important; });
115115
#stacks-internals #responsify('.wmn-initial', { min-width: initial !important; });
116116

@@ -126,18 +126,18 @@
126126
// $$ STATIC
127127
.hs0,
128128
.h0 { height: 0 !important; }
129-
.hs1 { height: @s-step !important; }
130-
.hs2 { height: @s-step * 2 !important; }
131-
.hs3 { height: @s-step * 3 !important; }
132-
.hs4 { height: @s-step * 4 !important; }
133-
.hs5 { height: @s-step * 5 !important; }
134-
.hs6 { height: @s-step * 6 !important; }
135-
.hs7 { height: @s-step * 7 !important; }
136-
.hs8 { height: @s-step * 8 !important; }
137-
.hs9 { height: @s-step * 9 !important; }
138-
.hs10 { height: @s-step * 10 !important; }
139-
.hs11 { height: @s-step * 11 !important; }
140-
.hs12 { height: @s-full !important; }
129+
.hs1 { height: var(--s-step) !important; }
130+
.hs2 { height: calc(var(--s-step) * 2) !important; }
131+
.hs3 { height: calc(var(--s-step) * 3) !important; }
132+
.hs4 { height: calc(var(--s-step) * 4) !important; }
133+
.hs5 { height: calc(var(--s-step) * 5) !important; }
134+
.hs6 { height: calc(var(--s-step) * 6) !important; }
135+
.hs7 { height: calc(var(--s-step) * 7) !important; }
136+
.hs8 { height: calc(var(--s-step) * 8) !important; }
137+
.hs9 { height: calc(var(--s-step) * 9) !important; }
138+
.hs10 { height: calc(var(--s-step) * 10) !important; }
139+
.hs11 { height: calc(var(--s-step) * 11) !important; }
140+
.hs12 { height: var(--s-full) !important; }
141141

142142
// $$ SPACING UNITS
143143
.h2 { height: var(--su-static2) !important; }
@@ -157,18 +157,18 @@
157157
// $ MAX-HEIGHT
158158
// ----------------------------------------------------------------------------
159159
.hmx0 { max-height: 0 !important; }
160-
.hmx1 { max-height: @s-step !important; }
161-
.hmx2 { max-height: @s-step * 2 !important; }
162-
.hmx3 { max-height: @s-step * 3 !important; }
163-
.hmx4 { max-height: @s-step * 4 !important; }
164-
.hmx5 { max-height: @s-step * 5 !important; }
165-
.hmx6 { max-height: @s-step * 6 !important; }
166-
.hmx7 { max-height: @s-step * 7 !important; }
167-
.hmx8 { max-height: @s-step * 8 !important; }
168-
.hmx9 { max-height: @s-step * 9 !important; }
169-
.hmx10 { max-height: @s-step * 10 !important; }
170-
.hmx11 { max-height: @s-step * 11 !important; }
171-
.hmx12 { max-height: @s-full !important; }
160+
.hmx1 { max-height: var(--s-step) !important; }
161+
.hmx2 { max-height: calc(var(--s-step) * 2) !important; }
162+
.hmx3 { max-height: calc(var(--s-step) * 3) !important; }
163+
.hmx4 { max-height: calc(var(--s-step) * 4) !important; }
164+
.hmx5 { max-height: calc(var(--s-step) * 5) !important; }
165+
.hmx6 { max-height: calc(var(--s-step) * 6) !important; }
166+
.hmx7 { max-height: calc(var(--s-step) * 7) !important; }
167+
.hmx8 { max-height: calc(var(--s-step) * 8) !important; }
168+
.hmx9 { max-height: calc(var(--s-step) * 9) !important; }
169+
.hmx10 { max-height: calc(var(--s-step) * 10) !important; }
170+
.hmx11 { max-height: calc(var(--s-step) * 11) !important; }
171+
.hmx12 { max-height: var(--s-full) !important; }
172172
#stacks-internals #responsify('.hmx100', { max-height: 100% !important; });
173173
#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; });
174174
#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; });
@@ -177,18 +177,18 @@
177177
// $ MIN-HEIGHT
178178
// ----------------------------------------------------------------------------
179179
.hmn0 { min-height: 0 !important; }
180-
.hmn1 { min-height: @s-step !important; }
181-
.hmn2 { min-height: @s-step * 2 !important; }
182-
.hmn3 { min-height: @s-step * 3 !important; }
183-
.hmn4 { min-height: @s-step * 4 !important; }
184-
.hmn5 { min-height: @s-step * 5 !important; }
185-
.hmn6 { min-height: @s-step * 6 !important; }
186-
.hmn7 { min-height: @s-step * 7 !important; }
187-
.hmn8 { min-height: @s-step * 8 !important; }
188-
.hmn9 { min-height: @s-step * 9 !important; }
189-
.hmn10 { min-height: @s-step * 10 !important; }
190-
.hmn11 { min-height: @s-step * 11 !important; }
191-
.hmn12 { min-height: @s-full !important; }
180+
.hmn1 { min-height: var(--s-step) !important; }
181+
.hmn2 { min-height: calc(var(--s-step) * 2) !important; }
182+
.hmn3 { min-height: calc(var(--s-step) * 3) !important; }
183+
.hmn4 { min-height: calc(var(--s-step) * 4) !important; }
184+
.hmn5 { min-height: calc(var(--s-step) * 5) !important; }
185+
.hmn6 { min-height: calc(var(--s-step) * 6) !important; }
186+
.hmn7 { min-height: calc(var(--s-step) * 7) !important; }
187+
.hmn8 { min-height: calc(var(--s-step) * 8) !important; }
188+
.hmn9 { min-height: calc(var(--s-step) * 9) !important; }
189+
.hmn10 { min-height: calc(var(--s-step) * 10) !important; }
190+
.hmn11 { min-height: calc(var(--s-step) * 11) !important; }
191+
.hmn12 { min-height: var(--s-full) !important; }
192192
#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
193193
#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
194194
#stacks-internals #responsify('.hmx-screen', { min-height: 100vh !important; });

0 commit comments

Comments
 (0)