Skip to content

sosukeinu/ssmf

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Intro

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 likemy-mockups.dev or http://localhost/mockups not file://my-desktop/mockups/index.html

Uses:

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/{preset}/header.html

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

Customize the Footer with structure/{preset}/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.

About

Super-Simple Mock-up Framework

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published