Skip to content

Commit

Permalink
Show file tree
Hide file tree
Showing 27 changed files with 1 addition and 36 deletions.
11 changes: 1 addition & 10 deletions docs/_includes/layouts/page.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h5 class="mt16 mb8 fw-bold tt-uppercase fs-fine fc-theme-primary mnl1">Sections
https://stackoverflow.com/questions/38723559/flex-item-exceeds-its-container
{% endcomment %}
<div class="flex--item fl-grow1 ws1">
{% if js or figma or razor %}
{% if js or razor %}
<div class="stacks-badged d-flex g8 ai-center">
<h1 class="stacks-h1 flex--item mb0 mr-auto">{{ title }}</h1>

Expand All @@ -40,15 +40,6 @@ <h1 class="stacks-h1 flex--item mb0 mr-auto">{{ title }}</h1>
<div class="d-flex flex__center bg-green-400 brr-sm px8 py4">JavaScript</div>
</a>
{% endif %}

{% if figma %}
<a href="{{ figma }}" class="d-flex fc-white theme-light__forced">
<div class="bg-black-500 blr-sm p4">
{% icon "Figma", "native" %}
</div>
<div class="d-flex flex__center bg-black-400 brr-sm px8 py4">Figma</div>
</a>
{% endif %}
</div>
{% else %}
<h1 class="stacks-h1">{{ title }}</h1>
Expand Down
1 change: 0 additions & 1 deletion docs/product/base/box-shadow.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
layout: page
title: Box shadow
figma: https://www.figma.com/file/BKF0Bk7gymjt8cAdQcPtF7/Box-Shadows
description: Box shadow atomic classes allow you to change an element’s box shadow quickly.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/avatars.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Avatars
razor: https://razor.stackoverflow.design/components/avatar
figma: https://www.figma.com/file/BJRlHasCR6r9hgszE95hJm/Avatars
description: Avatars are used to quickly identify users or teams.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/award-bling.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Award bling
razor: https://razor.stackoverflow.design/components/award-bling
figma: https://www.figma.com/file/i2HeoRFKn6MXAWn2UuTDHc/Badges
description: Award bling is used to indicate award type in badges, topbar, and user cards.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/badges.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Badges
razor: https://razor.stackoverflow.design/components/badge
figma: https://www.figma.com/file/i2HeoRFKn6MXAWn2UuTDHc/Badges
description: Badges are labels used for flags, earned achievements, and number totals.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/banners.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Banners
razor: https://razor.stackoverflow.design/components/banner
figma: https://www.figma.com/file/9MG6BQ5X0FlHV0rQ3c9ugA/Banners
description: Banners are a type of <a href="/product/components/notices">notice</a>, delivering both system and engagement messaging. These are highly intrusive messaging methods and so should be used appropriately.
---
<!-- Additional javascript -->
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/breadcrumbs.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
layout: page
title: Breadcrumbs
figma: https://www.figma.com/file/Anwb7zgxxeMm7Sw7vbaukq/Breadcrumbs
description: Breadcrumbs are used to provide context for the currently-viewed page.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/button-groups.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Button groups
razor: https://razor.stackoverflow.design/components/button-group
figma: https://www.figma.com/file/9p5HuZwl9KXP9HpBZuvBoT/Button-Groups
description: Button groups are a collection of buttons. This component is used in our questions view, and is frequently used in conjunction with other form elements such as search fields and sorting dropdowns. If the content you’re interacting with is a simple paring down or filter of the current view, it’s appropriate to use the <code class="stacks-code">.s-btn-group</code> component. Add the class <code class="stacks-code">.is-selected</code> and the <code class="stacks-code">aria-current</code> attribute with the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#values">appropriate value</a> to show the currently selected button.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/buttons.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Buttons
razor: https://razor.stackoverflow.design/components/button
figma: https://www.figma.com/file/rknusKtqsY7iUI9Ng7PNDS/Buttons
description: Buttons are user interface elements which allows users to take actions throughout the project. It is important that they have ample click space and help communicate the importance of their actions.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/cards.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
layout: page
title: Cards
figma: https://www.figma.com/file/ZidBnnDAVwYUnL0TvGWnTa/Cards
description: Cards are used to group similar concepts and tasks together to make information easier to scan, read, and act on. Cards should use a heading that sets clear expectations about the card’s purpose, paragraphs that put the most critical information first, and (optionally) calls to action on the bottom to direct user action.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/checkbox.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Checkbox & Radio
razor: https://razor.stackoverflow.design/components/check
figma: https://www.figma.com/file/GQB9GupHvraMioGRPbwKhO/Form-Elements
description: Checkable inputs that visually allow for multiple options or true/false values.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/editor.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Editor
js: true
figma: https://www.figma.com/file/aUvZ3KmZN4oYrMBJ5AroKV/Editor
description: The Stacks editor adds “what you see is what you get” and Markdown capabilities to textareas. It is available as a separate <a href="https://github.com/StackExchange/Stacks-Editor">Editor</a> repository, but requires Stacks’ CSS for styling.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/inputs.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Inputs
razor: https://razor.stackoverflow.design/components/input
figma: https://www.figma.com/file/GQB9GupHvraMioGRPbwKhO/Form-Elements
description: Input elements are used to gather information from users.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/labels.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
layout: page
title: Labels
figma: https://www.figma.com/file/UMVHhcJjTqHgqn7wJkr5f6/Labels
description: Labels are used to describe inputs, select menus, textareas, radio buttons, and checkboxes.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/modals.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
title: Modals
razor: https://razor.stackoverflow.design/components/modal
js: true
figma: https://www.figma.com/file/B1IIlRbtGvReNCILI7HNVL/Modals
description: Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/navigation.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
title: Navigation
razor: https://razor.stackoverflow.design/components/navigation
js: true
figma: https://www.figma.com/file/Hei0vYDqdyrjZR9laRdZCm/Navigation
description: Our navigation component is a collection of pill-shaped buttons that respond gracefully to various window sizes and parent containers.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/notices.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
layout: page
title: Notices
figma: https://www.figma.com/file/WYBYiGnyr5qemIm93ZcTf8/Notices
description: Notices deliver <strong>System</strong> and <strong>Engagement</strong> messaging, informing the user about product or account statuses and related actions.
---
<!-- TODO: Add accessibility section with differences between <aside> and status/alert roles and when to use them -->
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/popovers.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
title: Popovers
razor: https://razor.stackoverflow.design/components/popover
js: true
figma: https://www.figma.com/file/LLHB9oIQ6DmOHQNVbGYrH4/Popovers
description: Popovers are small content containers that provide a contextual overlay. They can be used as in-context feature explanations, dropdowns, or tooltips.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/select.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Select
razor: https://razor.stackoverflow.design/components/select
figma: https://www.figma.com/file/GQB9GupHvraMioGRPbwKhO/Form-Elements
description: A selectable menu list from which a user can make a single selection. Typically they are used when there are more than four possible options. The custom select menu styling is achieved by wrapping the <code class="stacks-code">select</code> tag within the <code class="stacks-code">.s-select</code> class.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/tags.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Tags
razor: https://razor.stackoverflow.design/components/post-tag
figma: https://www.figma.com/file/pjrkFIbNIOWb8zhdJB7Aon/Tags
description: Tags are an interactive, community-generated keyword that allow communities to label, organize, and discover related content. Tags are maintained by their respective communities
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/textarea.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Textarea
razor: https://razor.stackoverflow.design/components/textarea
figma: https://www.figma.com/file/GQB9GupHvraMioGRPbwKhO/Form-Elements
description: Multi-line inputs used by users to enter longer text portions.
---
<section id="inputs" class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/components/toggle-switch.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Toggle switch
razor: https://razor.stackoverflow.design/components/toggle
figma: https://www.figma.com/file/DhmEdwQjfSugeNAfDSnbJa/Toggle-Switches
description: A toggle is used to quickly switch between two or more possible states. They are most commonly used for simple “on/off” switches, but can contain multiple options.
---
<section class="stacks-section">
Expand Down
1 change: 0 additions & 1 deletion docs/product/foundation/color-fundamentals.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
layout: page
title: Color fundamentals
figma: https://www.figma.com/file/cCU6A56sHwZluraDoyg5o7/Colors%3A-Accessible-Color-Palette?type=design&node-id=1303-30963&mode=design&t=x8ZAgttWTSCnEvjL-0
description: Color is used distinguish our brand, convey meaning, and invoke emotions. A color palette ensures a familiar and consistent experience across our products.
hide-menu: true
---
Expand Down
1 change: 0 additions & 1 deletion docs/product/foundation/colors.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
layout: page
title: Colors
figma: https://www.figma.com/file/cCU6A56sHwZluraDoyg5o7/Colors%3A-Accessible-Color-Palette?type=design&node-id=1303-30963&mode=design&t=x8ZAgttWTSCnEvjL-0
description: To avoid specifying color values by hand, we’ve included a robust set of color variables. For maintainability, please use these instead of hardcoding color values.
---

