Sparrow

Sparrow is a flexible, mobile-friendly theme for the Mashery Portal.

It looks great out-of-the-box, and includes features that make customization easy for non-technical users. If you're a developer, it includes a build system powered by Gulp and Sass.

View the Live Demo Portal.


The Sparrow Approach

Sparrow was built to be flexible and modular, with performance and accessibility in mind.

Mobile-First

Sparrow is built mobile-first. The base structure is a fully-fluid, single-column layout. It uses @media (min-width: whatever) to add a grid-based layout to bigger screens.

Think of it as progressive enhancement for the layout.

Sparrow also includes feature detection for things like SVG support. Just like the layout, those are served to browsers that support them, while fallback text is supplied to older and less capable browsers.

Object Oriented CSS

Sparrow takes an OOCSS approach to web development.

Throughout the stylesheet, you'll see base styles and modifying styles. For example, .btn sets the default button styles and behavior, while .btn-secondary changes the color and .btn-large changes the size. A big button with secondary colors would look like this:

<button class="btn btn-secondary btn-large">A Big Button</button>

Classes can be mixed, matched and reused throughout a project.


Browser Compatibility

Sparrow is optimized for modern browsers and IE 9+.

Vendor Prefixing

Sparrow uses Autoprefixer, and is configured to only add prefixes if required by the last two versions of a browser. If a feature isn't working (for example, the grid does not work in Firefox 28 and lower), it may simply need a vendor prefix.

For more details on when support for specific features were added to different browsers, consult Can I Use.


Copyright © 2017, TIBCO Software Inc. All rights reserved. The code is available under a BSD-type license.