GitHub Sandbox

Proto is a simple HTML & SCSS rapid prototyping toolkit for responsive web design.

Proto helps you knock up quick responsive layout concepts by providing a set of predefined CSS classes. All that's needed to get going is the proto.scss file and some basic HTML.

Get Proto

Getting started

Proto uses a combination of HTML and compiled SCSS to create your prototypes. If you're new to SCSS there's a quick guide for you to follow below. If you've worked with it before keep going.

SCSS 101: The quick guide.

At the top of the proto.scss file, you'll find the Proto variables.

//  Proto vars
//  Be sure to inlclude appropriate units i.e. 'px', '%', 'em' etc
//  (These comments will be stripped out during compile)

//  Base
$blockBackground: #eee;
$centerWidth: 70%;

//  Demo
$DemoPass: #dff0d8;
$DemoFail: #f0d8d8;

//  Media Query
$desktopWidth: 1024px;
$tabletWidth: 768px;
$phoneWidth: 480px;

Proto comes with these variables predefined, but feel free to change any of the values to match your own requirements.

The 'block' class

The single most important part of Proto is the .block class. It's the structural foundation of the toolkit, so using it correctly is important. Thankfully, this is pretty straightforward:

<!--
It all starts with the '.block' class...
-->
<div class="block">
  foo
</div><!--/.block-->

Any 'containing' element you create - header,section,article,footer,div etc - should have the .block class applied it.

header

The 'center' class

Apply this class to a block to center it within its parent. The value of the $centerWidth variable is the width applied to the .center class (70% by default).

<!--
An example of the 'center' class...
-->
<div class="block center">
  introduction
</div><!--/.block center-->
introduction

The 'grid' class

Grids are a cinch. Add the .grid class to any element you'd like to act as a grid wrapper.

<!--
An example of the 'grid' class...
-->
<div class="block grid">
  <div class="block sixty">
    main content
  </div><!--/.block sixty-->
  <div class="block forty">
    sidebar
  </div><!--/.block forty-->
</div><!--/.block grid-->
main content
sidebar

Nesting grids

Grids can be nested as far down as you'd like allowing the creation of intricate layouts. Only the outermost wrapping element need have the .grid class applied.

<!--
An example of nested grids...
-->
<div class="block grid">
  <div class="block sixty">
    main content
  </div><!--/.block sixty-->
  <div class="block forty">
    <div class="block fifty">
      col 1
    </div><!--/.block fifty-->
    <div class="block fifty">
      col 2
    </div><!--/.block fifty-->
  </div><!--/.block forty-->
</div><!--/.block grid-->
main content
col 1
col 2

Hide or show?

You can opt to either show an element within a given viewport range, or display it within all but a given viewport range.

<!--
Element(s) will be shown within their respective
viewport range only
-->
.desktop
.tablet
.phone
<!--
Element(s) will be shown within all BUT their respective
viewport range
-->
.not-desktop
.not-tablet
.not-phone
<!--
Let's say you wanted an element to only show within
the 'desktop' viewport range...
-->
<div class="block desktop">
  foo
</div><!--/.block desktop-->
<!--
What about displaying an element on all BUT the
'desktop' viewport range...
-->
<div class="block not-desktop">
  bar
</div><!--/.block not-desktop-->
foo
bar

The 'demo' class

If you'd like to demonstrate the effect of the classes set out above without actually hiding any elements, append the class name with -demo. This changes the visual style of the element, rather than applying display:none; to it.

<!--
The following will render a light green box if the
viewport width is within the 'desktop' range. As
soon as the width drops below this range, it will
render as a light red box...
-->
<div class="block desktop-demo">
  .desktop-demo
</div><!--/.block desktop-demo-->
.desktop-demo
<!--
The following will render a light green box if the
viewport width is within all BUT the 'tablet' range.
As soon as the viewport width is outside of (either
above or below) this range, it will render as a
light red box...
-->
<div class="block not-tablet-demo">
  .not-tablet-demo
</div><!--/.block not-tablet-demo-->
.not-tablet-demo

The '-to-' class

Imagine you have a 1x4 grid of elements within the desktop viewport range that but you'd like to become a 2x2 grid in the tablet range and a 4x1 in the phone range. Enter the -to- class.

<!--
Using the above as an example, the following will change
the width of each 'twentyfive' block to that of a
'fifty' block at the 'tablet' viewport width and
to a 'hundred' width at the 'phone' viewport range.
-->
<div class="block grid">
  <div class="block twentyfive tablet-to-fifty phone-to-hundred">
    1
  </div><!--/.block twentyfive tablet-to-fifty phone-to-hundred-->
  <div class="block twentyfive tablet-to-fifty phone-to-hundred">
    2
  </div><!--/.block twentyfive tablet-to-fifty phone-to-hundred-->
  <div class="block twentyfive tablet-to-fifty phone-to-hundred">
    3
  </div><!--/.block twentyfive tablet-to-fifty phone-to-hundred-->
  <div class="block twentyfive tablet-to-fifty phone-to-hundred">
    4
  </div><!--/.block twentyfive tablet-to-fifty phone-to-hundred-->
</div><!--/.block grid-->
<!--
The '-to-' class has a simple naming convention:
.{viewport}-to-{new width}
-->
1
2
3
4

Proto is not a framework, it's a small toolkit built to speed up responsive layout conceptualisation. Using it as a framework - while possible - isn't advisable. Classes and their usage have been kept as simple as possible to give you greater freedom when exploring layout options.