Floating Labels

Components

Supersonic provides you with a huge bunch of CSS components – just look at the list on the left! However, there are some components that you would traditionally implement via HTML5 in a hybrid app that are fully native in Supersonic.

You can still style native components with CSS and some of them are even available as special HTML elements. However, there's a bunch of differences you need to know about, so we've put more extensive docs under a different section: see Native Components for more.

For convenience, we've listed below the UI components that are implemented natively in Supersonic.

Tab Bar

Supersonic implements a fully native tab bar. You define it declaratively in your app's config files, and each tab contains its own HTML document. This means switching between them is instantaneous.

Read more in the Tab Bar documentation.

Note: you can still use the CSS tabs as elements inside your HTML content, but they shouldn't be used for main navigation. See tabs for more information.

Drawers

Supersonic implements a fully native drawer or side menu. It is a container that is revealed either via JavaScript or by swiping your finger across the screen. It is defined declaratively in your app's config files. A drawer contains its own HTML document, meaning you can customize it fully.

Read more in the Drawers documentation.

Content

The content area in Supersonic equals your whole HTML document: there's no need for a separate content class or similar. This is possible because the navigation bar and tab bar are rendered on the native side, always in the right location.

<super-navbar>
  <super-navbar-title>Content</super-navbar-title>
</super-navbar>

<div class="padding">
  <h1>I'm an H1!</h1>
  <h2>I'm an H2!</h2>
  <h3>I'm an H3!</h3>
  <h4>I'm an H4!</h4>
  <h5>I'm an H5!</h5>
  <h6>I'm an H6!</h6>
  <p>I'm a paragraph with a <a href="#">link</a>!</p>
</div>
Content

I'm an H1!

I'm an H2!

I'm an H3!

I'm an H4!

I'm an H5!
I'm an H6!

I'm a paragraph with a link!

Buttons

Ah, the Button, an essential part of any mobile experience. They come in the full spectrum of Supersonic's default colors.

By default a button has display: inline-block applied. Other options include block buttons for a full width.

<button class="button">
  Default
</button>

<button class="button button-light">
  button-light
</button>

<button class="button button-stable">
  button-stable
</button>

<button class="button button-positive">
  button-positive
</button>

<button class="button button-calm">
  button-calm
</button>

<button class="button button-balanced">
  button-balanced
</button>

<button class="button button-energized">
  button-energized
</button>

<button class="button button-assertive">
  button-assertive
</button>

<button class="button button-royal">
  button-royal
</button>

<button class="button button-dark">
  button-dark
</button>
Buttons

Block Buttons

Adding button-block to a button applies display: block display. A block button will however go 100% of its parent's width. In the example, the button's containing content element also has padding applied, so there is some breathing room between the edge of the device and the buttons.

<button class="button button-block button-positive">
  Block Button
</button>
Block Buttons

Full Width Block Buttons

Adding button-full to a button not only applies display: block, but also removes borders on the left and right, and any border-radius which may be applied. This style is useful when the button should stretch across the entire width of the display. Additionally, the button's parent element does not have padding applied.

<button class="button button-full button-positive">
  Full Width Block Button
</button>
Full Width Block Buttons

Different Sizes

Adding button-large to a button makes it larger, adding button-small makes it smaller.

<button class="button button-small button-assertive">
  Small Button
</button>
<button class="button button-large button-positive">
  Large Button
</button>
Small and Large Buttons

Outlined Buttons

Use button-outline to apply an outline button style, which also has a transparent background.

Note: The text and border will take the color of the applied button style, meaning button-positive will result in blue text and border, with a transparent background.

<button class="button button-outline button-positive">
  Outlined Button
</button>
Outlined Buttons

Clear Buttons

Add button-clear to remove the border and make the text stand out.

Note: The text will take the color of the applied button style, meaning button-positive will result in blue text and no border instead of a blue background.

<button class="button button-clear button-positive">
  Clear Button
</button>
Clear Buttons

Icon Buttons

Icons can easily be added to any button by using either the built-in Supersonicons (a fork of Ionicons), or any custom font-pack you choose. Learn more about icons.

Icons can also be set with a child element inside the button, however, assigning the icon directly to the button reduces the number of elements in the DOM.

<button class="button">
  <i class="icon super-loading-c"></i> Loading...
</button>

<button class="button icon-left super-home">Home</button>

<button class="button icon-left super-star button-positive">Favorites</button>

<a class="button icon-right super-chevron-right button-calm">Learn More</a>

<a class="button icon-left super-chevron-left button-clear button-dark">Back</a>

<button class="button icon super-gear-a"></button>

