Home

BlastPad UI

A lightweight CSS front-end framework

Getting Started

Getting started with BlastPad UI is quick and easy.

If you are starting a new project, just copy and paste this basic starter template into your HTML file.

Starter Template

`

<title>BlastPad UI Boilerplate Example</title>

BlastPad UI

Boilerplate Example

This is a plain boilerplate template for BlastPad UI.

Your custom content goes here.

`

You can view a working demo of the boilerplate example here. http://blastpad.co/ui/release/beta/vendor/blastpad_ui/example/boilerplate/

BlastPad UI Link

If you already have an existing file, just add the following code between the

and of your HTML document. This will include the BlastPad UI CSS stylesheet in your document.

<link href="http://blastpad.co/ui/release/beta/vendor/blastpad_ui/asset/module/css/blastpad_ui.min.css" rel="stylesheet" type="text/css" />

Self-hosted

If you prefer to self-host the BlastPad UI code instead of linking to it, you can download the code from GitHub. Unzip the file and place it in your project directory. Then between the

and of your HTML document, add the following code, replacing the phrase "yourfilepath" with the link to where you placed the blastpad_ui.min.css file.

<link href="http://yourfilepath/vendor/blastpad_ui/asset/css/blastpad_ui.min.css" rel="stylesheet" type="text/css" />

Examples

You can also view the examples to help you get started.

The Styles

Defaults

BlastPad UI comes with some default styling out of the box. These styles include reset (so that styles look similar in different browsers), typography, colors, link styles and other basic styling.

In case you don't want to use the default styling, it's possible to turn them off. Just use the following code instead:

<link href="http://blastpad.co/ui/release/beta/asset/css/?mode=extra" rel="stylesheet" type="text/css" />

Namespaced classes

Apart from the default styles, most BlastPad UI classes are prefixed with "bp_" so they don't conflict with other CSS styles.

If you just want to use the default styling without the extras, add the following code instead:

<link href="http://blastpad.co/ui/release/beta/asset/css/?mode=default" rel="stylesheet" type="text/css" />

Minimal

You can also just pick and choose which modules you want to use.

The modules are in the blastpad_ui\asset\module\css directory.

That's it!