Get Started

Description

Sandbox is a responsive CSS only framework written with Sass. This means that there is no JavaScript included. Sandbox provides buttons, forms, a component library as well as plenty of utility classes to adjust things to your liking.

Installation

npm install sandbox-css

Usage

Sandbox can be used as is, by including the sandbox-min.css file found in the node_modules/sandbox-css/dist directory, and linking to it in your html file. Your starter html template will look something like this.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title</title>
        <link rel="stylesheet" href="/path/to/sandbox/here" type="text/css">
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

Customization

Sandbox was made to be customized by either plugging in your own values to the variables provided, or just modifying the source to your liking.

After installing the package, go into the node_modules/sandbox-css directory and install its dependencies so that you can start to create builds of the framework.

cd node_modules/sandbox-css
npm install

Build

After installing the dependencies and making your changes to the source, run a build using the following command.

npm run build

The Sass will compile and output your new sandbox-min.css file into the /dist directory.

Compatibility

Sandbox uses Autoprefixer to take care of vendor specific prefixes, so there's no need to write them yourself.

Docs

Check out the documentation to see what Sandbox is all about.