<a class="button button-icon icon super-settings"></a>

<a class="button button-outline icon-right super-navicon button-balanced">Reorder</a>
Icon Buttons

Learn More

Back

Reorder

Button Bar

Buttons can also be easily grouped together using the button-bar classname. In this example, a button bar was added to the default header bar, as well as in the main content area of the screen.

<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>

List

The List is a common and simple way of displaying... that's right, a list. This is a widely used interface across most current mobile OS's, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.

The list view is a very versitile and powerful component. List views support various interaction modes such as editing, swipe to edit, drag to reorder, and pull to refresh.

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>
List Items
  • Battletoads
  • Contra
  • Duck Tales
  • Mega Man
  • Metroid
  • Mike Tyson's Punch-Out
  • R.C. Pro-Am
  • Spy Hunter
  • Super Mario Bros.
  • The Legend of Zelda

List Dividers

List items can also be dividers to organize and group the list items. Use the item-divider class to create a divider for any child element of the list. By default list item dividers will have a different background color and font-weight, but this is easily customizable.

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

List Icons

Lists can have icons assigned either to the left and/or right side of each list item, and the alignment classes should be assigned to each item element. Icons can easily be added to any item by using either the built in Supersonicons, or any custom font-pack you choose. Learn more about icons.

Use item-icon-left to line up the icon to the left, and item-icon-right to set the icon to the right. When a list item has an icon on both sides then both classes will need to be applied.

This example uses an <a> element for each item, which allows the entire list item to be tappable. If the item is an <a> or <button> element, and no icon has been added to the right, then a small right arrow will automatically be added.

In the example, the first item only has a left aligned icon. The second item has both left and right side icons. The third item has no a right side icon assigned (whichs defaults to the right arrow). Additionally, the third item also adds an item-note. The fourth icon has added a badge element.

<div class="list">

  <a class="item item-icon-left" href="#">
    <i class="icon super-email"></i>
    Check mail
  </a>

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon super-chatbubble-working"></i>
    Call Ma
    <i class="icon super-ios-telephone-outline"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon super-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon super-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>

</div>

List Buttons

Use item-button-right or item-button-left to place a button within an item.

<div class="list">

  <div class="item item-button-right">
    Call Ma
    <button class="button button-positive">
      <i class="icon super-ios-telephone"></i>
    </button>
  </div>

  ...

</div>
List Buttons
Call Ma

Item Avatars

Item avatars are essentially a showcase of an image larger than an icon, but smaller than a thumbnail. To create a avatar item, use the item-avatar classname.

<div class="list">

    <a class="item item-avatar" href="#">
      <img src="venkman.jpg">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </a>

    ...

</div>

Item Thumbnails

Item Thumbnails are essentially a showcase of an image larger than an icon, and will often span/define the entire height of the list item. To create a thumbnail styled item, use the item-thumbnail-left to have it align on the left, and item-thumbnail-right for the right side.

<div class="list">

    <a class="item item-thumbnail-left" href="#">
      <img src="cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>

    ...

</div>

Inset Lists

Lists can also be inset inside their container, instead of going full width. The main difference is that a list list-inset element has margin. An inset list is similar to a card, except an inset list does not have a box-shadow. Since list list-inset does not have a box-shadow, it'll be more performant when scrolling. Inset forms shows other examples of its usage.

<div class="list list-inset">

    <div class="item">
      Raiders of the Lost Ark
    </div>

    ...

</div>
Inset Lists
Raiders of the Lost Ark
Temple of Doom
Last Crusade
Kingdom of the Crystal Skull

Cards

Cards have become widely used in recent years. They're are a great way to contain and organize information, while also setting up predictable expectations for the user. With so much content to display at once, and often so little screen realestate, cards have fast become the design pattern of choice for many companies, including the likes of Google, Twitter, and Spotify..

For mobile experiences, Cards make it easy to display the same information visually across many different screen sizes. They allow for more control, are flexible, and can even be animated. Cards are usually placed on top of one another, but they can also be used like a "page" and swiped between, left and right.

<div class="card">
  <div class="item item-text-wrap">
    This is a basic Card which contains an item that has wrapping text.
  </div>
</div>

Cards add a box-shadow by default, whereas it's cousin list list-inset does not. For performance reasons, when scrolling a large card with many items its recommended to use inset lists instead.

Cards
This is a basic Card which contains an item that has wrapping text.

Card Headers and Footers

Cards can be customized similarly to how you would fill a normal screen. For example, a card can easily have Headers and Footers placed inside of them. Add the item-divider classname above or below the content within the card element.

