Bolt is a Free Classless CSS (Cascading Style Sheets) library for Web Developers that can be used for simple static sites or alternatively as a starting point to create and add your own classes.
Classless Style Sheets are those that do not define any special classes that are generally supposed to be added to your HTML elements to style them. This enables you to style any normal HTML element simply by linking to the style sheet using the <link> HTML element in your <HEAD> section. They are very useful in prototyping websites and can be easily used in any of your projects.
Bolt can be used for Basic Styles for HTML Elements. You must remember that it does not offer a complete solution with layout grids, utility classes etc. and can be mostly used for plain static websites.
How it Works:
One method of deploying Bolt to download the Bolt.css style sheet by clicking on this link and adding it manually to your application. Alternatively, you can use the CDN (content delivery network) method by inserting the following line into the <Head> section of your HTML
<link rel=”stylesheet” target="_blank" href=”https://cdn.jsdelivr.net/gh/tbolt/boltcss/bolt.css”>
Once you carry out the above step, you can style any simple HTML element without using any Class. I have indicated the examples below with screenshots of the output.
Blockquote
<blockquote>
Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.
<footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
</blockquote>
Audio
<audio controls src=”zeldaprelude.mp3″>
</audio>
Video
<video controls poster=”poster.png”>
<source src=”bigbunny.mp4″ type=”video/mp4″ />
</video>
Group Related Options
Drop-down list with multiple options
<label for=”pet-select”>Choose a pet</label>
<select name=”pet” id=”pet-select”>
<option value=”dog”>Dog</option>
<option value=”cat”>Cat</option>
<option value=”hamster”>Hamster</option>
<option value=”parrot”>Parrot</option>
<option value=”spider”>Spider</option>
<option value=”Goldfish”>Goldfish</option>
</select>
Group related elements in a Form
<form>
<fieldset>
<legend>Choose your favorite monster</legend>
<label for=”kraken”>
<input type=”radio” id=”kraken” name=”monster” />
Kraken
</label>
<label for=”sasquatch”>
<input type=”radio” id=”sasquatch” name=”monster” />
Sasquatch
</label>
<label for=”mothman”>
<input type=”radio” id=”mothman” name=”monster” />
Mothman
</label>
</fieldset>
</form>
For more examples and usage of Bolt, you can click here.
Closing Words:
Bolt CSS Library is a simple and neat way to style your HTML elements without the usage of any CSS Classes. It comes very handy for developing ordinary static websites and for prototyping your applications.
