Fits to any devices using Progressive Enhancement
Build for developper with a simple & readable SCSS structure.
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>
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
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.
| This | That | Those |
|---|---|---|
| John | Doe | Other |
| John | Doe | Other |
<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.
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>
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
A minimal 12 columns grid markup.
Here is the default form styles. Each input is simply wrapped in a p tag.
_bagpakk.scss_settings.scss file variables if needed to change the accent color, fonts, mobile break points etc...// 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 }
You can use Bower to import the bagpakk package directly into your web app.
bower install bagpakk
