.whole
.half
.half
.one-third
.two-thirds
.one-quarter
.three-quarters
.one-fifth
.four-fifths
.two-fifths
.three-fifths
.twelve
.six
.six
.four
.eight
.three
.two
.seven
.five
.three
.two
.two
.two
.four
.six
.one
.one
.one
.one
.one
.one
.one
.one
.one
.one
.one
.one
You have two main options for using pills in your project.
Pills can be installed using the Bower or npm package manager.
bower install pillsnpm install pillsDownload the ZIP, extract the source code, and copy pills.min.css into your project’s directory.
Of course, you could also clone the repository using your terminal, or even add it as a submodule of your project.
Once you’ve acquired the pills source code, there’s a couple of other things you’ll probably want to do.
Add the following stylesheet to the <head> section of your project’s HTML. If you didn’t use Bower, you may need to adjust the path to the CSS file to match your file structure.
<link rel="stylesheet" href="bower_components/pills/dist/pills.min.css">Set the scale of your viewport to the width of the device. Placing the following tag in the <head> of your HTML ensures the viewport doesn’t load zoomed-out on mobiles and tablets.
<meta name="viewport" content="width=device-width,initial-scale=1">