<div class="card">
  <div class="item item-divider">
    I'm a Header in a Card!
  </div>
  <div class="item item-text-wrap">
    This is a basic Card with some text.
  </div>
  <div class="item item-divider">
    I'm a Footer in a Card!
  </div>
</div>
Cards
I'm a Header in a Card!
This is a basic Card with some text.
I'm a Footer in a Card!

Card Lists

Use the list card classname to create a card with lists.

<div class="list card">

  <a href="#" class="item item-icon-left">
    <i class="icon super-home"></i>
    Enter home address
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon super-ios-telephone"></i>
    Enter phone number
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon super-wifi"></i>
    Enter wireless password
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon super-card"></i>
    Enter card information
  </a>

</div>

Card Images

Images look great in cards, and can be combined with lists and other elements.

<div class="list card">

  <div class="item item-avatar">
    <img src="avatar.jpg">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image">
    <img src="cover.jpg">
  </div>

  <a class="item item-icon-left assertive" href="#">
    <i class="icon super-music-note"></i>
    Start listening
  </a>

</div>
Cards

Pretty Hate Machine

Nine Inch Nails

Start listening

Card Showcase

Here is a showcase of a card using several different items. It uses the list card element, utilizing the item-avatar list item and an item-body element for images and text.

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg">
    <p>
      This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
      and the content is from a card-body consisting of an image and paragraph text.
    </p>
    <p>
      <a href="#" class="subdued">1 Like</a>
      <a href="#" class="subdued">5 Comments</a>
    </p>
  </div>

</div>
Cards

Marty McFly

November 05, 1955

This is a "Facebook" styled Card. The header is created from a Thumbnail List item, and the content is from a card-body consisting of an image and paragraph text.

1 Like 5 Comments

Forms & Inputs

A list is also used to group related input elements. Both item-input and item is then used to designate each individual input field and it's associated label.

Supersonic prefers to create the item-input out of the <label> element so that when any part of the row is tapped then the underlying input receives focus.

Additionally, developers should be aware of the various HTML5 Input types so users will be presented with the appropriate virtual keyboard.

Forms

Text Input: Placeholder Labels

In the example, it'll default to 100% width (no borders on the left and right), and uses the placeholder attribute to simulate the input's label. Then the user begins to enter text into the input the placeholder label will be hidden. Notice how <textarea> can also be used as a multi-line text input.

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div>
Placeholder Labels

Text Input: Inline Labels

Use input-label to place a label to the left of the input element. When the user enters text the label does not hide. Note that there's nothing stopping you from also using a placeholder label too.

<div class="list">
  <label class="item item-input">
    <span class="input-label">Username</span>
    <input type="text">
  </label>
  <label class="item item-input">
    <span class="input-label">Password</span>
    <input type="password">
  </label>
</div>
Inline Labels

Text Input: Stacked Labels

Stacked labels always places the label on top of the input. Each item should have item-stacked-label assigned, and the input's label should have input-label assigned. This example also uses the placeholder attribute so user's have a hint of what type of text the input is looking for.

<div class="list">
  <label class="item item-input item-stacked-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="John">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Suhr">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="john@suhr.com">
  </label>
</div>
Stacked Labels

Text Input: Floating Labels

Floating labels are just like Stacked Labels, except that their labels animate, or "float" up when text is entered in the input. Each item should have item-floating-label assigned, and the input's label should have input-label assigned.

Enter text in the example to the right to see the floating labels in action. This example also uses the placeholder attribute so user's have a hint of what type of text the input is looking for.

<div class="list">
  <label class="item item-input item-floating-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="Email">
  </label>
</div>

Inset Forms

By default each input item will fill 100% of the width of its parent element (the list). However, you can inset the list using either the list list-inset or card classnames. The card classname applies a lower box shadow while list-inset does not. Additionally, if the list's parent element has padding assigned then this will also give the form an inset appearance.

<div class="list list-inset">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
</div>
Inset Forms

Inset Inputs

Using list-inset will inset the entire list, whereas placing item-input-inset will inset an input into an individual list item. Placing a button inside the item

<div class="list">

  <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Email">
    </label>
    <button class="button button-small">
      Submit
    </button>
  </div>

</div>
Inset Inputs

Input Icons

Icons can be easily added to the left of an item-input input. Simply add an icon before the <input>. By default the icon will take the color of label text. However, you can also use add placeholder-icon to give it a placeholder color.

<div class="list list-inset">
  <label class="item item-input">
    <i class="icon super-search placeholder-icon"></i>
    <input type="text" placeholder="Search">
  </label>
</div>
Input Icons

Header Inputs

