Uptown CSS

The Beautiful Framework for Shopify Application Development

A semantic toolkit designed to help developers create responsive Shopify apps utilizing the Embedded App SDK.

Download CSS

Get just the stylesheet to quickly add within your project.

Download CSS

Download Source

Get the SASS files to customize the stylesheet.

Download Source

View on Github

Learn more about Uptown CSS or help contribute to the cause.

View Project

Overview

How to Use

Add the stylesheet to your project and begin writing the HTML for your app.

<link rel="stylesheet" href="uptown.css">

Source Dependencies

The framework is a single file that imports .scss files for each component.

SASS + Autoprefixer

Uptown CSS is built using SASS and the Autoprefixer plugin for powerful vendor prefixing.

Autoprefixer is awesome and eliminates the need for constantly checking Can I Use for cross-browser compatibility.

No JavaScript. None. Zero. Zilch.

There are no JavaScript dependencies. You're free to use any library since Uptown CSS is JS agnostic.

Developed By

Author

I'm Ryan O'Donnell, co-founder over at ShopPad and Mesa. Thousands of Shopify stores use apps from ShopPad and many of them are powered by Uptown CSS. Uptown is a framework has been battle-tested and is 100% production ready. Now we've open sourced it to share with Shopify's awesome developer community.

Love Uptown? Spread the word!

Sharing is caring.

Getting Started

Your markup should follow this basic structure. What you put inside each section, will depend on your app.

Source

Grid Structure

The grid is a 12-column fluid grid with a max width of 1036px, that shrinks with the browser/device at smaller sizes.

twelve

one

eleven

two

ten

three

nine

four

eight

five

seven

six

one-half

two-thirds

one-third

Source

<article> <div class="column twelve"> twelve </div> </article>  <article> <div class="columns two"> two </div> <div class="columns ten"> ten </div> </article>  <article> <div class="column one-half"> one-half </div> <div class="column one-half"> one-half </div> </article> <article> <div class="column two-thirds"> two-thirds </div> <div class="column one-third"> one-third </div> </article>

Cards

This element is the canvas to put your app content within.

Card

Source

Cards with sections

Add the class .has-sections to the .card element then just add .card-section elements with dividing <hr> tags.

Card Section

Source

<article> <div class="card has-sections"> <div class="card-section"> Card Section </div> <hr/> <div class="card-section"> Card Section </div> <hr/> <div class="card-section"> Card Section </div> </div> </article>

Layouts

Below are common layouts so you can quickly develop a familiar user experience.

Section Heading

content

Source

<aside> <h2>Aside Heading</h2> content </aside> <article> <div class="card"> <h5>Section Heading</h5> content </div> </article>

Full-width layout

Add the class .full-width to any element.

Card

Source

Layout with side column

A layout to show a main and side column.

Card

Source

Layout with secondary column

The class .secondary can be added to any .card to visually dimm that element.

Card

This card is slightly dimmed to give the primary card more visual importance

Source

<article> <div class="columns eight card"> Card </div> <div class="columns four card secondary"> This card is slightly dimmed to give the primary card more visual importance </div> </article>

Typography

Type is defined with rems, so font-sizes and spacial relationships can be responsively sized based on a single font-size property. All measurements are base 10 so an H1 with 4.0rem font-size just means 40px. The typography base is device driven; "San Francisco" for Apple devices and "Roboto", "Segoe UI" for Android device. "Helvetica Neue" is the fallback. Size is set at 1.4rem (14px). Other type basics like anchors, strong, emphasis, and underline are all included.

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Paragraph text

Anchor Bold Underline

Preformatted text

Code

Unordered list item
Unordered list item
- Unordered list item
- Unordered list item
- Unordered list item
Unordered list item

Ordered list item
Ordered list item
1. Ordered list item
2. Ordered list item
3. Ordered list item
Ordered list item

<h1>h1 Heading</h1> <h2>h2 Heading</h2> <h3>h3 Heading</h3> <h4>h4 Heading</h4> <h5>h5 Heading</h5> <h6>h6 Heading</h6> Paragraph text <a>Anchor</a> Bold Underline <pre>Preformatted text</pre> <code>Code</code> <ul> <li>Unordered list item</li> <li>Unordered list item <ul> <li>Unordered list item</li> <li>Unordered list item</li> <li>Unordered list item</li> </ul> </li> <li>Unordered list item</li> </ul> <ol> <li>Ordered list item</li> <li>Unordered list item <ol> <li>Unordered list item</li> <li>Unordered list item</li> <li>Unordered list item</li> </ol> </li> <li>Ordered list item</li> </ol>

Icons

Familiar icons are available and can be used on their own or within other elements.

