⇒⇒ Scally is no longer actively maintained. To see a more modern version take a look at my latest open source CSS library: backpack.css. ⇐⇐

<img src="https://s3.amazonaws.com/uploads.hipchat.com/22262/1524600/v5mEk1ipcZgcLoK/logo.png" width="211">

Contents

• What is Scally?
• Demos
• Scally architecture
• Dependencies
• Installing Scally
  • Packages
  • Git clone
  • Download by zip
• Setting up a new project
  • Setting up your master stylesheet
  • Master stylesheet overview
    • Your settings
    • Scally framework
    • Your styles
    • Sample master stylesheet
    • Example architecture
• Browser support
• Authoring guidelines
  • Linting
  • Installation
  • Linting rules
• Contributing
  • Keep it simple
  • Submitting code to Scally
  • Scally GitHub issues
• Versioning
• Credits
• License
• Further documentation

What is Scally?

Scally is a Sass-based, BEM, OOCSS, responsive-ready, CSS framework that provides you with a solid foundation for building reusable UIs quickly. It is a framework focused on scalability and reuse; there when you need it and getting out of your way when you don't.

Scally is designed to be configurable, only requiring you to bring in the parts you are using, keeping your CSS architecture lightweight and scalable. It is un-opinionated about design, thus giving you more flexibility than your typical UI toolkit.

Demos

A website—featuring demos of everything in Scally—is under construction.

So far demos of the Core/Base section are available: http://scally.chris-pearce.me/documentation/core.html.

Scally architecture

Scally is broken down into five main sections, with each section getting its own level of specificity. This means each one builds on top of the other in terms of inheritance and CSS' first C: the cascade. Think of these sections as layers:

<img src="https://dl.dropboxusercontent.com/s/t15yhbxkjxsgxvl/layers.svg">

The breakdown of these layers from bottom to top (order of their specificity):

• Core
• Layout
• Objects
• Components
• Utilities

Dependencies

• Sass (either Ruby or LibSass)

• Autoprefixer

  Autoprefixer parses CSS and adds vendor-prefixed CSS properties using the Can I use database.

  We advise you to setup Autoprefixer as part of your build process. If you're using Grunt, you can create a Grunt task for Autoprefixer using a Grunt plugin such as grunt-autoprefixer.

Installing Scally

Packages

Scally can be installed as a package with either:

• npm; or
• Bower

You'll need node.js installed to use the npm and Bower packages. More information on installing npm can be found here. With node.js installed, you can install the Scally npm package by cding into your project folder (the root is recommended) and running this command:

npm install scally

For the Scally Bower package, you first need to install Bower via npm like so:

npm install -g bower

Then, just like the npm package, you cd into your project folder (the root is recommended) and run this command:

bower install scally

Once the package is installed, your project will look like this:

npm

project root
│
└───node_modules
    │
    └───scally

Bower

project root
│
└───bower_components
    │
    └───scally

N.B. Scally should never be edited or added to directly. If you ever make changes directly in Scally, you will not be able to seamlessly update your version of Scally to the latest version at a later date.

This is a very simple overview of npm and Bower. If you are new to them, you can learn more about npm here and check out Bower's docs here.

Git clone

You can install Scally by using the git clone command by cding in to the root of your workspace folder and running this command:

git clone git@github.com:chris-pearce/scally.git

If you don't want to use the SSH clone URL, GitHub also offers:

• HTTPS; and
• Subversion

Download by zip

You can install Scally via the Download by zip option which is part of the Scally GitHub interface.

It's advised to use a package manager like npm or Bower to handle your third-party dependencies.

Setting up a new project

Setting up your master stylesheet

Once you have installed Scally, you will need to create a master Sass stylesheet called style.scss, or whatever you prefer (but for the purpose of this document style.scss will be the expected name).

This file will live at the root of the folder where you keep all of your CSS.

The compiled version of this file will be your master stylesheet that's linked from your HTML <head>. In Ruby, you can run a basic Sass watch command to compile your Sass, like this:

sass --watch style.scss:style.css

But for most projects your Sass will be compiling as part of a build process e.g. if you're using Grunt, you can use a Grunt plugin such as grunt-contrib-sass or grunt-sass to compile the Sass.

Then add a reference to the compiled master stylesheet in your HTML <head>:

<link href="[path/to/your/css/folder]/style.css" rel="stylesheet">

This master stylesheet is designed to combine the Scally framework and your project-specific styles together and compile them down to a single CSS file. We'll dig into how we suggest you set this up in the next section.

Master stylesheet overview

Your master stylesheet is split into three main sections:

1. Your settings. All of your project-specific settings in the form of Sass variables.
2. Scally framework. The entire Scally framework including project-specific overrides.
3. Your styles. All of the CSS you will write for your project.

N.B. it's imperative this order is maintained otherwise Scally won't work.

Your settings

Create a new .scss file called settings.scss that will live in the root of the folder where you keep all of your CSS, along with your master Sass stylesheet: style.scss, and link to this file from style.scss like so:

@import "settings";

This must come before the other two sections.

In this file you will store all of your common project-specific settings, beyond what Scally offers. Typically you won't have many of these, however, common project-specific settings might include adding more brand colours. If you need a new colour, in settings.scss you can create one like so:

$color-tertiary: #ccc;

Another example might be adding a new font family, e.g.

$font-family-droid-sans: "Droid Sans", sans-serif;

The reason this section comes first is so that you can refer to them throughout the rest of your styles.

Scally framework

This section pulls in the entire Scally framework via individual Sass @imports and is where you override Scally's settings.

This is what makes Scally so powerful; it can be completely modified by changing the settings without ever having to alter the framework itself.

For example, if you wanted to change the global font size for your project, you simply assign a new value to the relevant Scally setting (which in this case would be $font-size) and declare it above the relevant @import partial in style.scss, like so:

$font-size: 14;
@import "[path/to/the/scally/framework]/scally/core/settings/typography";

You can use your own project-specific settings from your settings.scss file to override any of the Scally settings e.g.

$color-text-base: $color-hotpink;
@import "[path/to/the/scally/framework]/scally/core/settings/colours";

The sample master stylesheet imports everything in the framework by default. You should be selective to ensure your CSS is as lean as possible, by only importing what you need.

If you decide you only need to use half of Scally's utilities, then simply remove the relevant utility partial @imports that you don't need from style.scss.

However, the Core section is required, so please do not remove any of the @imports for this section or Scally will not work as expected.

Your s