Ember style guide

About this guide

This is the style guide for the Ember theme. Not all of it has yet been implemented. Your help is welcome!

Color

The colors in Ember theme are derived from the Acquia brand colors since Ember is (or will be) the theme for all Acquia sponsored distributions.

Color

Buttons and links

Links are in flux right now and the styling will probably change. Don't write any patches to CSS on links until further notice.

SASS and COMPASS

Most hardcore developers prefer using a CSS preprocessor over a GUI based tool. For those people we have the SASS Kalatheme project on github. You can check out the installation documentation over there.

Here is some more info about this project

Panels Layouts

Kalatheme makes extensive use of panels layouts to power the structure of most of your content. However, Kalatheme does not ship with any panels layouts by default. As such we highly recommend you make use of Panopoly Theme to get a bunch of great layouts that will work automatically with the Bootstrap responsive grid. To learn more about panels layouts and how to create custom ones check this out.

Theming with One Region

You might be used to seeing themes with an excessive amount of template files. With Kalatheme we try to keep things simple. What this means in practical terms is you will have most of the static elements for your site like a header in your page.tpl.php file while everything else on your page will be governed with panels layouts... specifically those provided by Panopoly Theme.

Dynamic Grid System

One of the really neat things about Kalatheme 3 is its support for ANY GRID SIZE. And, by any grid size we actually mean up to 99 columns which is where Bootstrap's customization tool starts to have issues. If you want something larger than that you probably can manually add more but you also probably have other issues with which you need to deal first.

Styles Plugin

Continuing the award winning pictorial series begun with Responsive Toggling this will mostly be an imaged based tutorial.

  1. Create some custom styles. These can be as simple or complex as you want them to be. I've created a somewhat complex one here in the example below.
  2. code science

Pages

Subscribe with RSS Subscribe to RSS - Designers/themers