KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

microframe

★ 298 Open GitHub ↗

:microscope: :triangular_ruler: :pencil2: Microframe is a micro (<200px wide), grid based wireframe PSD template for UI and UX designers mocking up website and app layouts.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Microframe Template

**Microframe is a micro (200px wide), grid based wireframe PSD template for mocking up website and app layouts. The repo includes:**

1. A [Microframe PSD Template](https://github.com/jglovier/microframe/blob/master/responsive-microframe.psd?raw=true "Download Now") with a 12 column grid and 3 sample layouts (12 column, 6 column, and 4 column layouts).
2. A [Blank Microframe PSD Template](https://github.com/jglovier/microframe/blob/master/responsive-microframe-blank.psd?raw=true "Download Now") with 12 column grid (*empty so you don't have to delete layers every time*).
3. A [Microframe Detail PSD Template](https://github.com/jglovier/microframe/blob/master/micrframe-detail-template.psd?raw=true "Download Now") which you can place your Microframe PSDs in to explain/present to clients, or simply detail components for your own reference. The Detail PSD also has a view for laying out your layout variations (as seen in the two screens below).

![Sample Microframe Detail Image](https://raw.github.com/jglovier/microframe/master/samples/microframe-detail-template.png)
![Sample Microframe Responsive Views Image](https://raw.github.com/jglovier/microframe/master/samples/microframe-responsive-views-template.png)

## Features

### Grid Based
The PSD uses guides to create a 12 column grid which you can use to align your elements all pertty like.

### Includes 3 Layouts for Responsive Designs
There is a 12 column layout (for standard laptop/desktop views), a 6 column layout (for tablet views), and a 4 column layout (for mobile views). Each layout is grouped into a Photoshop group.

## Questions

### Why Should I Wireframe?
Because it helps you isolate the abstract challenges of layout design from the aesthetic details of UI design. If you really want to know more about why I'm a big proponent of wireframing as the second or third step (markerboard and/or pencil and paper should always come first), read [Markerboard Mentality](http://stemmings.com/markerboard-mentality/).

### Why Do I Need Your Template?
To save you time.

### Why Is It Micro?
Great question. I've simply found that working in very small pixel units helps me to focus on the overall layout more than nudging pixels one way or another. Also because it makes creating SASS forumulas for percentage width layouts really simple. ;-)

### Should I Modify The Template?
Yes! It includes a sample layout to get you started, just so you get a feel for how to use the thing. But once you grok that just delete all the layers that you don't want and just start using the space to create your own layout.

You also might want to save out a blank copy as your own template. Then, each time you go to start a new project open your personalized starter template, save a copy of it for your new project, and start laying out your page elements for that project.

### Can I Fork Your Repo?
Um, yes! That's how this open source stuff works, my friend. Please fork and make it your own, or make it better and share with the world!

### Can I Submit Issues or Feature Requests?
Yeah buddy! Just use the repo issues tracker and I'll address things as I am able.

microframe

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README