Bagpakk

A minimal front-end CSS framework.

Download Source

Wordpress Ready

The WP version of bagpakk comes with all wordpress default classes.

Fluid & Responsive

Fits to any devices using Progressive Enhancement

Developper Friendly

Build for developper with a simple & readable SCSS structure.

Bagpakk comes with the minimum. Nothing more.

Unlike huge CSS frameworks like twitter bootstrap or foundation, Bagpakk offers a minimal scaffold to build your web application.

Each section use this basic structure:

<section class="container">
	<div class="wrap">
		// content goes here
	</div>
</section>

Features

  • typography
  • main container classes
  • grid system
  • buttons
  • form
  • fluid video wrapper
  • media queries
  • useful scss mixins

Typography

Readability is one of the more important aspects of Web design usability. Readable text affects how users process the information in the content.

Smashing Magazine

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The Bagpakk typography is focused on readability on every devices. Nothing's better than a good big font size and a good contrast to be able to read any text easily.

The Bagpakk typography is focused on readability on every devices. Nothing's better than a good big font size and a good contrast to be able to read any text easily.

The Bagpakk typography is focused on readability on every devices. Nothing's better than a good big font size and a good contrast to be able to read any text easily.


Table

This That Those
John Doe Other
John Doe Other

Inline list

  • item
  • item
  • item
  • item

Nothing is better than a readable post

<article class="small-width">
	<p>My awesome content goes here.</p>
<article class="small-width">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, numquam accusamus nulla molestiae totam eveniet doloribus molestias esse. Veniam, corrupti exercitationem nam laboriosam nihil explicabo alias illo ducimus dolorum quas.

Fluid video

To display a responsive video use the .fluid-video container. Additionally, we use the .font-color-alt container class to use an alternative font color in this section.

<span class="fluid-video">
	<iframe src="//player.vimeo.com/video/29193046" ... ></iframe>
</span>	

Buttons

I want to be clicked I want to be clicked

I want to be clicked I want to be clicked

a.button-big a.button-alt-big

a.button a.button-alt

You can also use the alternative button on a dark background

I want to be clicked

a.button-alt-light a.button-alt-light-big

Grid System

A minimal 12 columns grid markup.

.col-6.first
.col-6.last
.col-4.first
.col-4
.col-4.last
.col-3.first
.col-3
.col-3
.col-3.last
.col-4.first
.col-8.last

Form

Here is the default form styles. Each input is simply wrapped in a p tag.

SCSS Usage

  1. Paste the content of the bagpakk SCSS folder into your web app SCSS folder
  2. Rename the bagpakk.scss file or bagpakk-wordpress.scss file with an underscore:
    _bagpakk.scss
  3. Import the bagpakk SCSS file into your main project stylsheet
  4. Edit the _settings.scss file variables if needed to change the accent color, fonts, mobile break points etc...
  5. Now you can extend your CSS selectors from any bagpakk class and use all mixins and functions

Example

// Make sure the charset is set appropriately
@charset "UTF-8";

// Import bagpakk
@import "bagpakk";

// Example
#my-container{
	@extend .container;
	background:black(0.3); // black rgba mixin
}
bower

Install Bagpakk with Bower

You can use Bower to import the bagpakk package directly into your web app.

bower install bagpakk

Bagpakk on GitHub

Check the bagpakk GitHub repository to view the source code.

View Source

Download Bagpakk