We'll remember your contact info. for this session.

Layout

Layout grids using CSS grid systems.
960 Grid System
    12 and 16 column templates for 960 grid system. Gutters of 10 pixels are added to edges to make up the full width of 960px, and makes it easier to grab and move around whilst keeping integrity of the 960px width.

    More information on the 960 Grid System site.
    Ad Unit Placeholders
      Blueprint CSS Framework
        Grid based on the Blueprint CSS framework, 950px wide with 24 columns.

        Contributed by Geoffrey Dagley

        For more information, visit the Blueprint site.
        Bootstrap 3 Grid Layout
          LG, MD, SM, XS grids for Bootstrap 3.
          Contributed by Balsamiq on 15 Aug 2013.
          Bootstrap Grid Layout
            Browser at 1024x768 with 960 Grid
              Olivier Obuchowski writes:

              This is a browser sized for a 1024*768 resolution.

              It is made so that the "real" space available (without the scrolling bar) is 998 pixel wide.

              This correspond to the Web Safe Area as described on this website: http://www.designerstoolbox.com/designresources/safearea/

              I also included a 16 columns grid (960.gs) which fits perfectly in it.

              Whenever I start a new web mockup, I just start with this, ungroup the grid (so that the other components snap to it) and block everything.

              It saves me a bit of time each and every time and I’m sure my mockups fits correctly.

              Contributed by Olivier Obuchowski.
              Browser with 960 Grid
                A starting point for those designing against the 960.gs grid system.

                Contributed by Benjamin Gray http://www.theworldallaround.com
                Less Framework Grid (8 Columns)
                  An 8 column grid using Less Framework. 60 px columns, 24 px gutters, 60 px margins, 768 px total.

                  You can widen or shrink by adding or subtracting columns to create other Less Framework grid layouts.

                  Contributed by Yuya Saito

                  View the Less Framework site.
                  Gradient Bar
                    Paper Layout 8.5 x 11 Landscape
                      A template for laying out Mockups to be printed at 1:1 on Letter paper (8.5x11) in landscape orientation. The dimensions of the rectangle are 792 x 612 pixels, which is effectively 11 in. x 8.5 in. at 72 DPI.

                      Contributed by Balsamiq.
                      Paper Layout 8.5 x 11 Portrait
                        A template for laying out Mockups to be printed at 1:1 on Letter paper (8.5x11) in Portrait. The dimensions of the rectangle are 612 x 792 pixels, which is effectively 8.5 x 11 in. at 72 DPI.

                        Contributed by Balsamiq.
                        Paper Layout A4 Portrait
                          A template for laying out Mockups to be printed at 1:1 on A4 (210 x 297 mm) in Portrait. The dimensions of the rectangle are 793 x 1122 pixels, which is effectively A4 at 72 DPI.

                          Contributed by Balsamiq.
                          Sketch Templates
                            8-Up and 6-Up templates for quick idea generation using rough thumbnail sketches. Works well with the base set of small Thumbnail Sketch UI elements included in this library.

                            Contributed by Balsamiq.
                            Paper Layout A4 Landscape
                              A template for laying out Mockups to be printed at 1:1 on A4 (210 x 297 mm) in Portrait. The dimensions of the rectangle are 793 x 1122 pixels, which is effectively A4 at 72 DPI.

                              Contributed by Balsamiq.
                              Wireframe Template
                                This is a formal wireframe template for people who need to make more traditional functional specifications. Read the notes in the Mockup for usage.
                                Storyboard Template 11 x 17 Landscape
                                  Print template for storyboards.

                                  Are you sure you want to delete mockup "XYZ?"

                                  Your mockup's data and history will be deleted forever!

                                  Notify project members