About

These Base Styles are meant as a baseline for our frontend.

Goals

• Unify fonts, colors and common elements
• Unopinionated and flexible
• 0 kb dependency - only expose mixins and allows gradual rollout

Feel free to extend and override it. It’s not an UI framework, but it could serve as a base for one). Pattern library should take care of cataloging use of this in the wild.

Getting started

Install with npm:

npm i apiary-base-styles -S

Import into your Stylus file:

@import '~apiary-base-styles'

Now you can start using parts of Base Styles - all of them are prefixed with $, see reference below.

Colors

All colors are exported as Stylus variables.

You can also use:

• $successColor
• $errorColor
• $warningColor
• $infoColor

Typography

You can setup basic styles for text like color, line-height and font-weight by calling $apiaryBase mixin like so:

$apiaryBase()

It will setup

• default font size
• set box-sizing to border-box
• padding, margin 0 on html/body
• link colors
• responsive image resizing

We are fully relying on system fonts.

p
  font-family $baseFont

code
  font-family $monoFont

Heading styles

Few predefined heading styles

$apiaryHeadings() /* To setup h1 to h6 styles */

Buttons

Style Guide comes with few predefined button styles and an unified button baseline mixin:

<button class="button--primary"><div>Hello world</div></button>

Hello world

Hello world

Hello world

Hello world

Disabled button

<a href="javascript:;" class="button--primary" role="button">Hello world</a>

Hello world Hello world Hello world Hello world Disabled doesn’t work for anchor tags

<input type="button" class="button--primary" value="Hello world" />

PROTIP: Use <button> element for UI

// 4 predefined button styles
.button--primary
  $apiaryButtonPrimary()
.button--secondary
  $apiaryButtonSecondary()
.button--ghost
  $apiaryButtonGhost()
.button--link
  $apiaryButtonLink() // Link only button

New button styles

You can easily create new combination if needed with $apiaryButton() mixin with single argument fontSize (defaults to 13px)

.button--custom
  $apiaryButton(fontSize: 18px)
  background-color #264653
  &:hover
    background-color #2A9D8F

New button style!

There are 3 supported HTML markups:

<!-- use for links -->
<a href="#" class="button--primary">Hello world</a>
<!-- use for actions in UI -->
<button class="button--secondary"><div>Hello world</div></button>
<!-- use in forms -->
<input type="button" class="button--secondary" value="Hello world" />

Loading indicator element

Use $loadingIndicator() mixin with color and size options:

.loadingIndicator
  $loadingIndicator()
  &--big
    $loadingIndicator(size: 12px)
  &--blue
    $loadingIndicator(color: $primaryColor)

<div class="loadingIndicator"></div>
<div class="loadingIndicator loadingIndicator--big"></div>
<div class="loadingIndicator loadingIndicator--blue"></div>

Default

With specified size

With specified color

Forms

Basic styling for forms is available under $apiaryForm() mixin

.apiaryForm
  $apiaryForm()

<form class="apiaryForm">
  <label for="fullName">Full Name</label>
  <input type="text" name="fullName" id="fullName" value="John Doe">
  <label for="email">Email Address</label>
  <input type="email" name="email" id="email2" value="invalid email@" required>
  <label for="phoneNumber">Phone Number</label>
  <input type="tel" name="phoneNumber" id="phoneNumber" placeholder="555-1234">
  <input type="submit" value="Contact Me">
</form>

<form class="apiaryForm">
  <fieldset>
    <legend>A compact inline form</legend>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="john@example.com">
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="password">
    <label for="remember">
      <input id="remember" type="checkbox"> Remember me
    </label>
    <button type="submit">Sign in</button>
  </fieldset>
</form>

Alert boxes

Alert boxes are important part of the UI.

.alert
  $alert()

This will add some basic styling to .alert and adds BEM modifiers --success, --warning, --error and --info.

<div class="alert alert--success">Success message</div>
<div class="alert alert--warning">Warning message</div>
<div class="alert alert--error">Error message</div>
<div class="alert alert--info">Info message</div>

Alert headings and icon/body are also available. Use __figure and __body as a media object:

<div class="alert alert--success">
  <div class="alert__figure">
    <!-- Any icon/image is allowed here -->
    <i class="icono-checkCircle"></i>
  </div>
  <div class="alert__body">
    <div class="alert__heading">Heading</div>
    <p>Lorem ipsum <a href="javascript:;">dolor sit amet</a>, consectetur adipiscing elit. Proin imperdiet ex a quam commodo semper. Sed ac nulla in velit feugiat malesuada. Donec vel volutpat arcu, vitae ullamcorper sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<div class="alert alert--info">
  <div class="alert__heading">Heading</div>
  <p>Lorem ipsum dolor sit amet, <a href="javascript:;">dolor sit amet</a>. Proin imperdiet ex a quam commodo semper. Sed ac nulla in velit feugiat malesuada. Donec vel volutpat arcu, vitae ullamcorper sem. Lorem ipsum dolor sit amet, <a href="javascript:;">dolor sit amet</a>.</p>
</div>

Don’t forget to use <p> for content when using __heading.