Trash

Clock

Checkmark

Flag

Bell

Exclamation

Question

Prohibit

Product

Collection

Preview

Edit

Addition

Subtraction

Calendar

Add Circle

Orders

Globe

Funnel

Percent

Payment

Discount

Report

Customer

Gear

Apps

Themes

Post

Pages

Navigation

Account

Folder

Gift Cards

Cart

Inventory

Home

Image

Download

Upload

Paperclip

Undo

Redo

Arrow Left

Arrow Right

Close Circle

Refresh

Locked

Import

Export

Duplicate

Shipping

Taxes

Channels

Credit Card

Currency

Social

Wide

Narrow

Move Vertical

Move Horizontal

Typography

Color

Add Section

Drag Handle

Offsite

Buttons

Buttons support both the <button> and the <a> element. Only the <a> element requires a .button class to be appended. The button type is not a factor.

Button Elements

Anchor Elements Default Secondary Warning Disabled

<button>Default</button> <button class="secondary">Secondary</button> <button class="warning">Warning</button> <button disabled="disabled">Disabled</button> <button class="link">Link</button> <a href="#" class="button">Default</a> <a href="#" class="button secondary">Secondary</a> <a href="#" class="button warning">Warning</a> <a href="#" class="button disabled">Disabled</a>

Button Groups

Wrap any set of buttons within an element having a class of .button-group.

<span class="button-group"> <button class="secondary">Left</button> <button class="secondary">Middle</button> <button class="secondary">Right</button>

Icon Buttons

Add any supported icon without text. Disabled state is also supported to dim the icon color.

Form Fields

Standard form fields. Wrap radio and checkbox elements with a label element.

Label

Option Option

<div class="row"> <label>Label</label> <input type="text" /> </div> <div class="row"> <label><input type="radio" name="option1a" checked="checked">Option</label> <label><input type="radio" name="option1a">Option</label> </div> <div class="row"> <select><option>Select</option></select> </div> <div class="row"> <label><input type="checkbox" name="option2a" checked="checked">Option</label> <label><input type="checkbox" name="option2a">Option</label> </div> <div class="row"> <textarea></textarea> </div>

Form Fields: Disabled

Disabled form field states are supported too. Add a disabled="disabled" attribute to any form field.

Label

Option Option

<div class="row"> <label>Label</label> <input type="text" disabled="disabled" /> </div> <div class="row"> <label><input type="radio" name="option3a" checked="checked" disabled="disabled">Option</label> <label><input type="radio" name="option3a" disabled="disabled">Option</label> </div> <div class="row"> <select disabled="disabled"><option>Select</option></select> </div> <div class="row"> <label><input type="checkbox" name="option4a" checked="checked" disabled="disabled">Option</label> <label><input type="checkbox" name="option4a" disabled="disabled">Option</label> </div> <div class="row"> <textarea disabled="disabled"></textarea> </div>

Form Fields: Errors

Add .error class to the parent .row or to the <label> for checkboxes and radio elements.

Label

Option Option

<div class="row error"> <label>Label</label> <input type="text" /> </div> <div class="row"> <label><input type="radio" name="option5a" checked="checked">Option</label> <label class="error"><input type="radio" name="option5a">Option</label> </div> <div class="row error"> <select><option>Select</option></select> </div> <div class="row"> <label><input type="checkbox" name="option6a" checked="checked">Option</label> <label class="error"><input type="checkbox" name="option6a">Option</label> </div> <div class="row error"> <textarea></textarea> </div>

Search

Use the input type search. No extra classes required.

Side Elements

Add .side-elements to the parent .row element. All elements within will stretch automatically to be on a single line.

Label

<div class="row side-elements"> <label>Label</label> <input type="text" /> <button>Action</button> </div>

Advanced Form Element

The .label-cta class will pull any element to the right.

Label Link Context help text

<label>Label <a href="#" class="label-cta">Link</a></label> <input type="text" /> Context help text

Append Field Elements

Use an element with a class .input-group. Add elements with .append class. Place them before or after the form field.

Prefix

Suffix

$ .00

<div class="input-group"> <span class="append">Prefix <input type="text" /> </div> <div class="input-group"> <input type="text" /> <span class="append">Suffix </div> <div class="input-group"> <span class="append">$ <input type="text" /> <span class="append">.00 </div>

Append Field Buttons

Use an element with a class .input-group. Add <button> or .button elements. Place them before or after the form field.

<div class="input-group"> <input type="text" /> <button class="secondary">Button</button> </div> <div class="input-group"> <button class="secondary">Filter</button> <input type="text" /> <button class="secondary">Save</button> <button class="secondary icon-trash"></button> </div>

