Skip to main content

SSMF Mock-up Framework

·2 mins

Super-simple Mock-up framework meant to ease the transition from mock-ups to actual products. The idea would be to begin your mock-ups for each new product with a fresh download of this project, and then customize it to your heart’s content. The focus should be in creating clean, modular markup, and visuals, which can then be transferred to your real project.

This folder still needs to be served from behind a server like Apache or Nginx. - In other words, you should access these mock-ups with a url or http://localhost/mockups not file://my-desktop/mockups/index.html


Structural Presets #

Uses jQuery imports to separate the main structure into:

  • Header
  • Content
  • Footer

This project comes with five structural presets. That is, how the elements above (Header, Content, and Footer) interact with one another.

You set the preset in index.html

// To customize the structural preset, comment all the presets you do not want to use, and uncomment the one you want applied.
    var structure_preset = 'elastic';
    // var structure_preset = 'scroll_behind';
    // var structure_preset = 'fixed_header';
    // var structure_preset = 'fixed_footer';
    // var structure_preset = 'sticky_footer';

Elastic (Default)

Fixed Scroll-Behind

Fixed Header

Fixed Footer

Sticky Footer

Customize #

Customize the Header with structure/header.html

Customize the Content with structure/content.html either directly, or by including components

Customize the Footer with structure/footer.html

Customize the CSS with css/main.css

Customize the JS functions with js/main.js

Add more JS libraries by including these in js/vendor/ then adding the links in the index.html to include them in the <head> or in structure/footer.html to include them before </body>

Components #

Content can be added either directly in content.html, or through the use of components. This project includes some components to help you get started.

Included components:

  • live filter

  • responsive table with inline editing

  • ajax/json data loader to approximate ajax responses in mock-up Coming Soon

For examples on creating components, and including them in your mock-up, take a look at structure/content.html

I think that covers pretty much everything. Like I said, super-simple.

Example of Mocked-up Interaction #

Tabbed form field break out

Miller Columns

Double Panes with ckEditor