A minimal and robust BEM-style CSS toolkit.

Comet is a lightweight CSS toolkit for clean and fast web apps. It's written with the BEM methodology in mind for a more structured and readable code. No unnecessary styles are added, so you can spend more time building things and less time overriding.

Getting Started
  • Version: 1.2.0
  • License: MIT
  • Star

Getting Started

There are several different ways to get started with Comet, you can choose the most suitable option for your needs.

Download Comet

Install with npm

npm install comet-css --save

Install with Bower

bower install comet-css --save

Use the CDN

<link href="https://npmcdn.com/comet-css@1.2.0/dist/comet.min.css" rel="stylesheet">

Usage

First, use a method above to download Comet. Then just add these tags in the head of your HTML file.

<!-- Comets default font -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">

<!-- Minified Comet (installed via npm) -->
<link href="./node_modules/comet/dist/comet.min.css" rel="stylesheet">
🔼   Beam me up

Typography

Comet uses the Source Sans Pro family as the default sans serif font for headlines and body copy. Monaco is used as default monospace font for code snippets.

You can easily change the default fonts. For more information check the customization chapter.

Headings

Heading 1

font-size: 45px / line-height: 54px

Heading 2

font-size: 37px / line-height: 45px

Heading 3

font-size: 31px / line-height: 37px

Heading 4

font-size: 26px / line-height: 31px
Heading 5
font-size: 22px / line-height: 26px
Heading 6
font-size: 15px / line-height: 18px

Body copy

The global font-size is 15px or 1.5rem with a line-height of 1.6. This is applied to the body and all paragraphs. Paragraphs also recive a bottom margin of 30px.

Emphasis

You can use different html tags to emphasis your text.

Strong
<strong>Strong</strong>
Italic
<em>Italic</em>
Underline
<u>Underline</u>
Strike
<strike>Strike</strike>
Small
<small>Small</small>

Scale

All font-sizes are based on a typographic scale. If you change the base font size, all font sizes will scale proportionally.

🔼   Beam me up

Blockquotes

Blockquotes are used to label text that is quoted from another source.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

— Someone famous in Source Title
<blockquote class="blockquote blockquote--highlight">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote__footer">— Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
🔼   Beam me up

Code

You can use the <code> tag to wrap text that represents computer code. By default <code> is a inline element. If you need a block of code wrap the <code> tag within the <pre> element. 

.test-class {
  color: red;
}
<pre><code class="code">
.test-class {
  color: red;
}
</code></pre>

There are also some modifier classes like .code--background and .code--highlight avaliable.

var x = 10;
<pre><code class="code code--background code--highlight">
  var x = 10;
</code></pre>

For syntax highlighting you can use prismjs.

🔼   Beam me up

Lists

You can use the default <ul>, <ol> and <dl> lists.

  • Item #1
  • Item #2
  1. Item #1
  2. Item #2
Item #1
Description
<!-- Unordered list -->
<ul class="list">
  <li>Item #1<li>
  <li>Item #2<li>
</ul>

<!-- Ordered list -->
<ol class="list">
  <li>Item #1<li>
  <li>Item #2<li>
</ol>

<!-- Description list -->
<dt class="list">
  <dt>Item #1<dt>
  <dd>Description<dd>
</dt>

With the following modifiers you can change the appearance of a list.

Inline list

<ul class="list list--inline">
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ul>

Unstyled list

<ul class="list list--unstyled">
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
</ul>
🔼   Beam me up

Tables

Basic table

# Name Email
1 John Doe john@doe.com
2 Leanne Graham sincere@april.biz
3 Ervin Howell shanna@melissa.tv 
<table class="table">
  …
</table>

Striped table

# Name Email
1 John Doe john@doe.com
2 Leanne Graham sincere@april.biz
3 Ervin Howell shanna@melissa.tv 
<table class="table table--striped">
  …
</table>

Hover rows

# Name Email
1 John Doe john@doe.com
2 Leanne Graham sincere@april.biz
3 Ervin Howell shanna@melissa.tv 
<table class="table table--hover">
  …
</table>
🔼   Beam me up

Buttons

There are three basic styles for buttons. You can also add the button classes to anchor elements.

<button class="button">Default button</button>
<button class="button button--outline">Outlined button</button>
<button class="button button--clear">Clear button</button>

The modifier classes .button--small and .button--large can be used to modify the appearance of a button.

<button class="button button--small">Small button</button>
<button class="button button--large">Large button</button>
🔼   Beam me up

Forms

<form class="form">
  <label class="form__label" for="name">Name</label>
  <input class="form__input" type="text" id="name" placeholder="Your name">

  <label class="form__label" for="email">Email</label>
  <input class="form__input" type="email" id="email" placeholder="Your email" />

  <label class="form__label" for="message">Message</label>
  <textarea class="form__input" id="message" placeholder="Your message"></textarea>

  <button type="button" class="button">Submit</button>
