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. Tweet Star Fork

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 six one-half one-half two-thirds one-third Source twelve two ten one-half one-half two-thirds one-third

Cards This element is the canvas to put your app content within. Card Source Card Cards with sections Add the class .has-sections to the .card element then just add .card-section elements with dividing <hr> tags. Card Section Card Section Card Section Source Card Section Card Section Card Section

Layouts Below are common layouts so you can quickly develop a familiar user experience. Aside Heading content Section Heading content Source Aside Heading content Section Heading content Full-width layout Add the class .full-width to any element. Card Source Card Layout with side column A layout to show a main and side column. Card Card Source Card Card 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 Card This card is slightly dimmed to give the primary card more visual importance

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 Ordered list item Ordered list item Ordered list item Ordered list item 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 Unordered list item Unordered list item Unordered list item Unordered list item Ordered list item

Icons Familiar icons are available and can be used on their own or within other elements. Prev Next Trash Clock Close Checkmark Search 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 Email Refresh Locked Print Import Export Duplicate Share 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 Default Secondary Warning Disabled Link Anchor Elements Default Secondary Warning Disabled Default Secondary Warning Disabled Link Default Secondary Warning Disabled Button Groups Wrap any set of buttons within an element having a class of .button-group . Left Middle Right Import Export Left Middle Right 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 Select Option Option Label Option Option Select Option Option Form Fields: Disabled Disabled form field states are supported too. Add a disabled="disabled" attribute to any form field. Label Option Option Select Option Option Label Option Option Select Option Option Form Fields: Errors Add .error class to the parent .row or to the <label> for checkboxes and radio elements. Label Option Option Select Option Option Label Option Option Select Option Option 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 Action Label Action Advanced Form Element The .label-cta class will pull any element to the right. Label Link Context help text Context help text Label Link 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 Prefix Suffix $ .00 Append Field Buttons Use an element with a class .input-group . Add <button> or .button elements. Place them before or after the form field. Button Filter Save Button Filter Save

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 Hover Me Hover Me