- What is Scally?
- Installing Scally
- Setting up a new project
- Scally breakdown
- Dependencies
- Browser support
- Build test
- Linting
- Credits
- Licence
Scally is a Sass-based, BEM, OOCSS, responsive ready, framework that provides you with a solid foundation for building reusable UI's 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 light weight and scalable. It is unopinionated about design giving you more flexibility than your typical UI toolkit.
You can view Scally here.
Scally can be installed via Bower.
To install Scally cd into your project folder or into the folder where you keep your CSS and run the following command:
$ bower install westfieldlabs/scally
By default Bower will create a bower_components folder. You can change this to be any folder you wish via the .bowerrc file, see.
So if you have a css folder in your project and run the above command in that folder you'll end up with something like this:
css
│
└───bower_components
│
└───scally
N.B. Scally should never be edited or added too 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. To update run the following command:
$ bower update
This is a very simple overview of Bower so if you're new to it then please take the time to read up on it.
You can install Scally via the Download by zip option however it's advised to use Bower.
Once you have installed Scally you'll need to create a master sass file called style.scss (or whatever you want to name it) that will live in the root of the folder where you keep all of your CSS.
Once you have created this file grab everything from here and paste into your style.scss.
style.scss is your master stylesheet that you will call from your HTML head, once compiled that is, you can run a basic Sass watch command to compile your Sass, like this:
sass --watch style.scss:style.css
Then add a reference to the compiled css in your HTML head:
<link href="[path/to/your/css/folder]/style.css" rel="stylesheet">
This master stylesheet is designed to pull in everything for Scally plus your project-specific styles and compile down to a single css file.
Your master stylesheet is split into three main sections:
- Your settings all of your project-specific settings in the form of Sass variables.
- Scally framework the entire Scally framework.
- Your styles all of the CSS you will write for your project.
It's imperative this order is maintained otherwise Scally won't work.
This first section consists of one Sass partial:
@import "settings";
Which should live at the same level as your master stylesheet: style.scss, see an example here.
In this partial you will store all of your common project-specific settings, beyond what Scally offers. Typically you won't have many of these.
Common project-specific settings might be adding more colours, so if you decide you need a new colour then in settings.scss you can create one like so:
$colour-tertiary: #ccc;
Another example might be adding a new font family e.g.
$font-family-droid-sans: "Droid Sans", serif;
The reason this section comes first is so that you can refer to them throughout the rest of your styles.
This section pulls in the entire Scally framework and is where you override Scally's settings.
This is what makes Scally so powerful, as Scally can be completely modified by changing the settings without ever having to alter the framework itself.
So for example if you wanted to change the global font size for your project then you assign a new value to the relevant Scally setting which in this case would be $font-size then simply declare it above the relevant @import partial in style.scss, like so:
$font-size: 14;
@import "bower_components/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.
$colour-text-base: $colour-hotpink;
@import "bower_components/scally/core/settings/colours";
By default everything in the framework is imported. But if you want to be selective and you definitely should, so your CSS is as lean as possible, then only import what you need.
So if you decide you only need to use half of Scally's utilities then simply remove the partial @imports you don't need from style.scss.
The Core section is required, please do not remove any of the imports from this section.
N.B. if you customise any of Bower's default settings e.g. change the Bower install folder from bower_components to vendor, via the .bowerrc file, then make sure to update the paths in all of Scally's @import partials. So this:
@import "bower_components/scally/core/settings/colours";
Would become:
@import "vendor/scally/core/settings/colours";
This section is where you pull in all of your project-specific styles. We recommend following the same architecture as the Scally framework.
Here's an example of the architecture explained above, assuming you contain all of your CSS in a folder called css and if Scally is installed via the default Bower install (bower install westfieldlabs/scally) in your css folder.
css
| style.scss
| settings.scss
│
└───bower_components
| │
| └───scally
|
└───partials
│
├───components
|
├───core
|
├───layout
|
├───utilities
Scally is a design-free, OOCSS framework that does its best to provide zero cosmetic styling. This means that Scally can be used on any and all types of projects without dictating a look-and-feel.
More coming soon for this section.
Scally has one dependency which is 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 e.g. integrate it into Gulp.
- IE9+.
- Chrome.
- Firefox.
- Opera.
- Safari (incl. iOS).
- Android 3+.
rake test
Requires the scss-lint gem.
Run scss-lint ./ to lint all .scss files according to these lint rules.
Copyright 2014 Westfield Labs Corporation
Licensed under the Apache v2.0 licence.