Skip to content
This repository has been archived by the owner on Jan 10, 2022. It is now read-only.

Themes css

Jump to bottom
srsgores edited this page Dec 28, 2012 · 1 revision

Introduction & Preprocessors

Calipso, being based on NodeJS, should rely heavily on its ability to easily compile styles server-side. Other languages like PHP have this ability, but Node's performance has been proven to be more efficient, especially when it comes to preprocessing languages like LESS. For this reason, we strongly advise that you use a pre-processor for your theming, and the following guide will be explained using CSS Preprocessors.

SASS/SCSS

SASS is the preferred language for Calipso. The first theme for Calipso, titled cleanslate, was built using SASS. SASS offers the most flexibility when it comes to styling: loops, mixins, imports, logic, and more.

Setting up for SASS Styles

The recommended method is to download the SASS gem within Ruby. On Windows, Mac, and Linux, GUIs exist that do not require the ruby gem on the command-line. See Scout on Windows or Mac, CodeKit on Mac, or Compass.app on Windows, Mac, or Linux. Once a GUI for SCSS has been installed, set your output folder to the /css directory within your public\css folder.

Creating a new Theme

Although Calipso has built-in commands which can instantly create themes, we advise copying an existing theme like cleanslate for theme creation into a new folder. Once this is done, you will have files like variables.scss and grids.scss to aid you in your style creation, and in your theme's HTML markup. This is a very important step because a consistent markup will lead to less styles; using the pre-existing classes in other themes allows for the user to potentially switch themes without having to worry about their site's markup.

LESS

LESS is another alternative to SASS, which offers more in-browser additions to SASS but lacks its flexibility code-wise. If you want to use LESS, you will need a mixins.less file. There are many of these available, so we welcome you to look for one. In future releases, you can look forward to seeing one integrated into a theme.

BootStrap

Although it is probably tempting to use Bootstrap, given you're using LESS, we strongly caution against using it. Bootstrap markup is not good HTML5 markup. It relies heavily on client-side Javascript, which is not the best thing when we're using Node. Rather, we urge you to use semantic, accurate HTML markup; your selectors should be lean, efficient, and not overly complex.

Stylus and Others

Coming soon. Please contribute if you know about this.

Styling Tips

  • Don't use px. Please don't. Use ems, dpi, dpp or any of the other depth-specific measurements.
  • Use min-width and max-width in combination with width to accomodate for all screen sizes
  • Use media queries. Take our media-queries.scss file as a good example. Don't worry about IE; you can get that working with Respond or Modernizr.
  • Worry about IE later. Don't test for IE6 until you're confident your styles look good in Chrome or FF.
  • Don't use images. If you want icons, use icomoon. And please include your session.json file to let users of your theme customize further. Furthermore, access your icons through the variables file, including all your icon ascii characters corresponding to their icon class. For example icon-write may correspond to a certain content value of "\e127". For gradients, don't use pngs or anything; just use the css3 gradients.
Clone this wiki locally