-
Notifications
You must be signed in to change notification settings - Fork 4
Home
A lightweight CSS front-end framework
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>BlastPad UI Boilerplate Example</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
<meta http-equiv="cleartype" content="on" />
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="http://blastpad.co/ui/vendor/blastpad_ui/0.0.6/asset/module/css/blastpad_ui.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="bp_container bp_wide">
<!-- Place your custom content here. -->
<div class="bp_center_justify">
<h1>BlastPad UI</h1><h3>Boilerplate Example</h3>
<p>This is a plain boilerplate template for BlastPad UI.</p>
<p>Your custom content goes here.</p>
</div>
<!-- End of custom content. -->
</div><!-- End of bp_container div. -->
</body>
</html>
You can view a working demo of the boilerplate example here. http://blastpad.co/ui/vendor/blastpad_ui/0.0.6/example/boilerplate/index.htm
If you already have an existing file, just add the following code between the <head> and </head> of your HTML document. This will include the BlastPad UI CSS stylesheet in your document.
<link href="http://blastpad.co/ui/vendor/blastpad_ui/0.0.6/asset/module/css/blastpad_ui.min.css" rel="stylesheet" type="text/css" />
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 <head> and </head> 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/0.0.6/asset/css/blastpad_ui.min.css" rel="stylesheet" type="text/css" />
You can also view the examples to help you get started.
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/asset/css/?mode=extra" rel="stylesheet" type="text/css" />
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/asset/css/?mode=default" rel="stylesheet" type="text/css" />
You can also just pick and choose which modules you want to use.
The modules are in the asset\module\css directory.
That's it!