Inputs can also be placed in headers, along with buttons to submit or cancel the form.

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon super-ios-search placeholder-icon"></i>
    <input type="search" placeholder="Search">
  </label>
  <button class="button button-clear">
    Cancel
  </button>
</div>

Toggle

A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Supersonic prefers to wrap the checkbox input with the <label> in order to make the entire toggle easy to tap or drag.

Toggles can also have colors assigned to them, such as toggle-assertive to assign the assertive color.

<label class="toggle">
   <input type="checkbox">
   <div class="track">
     <div class="handle"></div>
   </div>
</label>

This is an example of multiple toggles within a list. Note the item-toggle class was added along side item for each item.

<ul class="list">

  <li class="item item-toggle">
     HTML5
     <label class="toggle toggle-assertive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

  ...

</ul>
Toggle
  • HTML5
  • CSS3
  • Flashplayer
  • Java Applets
  • JavaScript
  • Silverlight
  • Web Components

Checkbox

A checkbox is no different than the HTML checkbox input, except it's styled differently. This is an example of multiple checkboxes within a list. Note the item-checkbox class was added along side item for each item.

Supersonic prefers to use the <label> element for a checkbox item in order to make the entire checkbox tappable.

Checkboxes can also have colors assigned to them, such as checkbox-assertive to assign the assertive color.

<ul class="list">

  <li class="item item-checkbox">
     <label class="checkbox">
       <input type="checkbox">
     </label>
     Flux Capacitor
  </li>

  ...

</ul>
Checkbox
  • Flux Capacitor
  • 1.21 Gigawatts
  • Delorean
  • 88 MPH
  • Plutonium Resupply

Radio Button List

Radio buttons act no differently as standard radio input elements. Following this convention will display a list of radio buttons similarly seen in modern app.

Each item-radio must have a radio input with the same input name attribute. The radio-icon class is used to designate when to show and hide the icon element.

Supersonic prefers to use the <label> element for a radio item in order to make the entire area tappable.

<div class="list">

  <label class="item item-radio">
    <input type="radio" name="group">
    <div class="item-content">
      Go
    </div>
    <i class="radio-icon super-checkmark"></i>
  </label>

  ...

</div>
Radio Button List

Range

This is a Range. Ranges can be themed to any default Supersonic color, and used in various other elements such as a list item or card.

<div class="range">
  <i class="icon super-volume-low"></i>
  <input type="range" name="volume">
  <i class="icon super-volume-high"></i>
</div>

<div class="list">
  <div class="item range range-positive">
    <i class="icon super-ios-sunny-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon super-ios-sunny"></i>
  </div>
</div>
Range
Ranges In A List

Select

Supersonic's select is styled so its appearance is prettied up relative to the browser's default style. However, when the select elements is opened, the default behavior on how to select one of the options is still managed by the browser.

Each platform's user-interface will be different as the user is selecting an option. For example, on a desktop browser you'll see the traditional drop down interface, whereas Android often has a radio-button list popup, and iOS has a custom scroller covering the bottom half of the window.

<div class="list">

  <label class="item item-input item-select">
    <div class="input-label">
      Lightsaber
    </div>
    <select>
      <option>Blue</option>
      <option selected>Green</option>
      <option>Red</option>
    </select>
  </label>

</div>
Select
Lightsaber
Fighter
Droid
Planet

Grid

Supersonic's grid system is different than most because of its use of the CSS Flexible Box Layout Module standard. The advantage here is that the devices that Supersonic supports, all support flexbox.

Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There's no restriction to a 12 column grid, or having to explicitly state how large each column should be. And to add to the crazy, you can vertically align content within each column.

Use the row classname is used to designate, surprise, a row, and col is used for a column. In the demo to the right we chose to have four, then two, columns, but we could have just as easily used 3, 6, 7, 23, etc., it doesn't matter. Point is, add the number of columns your layout requires and don't worry about figuring out the percentages because it figures it out automagically.

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Grid
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3

Grid: Evenly Spaced Columns

By default every col added inside a row will automatically receive an equal amount of the available area. Notice in the code below that no sizes are specified anywhere in the classnames, yet each of the five columns in this example will each evenly take up 20% of the available width (thank you flexbox).

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Evenly Spaced Columns
.col
.col
.col
.col
.col

Grid: Explicit Column Sizes

You can explicitly state the size of a column if for example you'd want specific columns to be larger than the others in the same row. By default each column will evenly take up the available area, but in the case where a column should be a certain size, Supersonic's grid uses a percent system (in contrast to a locked in 12 column grid).