Hover Tips

Add a class .tip to any element. Add the tip's text as a data-hover attribute. The hover event will automatically pull the text without any JavaScript needed.

Paragraph Text

Lorem ipsum dolor consectetur adipiscing elit.

Links

Hover for a tip

Buttons

<a class="tip" href="#" data-hover="You found me!"> <button class="tip" data-hover="You rebel">Hover Me</button>

Alerts

The container element needs a class .alert. Add .notice, .success, .warning, .notification or .error for the desired icon and color. The <dl> element is for the title and description text. Adding a .close element or <button> elements are optional.

General Alert

General Alert with Close: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis leo purus, rhoncus id ultrices vitae, feugiat non neque.

General Alert with Button: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis leo purus, rhoncus id ultrices vitae. Learn More

Notice Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit leo purus, rhoncus id ultrices vitae.

Success Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit leo purus, rhoncus id ultrices vitae.

Warning Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit leo purus, rhoncus id ultrices vitae.

Notification Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit leo purus, rhoncus id ultrices vitae.

Error Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit leo purus, rhoncus id ultrices vitae.

<div class="alert"> <dl> <dt>General Alert</dt> </dl> </div> <div class="alert"> <a class="close" href="#"></a> <dl> <dt>General Alert with Close</dt> <dd>...</dd> </dl> </div> <div class="alert"> <dl> <dt>General Alert with Button</dt> <dd>... <a href="#">Learn More</a></dd> </dl> <button>Change</button> </div> <div class="alert notice"> <dl> <dt>Notice Alert</dt> <dd>...</dd> </dl> </div> <div class="alert success"> <dl> <dt>Success Alert</dt> <dd>...</dd> </dl> </div> <div class="alert warning"> <dl> <dt>Warning Alert</dt> <dd>...</dd> </dl> </div> <div class="alert notification"> <dl> <dt>Notification Alert</dt> <dd>...</dd> </dl> </div> <div class="alert error"> <dl> <dt>Error Alert</dt> <dd>...</dd> </dl> </div>

Tables

Default <table> containing various types of content. Add a container wrapper with a class .overflow-container if the table needs to be scrollable on smaller screens.

Product		Status	Action
	Some Product
	Another Product	This product has no images. This product has no description. This product must be at least $0.01.
	One More Product	This product must be at least $0.01.

Source

<table> <thead> <tr> <th colspan="2">Product</th> <th>Status</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td><a href="#"><img width="35" height="35" alt="" src="images/image-none.svg"></a></td> <td><a href="#">Some Product</a></td> <td></td> <td><button class="secondary icon-trash"></button></td> </tr> <tr> <td><a href="#"><img width="35" height="35" alt="" src="images/image-none.svg"></a></td> <td><a href="#">Another Product</a></td> <td><ul> <li>This product has no images.</li> <li>This product has no description.</li> <li>This product must be at least $0.01.</li> </ul></td> <td></td> </tr> <tr> <td><a href="#"><img width="35" height="35" alt="" src="images/image-none.svg"></a></td> <td><a href="#">One More Product</a></td> <td><ul> <li>This product must be at least $0.01.</li> </ul></td> <td></td> </tr> </tbody> </table>

Table with tags & buttons

Default <table> element showing buttons and tags elements.

	Product	Status
Text	Some Product	Approved
Text	Some Product	Pending
Text	Some Product	Paid

Source

<table> <thead> <tr> <th></th> <th>Product</th> <th>Status</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>Text</td> <td><a href="#">Some Product</a></td> <td><span class="tag yellow">Approved</td> <td><button class="secondary">Button</button></td> </tr> <tr> <td>Text</td> <td><a href="#">Some Product</a></td> <td><span class="tag orange">Pending</td> <td><button class="secondary">Button</button></td> </tr> <tr> <td>Text</td> <td><a href="#">Some Product</a></td> <td><span class="tag grey">Paid</td> <td><button class="secondary">Button</button></td> </tr> </tbody> </table>

Results Table

A <table> showing a list of results. Use the .pagination container around the .button-group.

Name	Location	Orders	Last Order	Total Spent
John Doe	Oakland, CA	1	#1001	$125.00
Jane Doe	Oakland, CA	0	—	$0.00
Mike Smith	San Francisco, CA	1	#1002	$100.00

Source

