Hit me with the basics

Just call Boxcss with a root url and the css files you wish to include

<link rel="stylesheet" href="http://www.boxcss.com/boxme?host=http://www.yoursite.com/assets/css/&include=style1.css,style2.css,style3.css,style4.css" />

Boxcss will grab your files, compress them and then deliver one minified and cached CSS file to your page. Boxcss does not support the use of @imports in your stylesheets.

NOTE: BoxCss runs on Amazon EC2 which states "The Amazon EC2 Service Level Agreement commitment is 99.95% availability", so its pretty reliable. As boxcss is currently free, we can support about 50 requests per second and about 20 000 js files until we clear the cache. We can, however, set up your own instance of boxcss with the above specs which would be more than you will ever need. This will also be free as long as we can keep up with demand. Find us on twitter below to request your own instance.

Want to use LESS? No Problem!

Just include .less files along with the others

<link rel="stylesheet" href="http://www.boxcss.com/boxme?host=http://www.yoursite.com/assets/css/&include=style1.less,style2.css,style3.css,style4.less" />

LESS support is dependent on the LESS gem. If the gem cannot parse your file it will not add it to the output.

What do I do if I am not in production mode and still developing?

Boxcss only benefits production, thus, when you are developing in your sandbox environment simply add a server or client side condition...

<% if(@mode=='prod') %>

	<link rel="stylesheet" 	href="http://www.boxcss.com/boxme?host=http://www.yoursite.com/assets/css/&include=style1.css,style2.css,style3.css,style4.css" />
<% else%>	

	<script src="less.js" type="text/javascript"></script> <!-- if you are using less -->
	<link rel="stylesheet" href="/assets/css/style1.css" />
	<link rel="stylesheet" href="/assets/css/style2.css" />
	<link rel="stylesheet" href="/assets/css/style2.less" />
	<link rel="stylesheet" href="/assets/css/style4.css" />

<% end%>

Configuring Boxcss

Available Boxcss parameters

  • minify

    Does what it says on the tin using Rainpress. If Boxcss fails to minify your script, it will be returned unminified.

    true (default) | false
  • cache

    This is set to true by default. It works in conjunction with the version option. Your files will be packaged and cached for a few days. If you want to reload the cache, you should provide a new version

    true (default) | false
  • version

    Use this property to control which version to load from cache. A package will be cached for a few days by default. Incrementing the version number with each release will keep your files fresh.

    1 (default) | 1.1, 2