2 #permalink Atoms
Atoms are the abstract basic building blocks of matter. Applied to web interfaces, atoms are the HTML tags, such as a form label, an input or a button. They can’t be broken down any further.
scss/_atoms.scss, line 1
2.1 #permalink Buttons
Buttons are tools that enable users to perform a task. Some tasks are more important than others, and creating effective buttons with the right combination of size, color, position and wording is required. Good design can subconsciously communicate priority to users. Using the right combination of these components buttons will guide the user through the tasks required to achieve the main purpose or use case of a website.
scss/_atoms.scss, line 9
2.1.1 #permalink Primary buttons
The primary action is generally the action that completes a task or desired action. Primary buttons use bright and use saturated colors to provide stronger visual weight that catches the users attention to avoid confusion and competing with secondary actions.
Markup
<button class="btn btn-primary">primary button</button>scss/atoms/_buttons.scss, line 157
2.1.2 #permalink Secondary buttons
A secondary action is not as important as a primary action. You should give secondary buttons less visual weight than primary actions. Less saturated colors are used on secondary buttons resulting in distinguishable buttons that don't stand out as much as primary buttons.
Markup
<button class="btn btn-secondary">secondary button</button>scss/atoms/_buttons.scss, line 190
Markup
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>scss/atoms/_buttons.scss, line 203
Markup
<button type="button" class="btn btn-primary btn-loading">Primary</button>
<button type="button" class="btn btn-secondary btn-loading">Secondary</button>scss/atoms/_buttons.scss, line 234
Markup
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Normal button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>scss/atoms/_buttons.scss, line 263
Markup
<div>
<button type="button" class="btn btn-header-list">Sort by</button>
<button type="button" class="btn btn-header-list">Filters</button>
</div>scss/atoms/_buttons.scss, line 274
2.2 #permalink Icons
Font Awesome is the main mechanism to add icons to our Shopify theme, however, sometimes SVG are used for specific contents.
Check the following document for implementation details: Icons Guidelines
Markup
<i class="fal fa-chevron-left"></i>
<i class="fal fa-chevron-right"></i>
<i class="fal fa-search"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-youtube"></i>scss/_atoms.scss, line 17
2.3 #permalink Typography
This sections refers to the text that appears within a user interface. Users rarely read every word on a page. Thus, creating visual hierarchy is essential for users to understand the information. It also impacts how users scan a website. To make copy scannable you should provide good contrast between the different elements. This creates different focus points and guides the user through the content. For example, highlighting links and bolding important information creates scannable focus-points. Poor contrast results in users getting lost in the content and causes them to scan more slowly.
scss/_atoms.scss, line 33
h1. Buying shapewear you love should never hurt
h2. Buying shapewear you love should never hurt
h3. Buying shapewear you love should never hurt
h4. Buying shapewear you love should never hurt
Markup
<h1>h1. Buying shapewear you love should never hurt</h1>
<h2>h2. Buying shapewear you love should never hurt</h2>
<h3>h3. Buying shapewear you love should never hurt</h3>
<h4>h4. Buying shapewear you love should never hurt</h4>scss/atoms/_typography.scss, line 1
Meet Venus de Milo’s Fave Shapewear
She’s been wearing them since she birthed Cupid - arrows and all!
Markup
<h1 class="hero-banner__title">Meet Venus de Milo’s Fave Shapewear</h1>
<h2 class="hero-banner__subtitle">She’s been wearing them since she birthed Cupid - arrows and all!</h2>scss/atoms/_typography.scss, line 55
Hello, body! Meet your new fave boyshort. Combine the functionality of regular underwear with the power of lightweight shapewear and you’ve got yourself the Empetua™ Everyday Smoothing Boyshort. Now with more butt shaping!
Markup
<p>Hello, <b>body</b>! Meet your new fave boyshort. Combine the functionality
of regular underwear with the power of lightweight shapewear and you’ve got
yourself the Empetua™ Everyday Smoothing Boyshort. <i>Now with more butt shaping!</i></p>scss/atoms/_typography.scss, line 87
Markup
<a href="#">About Us</a>scss/atoms/_typography.scss, line 106
Markup
<a class="link--in-text" href="#">Underline Link</a>scss/atoms/_typography.scss, line 129
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
Markup
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>scss/atoms/_typography.scss, line 151
Markup
<ins class="price">$29.99</ins>
<del class="price--original">$39.99</del>scss/atoms/_typography.scss, line 181
Markup
<span class="discount-tag"><span>40%</span> OFF</span>scss/atoms/_typography.scss, line 212
2.4 #permalink Form Elements
Web forms establish or enhance a relationship between the user and the organization. They establish a dialogue and, therefore, represent a two way communication between two parties. Form elements enable this communication.
scss/_atoms.scss, line 45
Markup
<label>Color:</label><br>
<label>Size:</label>scss/atoms/_form-elements.scss, line 1
Markup
<span class="tag-selector">All</span><span class="tag-selector active">Panties</span><span class="tag-selector">Shorts</span>scss/atoms/_form-elements.scss, line 16
Markup
<span class="free-gift-label">Free gift</span>scss/atoms/_form-elements.scss, line 38