<table class="results"> <thead> <tr> <th>Name</th> <th>Location</th> <th>Orders</th> <th>Last Order</th> <th class="align-right">Total Spent</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>Oakland, CA</td> <td>1</td> <td><a href="#">#1001</a></td> <td class="align-right">$125.00</td> </tr> <tr> <td>Jane Doe</td> <td>Oakland, CA</td> <td>0</td> <td>&mdash;</td> <td class="align-right">$0.00</td> </tr> <tr> <td>Mike Smith</td> <td>San Francisco, CA</td> <td>1</td> <td><a href="#">#1002</a></td> <td class="align-right">$100.00</td> </tr> </tbody> </table> <div class="pagination"> <span class="button-group"> <button class="secondary icon-prev"></button> <button class="secondary icon-next"></button> </div>

Text Highlight

Use .highlight-warning to highlight any text.

Product	Inventory	Type
Adidas Running Show	5 in stock	Shoe
New Balance Running Show	12 in stock	Shoe
New Balance Running Show	60 in stock for 5 variants	Shoe

Source

Summary Report

Add .summary to a <table> element for this specific layout.

Heading Last 7 Days
Direct	67%	2
Search	33%	1

<table class="summary"> <thead> <th colspan="3">Heading Last 7 Days</th> </thead> <tbody> <tr> <td>Direct</td> <td>67%</td> <td>2</td> </tr> <tr> <td>Search</td> <td>33%</td> <td>1</td> </tr> </tbody> </table>

Pending Tags

Add the class .pending to display a clock icon to represent a "pending" state.

green yellow red grey orange blue

<span class="tag green pending">green <span class="tag yellow pending">yellow <span class="tag red pending">red <span class="tag grey pending">grey <span class="tag orange pending">orange <span class="tag blue pending">blue

Removable Tags

Primarily used with content not associated with forms.

green yellow red grey orange blue

<span class="tag green remove">green <a href="#"></a> <span class="tag yellow remove">yellow <a href="#"></a> <span class="tag red remove">red <a href="#"></a> <span class="tag grey remove">grey <a href="#"></a> <span class="tag orange remove">orange <a href="#"></a> <span class="tag blue remove">blue <a href="#"></a>

Tabs

Use a <ul> with the class .tabs directly after an element with the .has-sections class.

Content

<div class="columns has-sections card"> <ul class="tabs"> <li class="active"><a href="#">Tab 1</a></li> <li><a href="#">Tab 2</a></li> <li><a href="#">Tab 3</a></li> </ul> <div class="card-section"> Content </div> </div>

Utilities

Sometimes it's better to use a utility class than create a whole new class just to do something simple.

.full-width { width: 100%; max-width: 100%; box-sizing: border-box; } .max-full-width { max-width: 100%; box-sizing: border-box; } .align-center { text-align: center; } .align-left { text-align: left; } .align-right { text-align: right; } .highlight-warning { background: #FCF1CD; color: #ED6347; } .blue { color: #007ACE; } .green { color: #50B83C; } .yellow { color: #EEC200; } .red { color: #ED6347; } .grey { color: #DFE4E8; } .orange { color: #F49342; } .emphasis { font-weight: 600; color: hsl(0,0%,10%); } .subdued { font-weight: normal; color: hsl(0,0%,44%); } .hide-scrollbars { ::-webkit-scrollbar { display: none !important; width: 10px !important; height: 0 !important; } ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0); } } .overflow-container { overflow: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }

Header

Using the <header> is great opportunity to showcase the app's branding.

App Name

Headline text over your own background

A simple <header> element with an h1 and/or h2 element. The <article> directly after will automatically be pulled up

Source

<header> <h1>App Name</h1> <h2>Headline text over your own background</h2> </header> <article> ... </article>

Zero-state

Preferred layout option when you have nothing to show.

Heading

Some explanatory text

Source

<section class="zero-state full-width"> <article> <h1>Heading</h1> Some explanatory text <button>Action</button> </article> </section>

Lovingly Built By ShopPad

The Beautiful Framework for Shopify Application Development

Download CSS

Download Source

View on Github

Overview

How to Use

Source Dependencies

SASS + Autoprefixer

No JavaScript. None. Zero. Zilch.

Author

Love Uptown? Spread the word!

Getting Started

Source

Grid Structure

Source

Cards

Source

Cards with sections

Source

Layouts

Section Heading

Source

Full-width layout

Source

Layout with side column

Source

Layout with secondary column

Source

Typography

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Icons

Buttons

Button Groups

Icon Buttons

Form Fields

Form Fields: Disabled

Form Fields: Errors

Search

Side Elements

Advanced Form Element

Append Field Elements

Append Field Buttons

Hover Tips

Paragraph Text

Links

Buttons

Alerts

Tables

Source

Table with tags & buttons

Source

Results Table

Source

Text Highlight

Source

Summary Report

Tags

Pending Tags

Removable Tags

Tabs

Utilities

Header

Source

Zero-state

Heading

Source