Expand Down
1 change: 0 additions & 1 deletion docs/product/foundation/icons.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Icons
razor: https://razor.stackoverflow.design/components/icon
figma: https://www.figma.com/file/NxAqQAi9i5XsrZSm1WYj6tsM/Icons-and-Spot-Illustrations
description: Stacks provides a complete icon set, managed separately in the <a href="https://github.com/StackExchange/Stacks-Icons">Stacks-Icons</a> repository. There you’ll find deeper documentation on the various uses as well as the icons’ source in our design tool Figma.
---

Expand Down
1 change: 0 additions & 1 deletion docs/product/foundation/spots.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
layout: page
title: Spot illustrations
razor: https://razor.stackoverflow.design/components/spot
figma: https://www.figma.com/file/NxAqQAi9i5XsrZSm1WYj6tsM/Icons-and-Spot-Illustrations
description: Spot illustrations are the slightly grown up version of icons with a little more detail. They’re most often used in empty states and new product announcements. They’re built externally on the <a href="https://github.com/StackExchange/Stacks-Icons">Icons</a> repository.
---

Expand Down
1 change: 0 additions & 1 deletion docs/product/foundation/typography.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
---
layout: page
title: Typography
figma: https://www.figma.com/file/x5Q2TKTuTcFhK1FIeCq9dk/Typography
description: Stacks provides atomic classes to override default styling of typography. Change typographic weights, styles, and alignment with these atomic styles.
---
<section class="stacks-section">
Expand Down

0 comments on commit 9550917

Please sign in to comment.