Scales is a design-free collection of OOCSS patterns, framework settings, & utilities to quickly build mobile-first, responsive web projects
Scales is a collection of OOCSS patterns, framework settings, & utilities to quickly build mobile-first, responsive web projects. It clocks in at only 4kb when minified and gzipped.
It is purposely "design-free" so that there is nothing you will have to change. Instead, you will build your design on top of the foundation that Scales provides.
This is a framework for serious developers and designers who aren't afraid to get their hands dirty with advanced and sometimes challenging CSS concepts. A framework shouldn't do your work for you or make all of the decisions. Scales tries it's best to stay out of your way.
Scales is a highly scalable CSS architecture, it contains design patterns (scales in nature form patterns), and it is responsive so it scales to the width of the viewport. So clever it hurts.
Scales uses box-sizing: border-box;, and display: table-cell;, neither of which are supported in IE7 and under. There are a few media queries, but they are an enhancement. Thus, Scales is only for IE9+ and any modern browser, but IE8 is also mostly covered.
Make sure you have the dependencies installed on your system and then, from the root directory of your project, run:
npm install --save scalescss
or
bower install --save scalescss
Next you will want to create 3 files (name them whatever you want):
_settings.scss_scales.scssstyles.scssScales exposes a large number of variables that allow you to customize nearly everything.
Have a look at all of the available variables.
Each piece of Scales is in its own repo. Once you have all of the repos in your project, you will need to import them into a single place. I recommend creating a _scales.scss file that imports everything.
The order of the imports is very important!
See an example of the correct import order.
Once you have these files sorted out, you will want to create a main Scss file that will import your settings, Scales, and the rest of your project partials. This is the file that will get compiled into CSS:
@import your-project/settings;
@import your-project/scales;
@import your-project/project-partial;
@import your-project/project-partial;
@import your-project/project-partial;
@import your-project/project-partial;
If you don't want to use a package manager to install Scales, you can clone each repo individually. A full list of repos is in the imports.md file. All repos can be found at the Scales organization page on Github.
Once you have these things set up you simply need to tell Sass what to compile:
$ sass your-project/styles.scss your-project/css/styles.css
There are many other options for compiling that you can find in the Sass Documentation. You can also look into using a task runner like Gulp or Grunt.
This repo includes an index.html file that serves are a basic pattern library for Scales. It shows all of the available base settings and patterns. This can be used as a reference or styled into a more complete pattern library with your project's patterns as well.
This couldn't have been done without the amazing work of Harry Roberts on Inuit.css. A number of the design patterns and techniques in Scales were borrowed or adapted from Inuit.css.
I also wanted to thank Nicole Sullivan for her work on OOCSS, without which I would not be the developer I am today.
A special note of thanks also goes out to Vince Speelman, Rob Copeland, and Jen May who pushed me to rewrite Scales in a more modular way and who are always willing to listen to my bad ideas.
FAQs
Scales is a design-free collection of OOCSS patterns, framework settings, & utilities to quickly build mobile-first, responsive web projects
We found that scalescss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.