baseguide

Baseguide

Baseguide is a lightweight and robust CSS framework for prototyping and production code. It combines all essential components in a customizable and easy to use package.

Features

• Flexible and extendable breakpoint system
• Dynamic flexbox grid system with float fallback
• CSS-only custom form controls
• Consistent vertical rhythm and modular scale
• Responsive and scalable components

Getting started

Install with npm

npm install baseguide

Clone with git

git clone https://github.com/slavanga/baseguide

Download

Download the latest release

Setup

Default variables can be changed before importing Baseguide. Take a look at the _settings.scss file to get an overview of all variables.

$button-bg: #bada55; // 1. Customize default variables

@import 'baseguide'; // 2. Import Baseguide

// 3. Add your own styles here

The included gulpfile takes care of compiling, optimizing and minifying your assets. Running the following command will install all dependencies and start a local server using browsersync.

npm install && gulp serve

Grid

The grid framework is based on the Bootstrap grid system.

Breakpoints

Breakpoints can easily be configured using the $mq-breakpoints map. Note that the breakpoints have to be sorted from small to large.

The default configuration looks like this:

$mq-breakpoints: (
  xs: 480px,
  sm: 768px,
  md: 992px,
  lg: 1200px
);

Baseguide generates all the necessary grid and responsive visibility classes based on these breakpoints.

Media Queries

Media Queries are handled by Sass MQ.

// include the media query mixin and pass the breakpoint key
@include mq(md) {
	
}

The snippet above compiles to the following CSS:

@media (min-width: 62em) {

}

Check out the Sass MQ documentation for more details and advanced usage of media queries.

Legacy support

To support browsers without native media query support you could use respond.js.

A static solution without Javascript is possible by setting $mq-responsive to false. The code below generates an additional stylesheet where only styles in large (lg) media queries are included.

// oldie.scss
$mq-responsive: false;
$mq-static-breakpoint: lg;

@import 'main';

Include the generated CSS file after the rest of your styles to serve a fixed width layout to legacy browsers.

<!--[if lt IE 9]><link rel="stylesheet" href="css/oldie.css"><![endif]-->

Gutters

The gutters are controlled by the $grid-gutter variable. It can either be a global value across all breakpoints or a map with gutter values per breakpoint.

// set gutter for all breakpoints
$grid-gutter: 60px;

// start with 20px gutter and increase to 40px from the md breakpoint
// note: breakpoints can be skipped to keep the last defined value
$grid-gutter: (
  xs: 20px,
  md: 40px
);

Semantic / hybrid grid

The grid mixins can be used to create custom containers, rows and columns.

// $gutter: gutter width in pixels or map with gutters, defaults to $grid-gutter
// $size: an integer, the number of columns
// $columns: an integer, the total number of columns, defaults to $grid-columns
// $width: container width in pixels, defaults to $grid-container

@include container($gutter, $width);
@include row($gutter);

@include column-base($gutter);
@include column($size, $columns);

@include column-push($size, $columns);
@include column-pull($size, $columns);
@include column-offset($size, $columns);

@include column-block($columns);

Tip: You can turn off the default columns output by setting $grid-columns-output to false.

Simple two column layout

@include mq(sm) {
  .col-content {
    @include column(8);
  }

  .col-sidebar {
    @include column(4);
  }
}

<div class="container">
  <div class="row">
    <article class="col col-content">Main Content</article>
    <aside class="col col-sidebar">Sidebar</aside>
  </div>
</div>

Gallery layout using block grid

.col-gallery {
  @include column-base;
  @include column-block(3);

  @include mq(md) {
    @include column-block(6);
  }
}

<div class="container">
  <div class="row">
    <div class="col-gallery">Gallery item</div>
    <div class="col-gallery">Gallery item</div>
    <div class="col-gallery">Gallery item</div>
    <div class="col-gallery">Gallery item</div>
    <div class="col-gallery">Gallery item</div>
    <div class="col-gallery">Gallery item</div>
  </div>
</div>

Flexbox

The flexbox grid can be activated by setting $grid-flexbox to true. This is no kill switch for older browsers as the floats are kept in place for a basic fallback. Browsers that support flexbox and flex-wrap (Support table) will get these benefits:

• CSS-only equal height columns
• Easy vertical and horizontal alignment of columns
• Ordering and reversing of columns using CSS

Forms

Standard form controls

All form controls listed in $input-selector get styled by default. The variable can be changed to a custom selector like .form-control. This will allow you to selectively style form controls based on that selector.

Remember to reset the height of textareas if you choose a custom selector:

textarea.form-control {
  height: auto;
}

Custom form controls

The custom forms component was designed with progressive enhancement in mind. While the controls are functional in all browsers the following ones get the fully enhanced experience:

• Android 2.3+
• Chrome
• Firefox 35+
• IE 10+
• Mobile Safari 4+
• Safari 5.1+
• Opera 15+

You can set the variable $use-custom-forms to false to disable custom form styles in all browsers.

Browser support

Autoprefixer

Baseguide uses Autoprefixer to automatically add vendor prefixes to the CSS output. The browser support of the framework roughly corresponds to the autoprefixer settings:

browsers: [
  'Android 2.3',
  'Android >= 4',
  'last 4 Chrome versions',
  'Firefox ESR',
  'Edge >= 12',
  'IE >= 8',
  'iOS >= 8',
  'Safari >= 8',
  'Opera >= 15'
]

Inspired By…

• Article: Styling with STRINGS
• Bootstrap
• Bourbon
• Foundation
• HTML5 Boilerplate