An advantage with this grid system is that you only have to state the percentage for the column that needs it, and the others will still evenly divide up the available areas.

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Explicit Column Percentage Classnames
.col-10 10%
.col-20 20%
.col-25 25%
.col-33 33.3333%
.col-50 50%
.col-67 66.6666%
.col-75 75%
.col-80 80%
.col-90 90%
Explicit Column Sizes
.col.col-50
.col
.col
.col.col-75
.col
.col
.col.col-75
.col
.col

Grid: Offset Columns

Columns can also be offset from the left. We'll let the code and demo speak for itself.

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-33">.col</div>
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row">
  <div class="col col-33 col-offset-67">.col</div>
</div>

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Offset Column Percentage Classnames
.col-offset-10 10%
.col-offset-20 20%
.col-offset-25 25%
.col-offset-33 33.3333%
.col-offset-50 50%
.col-offset-67 66.6666%
.col-offset-75 75%
.col-offset-80 80%
.col-offset-90 90%
Offset Columns
.col
.col
.col
.col
.col

Grid: Vertically Align Columns

Another trick up flexbox's sleeve is the ability to easily vertically align columns. Vertical alignment includes top, center and bottom, and can be applied to every column in a row, or to specific columns.

In the demo, we've made the last column in each row to have the tallest content in order to demonstrate how the content of the others vertically align. The first row shows the default which is to take the same height as the tallest column in the same row.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Vertically Aligned Columns
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4

Responsive Grid

There may be cases where a row of columns will not fit nicely in the available area. The responsive classes can be used to turn each column in a row into its own row at certain breakpoints.

For example, if you want a row of columns to turn in to stacked rows when the viewport is pretty small, you would use the .responsive-sm class. The example to the right is a simulation of what it'd look like.

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Note: The borders and gray background in the demo were added so it's easier to see the structure.

Responsive Class Break when roughly
.responsive-sm Smaller than landscape phone
.responsive-md Smaller than portrait tablet
.responsive-lg Smaller than landscape tablet

For further configuration, each class uses a Sass variable that can be changed to your liking. There's also a responsive-grid-break mixin you can use to create your own classes.

Responsive Grid
.col
.col
.col
.col

Utility

Supersonic comes with a handful of utility classes to help quickly style your design. Each are optional.

Colors

Supersonic comes with a set of colors to start with, but as a general rule colors are meant to be overridden. We prefer saying that Supersonic provides a recommended naming convention for your colors, swatches, themes, etc.

Utility colors are added to help set a naming convention. You'll notice Supersonic purposely does not use words like "red" or "blue", but instead have colors which represent an emotion or generic theme.

Let's be realistic, assigning colors is one of the easier tasks in CSS, and each app will have different requirements for colors. Supersonic's goal is to provide a clean system to build on top of and maintain, and stays away from dictating how each app chooses to color its custom design.

To customize the colors you can simply override those coming from the ionic.css CSS file. Additionally, since Supersonic is built using Sass, for more power and flexibility you could also modify and extend the color variables within the _variables.scss file.

Utility Colors
  • light
  • stable
  • positive
  • calm
  • balanced
  • energized
  • assertive
  • royal
  • dark

Icons

Supersonic also comes with a free and open-sourced icon font called Supersonicons (forked from Ionicons), with over 500 icons to choose from.

Simply add icon and the classname for the icon to show. The classnames can easily be looked up on the Ionicons homepage.

Note: Supersonicons use the super- prefix instead of the ion- prefix, so when referencing an icon, simply replace the prefix: e.g. ion-star becomes super-star.

<i class="icon super-star"></i>

While it's possible for buttons to use a child <i> to set the icon, they can also set their icon just by setting the buttons own class. Please take a look at button icon docs for more info.

Note: Supersonic is certainly not restricted to using only the Supersonicons pack, so please feel free to use any icons you wish.

Supersonicons

Padding

Many components in Supersonic purposely have both padding and margin reset set to zero. In many instances apps will have components bleed to the edge of the screen, and by starting each component at zero developers can easily control padding and margins throughout the app.

The padding utility classes can be reused to give any element's content some breathing room, meaning it adds a default 10px between the outer box of the element and its inner content. The following classes are not required for any element, but may be helpful with your layout.

  • padding Adds padding around every side.
  • padding-vertical Adds padding to the top and bottom.
  • padding-horizontal Adds padding to the left and right.
  • padding-top Adds padding to the top.
  • padding-right Adds padding to the right.
  • padding-bottom Adds padding to the bottom.
  • padding-left Adds padding to the left.
Padding

The gray square represents an element, and the blue square represents the element's content when padding has been applied.