</form>

For valid and invalid form inputs you can use the modifier classes .form__input--success and .form__input--error.

<form class="form">
  <div class="grid">
    <div class="grid__col grid__col--6">
      <input class="form__input form__input--success" type="text" placeholder="Your name" />
    </div>
    <div class="grid__col grid__col--6">
      <input class="form__input form__input--error" type="text" placeholder="Your name" />
    </div>
  </div>
</form>
🔼   Beam me up

Grid system

Comet provides a simple grid using flexbox.

12
1
11
2
10
3
9
4
8
5
7
6
6
<div class="grid">
  <div class="grid__col grid__col--12"></div>

  <div class="grid__col grid__col--1"></div>
  <div class="grid__col grid__col--11"></div>

  <div class="grid__col grid__col--2"></div>
  <div class="grid__col grid__col--10"></div>

  <div class="grid__col grid__col--3"></div>
  <div class="grid__col grid__col--9"></div>

  <div class="grid__col grid__col--4"></div>
  <div class="grid__col grid__col--8"></div>

  <div class="grid__col grid__col--5"></div>
  <div class="grid__col grid__col--7"></div>

  <div class="grid__col grid__col--6"></div>
  <div class="grid__col grid__col--6"></div>
</div>

Responsive Grid

Depending on the screen size you can use different classes to resize your columns.

<!-- Medium sized devices -->
grid__col--m-*

<!-- Small devices -->
grid__col--s-*

The shortcut m stands for medium sized devices e.g. Tablets. s stands for small devices e.g. smartphones.

Hello
world
<div class="grid">
  <div class="grid__col grid__col--8 grid__col--m-6 grid__col--s-12"><div class="demo">Hello</div></div>
  <div class="grid__col grid__col--4 grid__col--m-6 grid__col--s-12"><div class="demo">world</div></div>
</div>

The grid module also has two modifiers:

Reverse grid

12
1
11
2
10
3
9
4
8
5
7
6
6
<div class="grid grid--reverse">
  …
</div>

Gapless grid

12
1
11
2
10
3
9
4
8
5
7
6
6
<div class="grid grid--gapless">
  …
</div>
🔼   Beam me up

Utilities

Comet provides a couple of useful utilities to boost your productivity.

Text

Left aligned text.

<p class="utility__text--center">Left aligned text.</p>

Center aligned text.

<p class="utility__text--center">Center aligned text.</p>

Right aligned text.

<p class="utility__text--right">Right aligned text.</p>

This text is loud.

<p>This text is <span class="utility__text--loud">loud</span>.</p>

This text is quiet.

<p>This text is <span class="utility__text--quiet">quiet</span>.</p>

This text is highlighted.

<p>This text is <span class="utility__text--highlight">highlighted</span>.</p>

Position

This div is left aligned.
<div class="utility__pos--left" style="width: 100px;">This div is left aligned.</div>
This div is right aligned.
<div class="utility__pos--right" style="width: 100px;">This div is right aligned.</div>
This div is horizontal centered.
<div class="utility__pos--center" style="width: 100px;">This div is horizontal centered.</div>
This div is horizontal and vertical centered (in it's container).
<div style="position: relative; height: 200px;">
  <div class="utility__pos--center-center">This div is horizontal and vertical centered (in it's container).</div>
</div>

Float

This paragraph floats to the left.

<p class="utility__float--left">This paragraph floats to the left.<p>

This paragraph floats to the right.

<p class="utility__float--right">This paragraph floats to the right.<p>

The class .utility__clearfix clears all floats.

Left
Right
<div class="utility__clearfix">
  <div class="utility__float--left">Left</div>
  <div class="utility__float--right">Right</div>
<div>

Visibility

This text is hidden on large devices.

<p class="utility__hidden--l">This text is hidden on large devices.</p>

This text is hidden on medium devices.

<p class="utility__hidden--m">This text is hidden on medium devices.</p>

This text is hidden on small devices.

<p class="utility__hidden--s">This text is hidden on small devices.</p>
🔼   Beam me up

Misc

Horizontal lines

To divide sections you can use the html tag hr.

<hr class="hr" />
<hr class="hr hr--small" />
🔼   Beam me up

Browser Support

Comet uses autoprefixer to make features compatible with earlier browser versions. Comet is compatible with:

🔼   Beam me up

Customization

To build a customised version, make sure that you have node.js and gulp.js installed, then:

  1. Clone the repository: https://github.com/marcbruederlin/comet.git
  2. Change in the project directory: cd comet
  3. Install the dependencies: npm install
  4. Customize the variables in src/custom/_variables.scss
  5. Run gulp build to regenerate the dist folder.
    You can also run gulp build --watch to watch for file changes and automatically rebuild the files.
🔼   Beam me up