A mini framework for wireframes, prototypes and small sites
A mini framework for wireframes, prototypes and small sites
Why another html/css framework? Everything is already online. Well… Yes and no.
The "real" ones have grown to enormous complexity (Tailwind, Bootstrap, Materialize…), lack templates and are trageted at developers, not designers. The super bare-bones approaches are in turn so frugal that they look like mid 2000s, although they are way more modern under the hood.
I wanted one with a flexible layout grid that I could just fill with content or lorem ipsum, push some blocks around and put a copy wherever I wanted to. So I ended up building one myself.
It is by no means a complete framework, and I stopped whenever I could set up layouts the way I needed them to be. One example: I found css grid too complex for my needs, so I kept using flex.
Over quite some prototyping work this has gathered a lot of simple, yet useful features. And since you just pull a copy you‘re free to run it everywhere, including just from disk — even without a server. And I strongly encourage you to tinker with all elements you think should be different.
You‘ll need an html-editor, though.
The pages use very little PHP to insert navigation content into <nav> and <footer> and therefore pages are .php – to avoid any .htaccess tinkering. In development scss is used to generate the stylesheet.
For static projects this version works without a server and will run from disk, you just have to take care of links with search/replace. You can still use /res/scss/ or just edit the static /assets/css/styles.css. But not both!
Sections are used to get vertical stackable independant containers for all sorts of content
A modular 12-column grid that spaces out 1/1 - 1/12 columns, which can be arranged traditionally or asymmetrically.
As placeholders for your design there are two font-families at work here, which you are invited to exchange with your own choice
Simple backgrounds, fluid inline images and fully configurable responsive picture/srcsets
All colors are based on css-variables and have a dark-mode twin
No jQuery, no npm install, no js-libraries. PHP and scss optional, Google fonts for the demo
slide-out one-level navigation, footer as a mini sitemap. Content is included via PHP or static for the .html version
A small icon font, three sizes, four composition options and five preset flavours (that you‘re invited to change)
All form elements are styled and responsive, text inputs come in two variations.
simple show/hide window with a backdrop, can contain small forms or messages
sample arrangements of sections, columns, text and images, wrapped columns, wrapped boxes
columns with a set of content elements, made visible via background or shadow
Hey! this is a card!
freeform hangings of images with a variety of aspect ratios
multiple images in one spot, basic controls, some content on top as an option
a take on responsive tables, very little adjustments to ordered/unordered lists
common page layouts as templates to start with and overwrite
The principles are or should be: as little markup as possible, simplicity, expandability and easy to build by hand. Design-wise the default style is intended to be as unobtrusive and invisible as possible, but still look decent. Which you can just ignore and do wild things with every element.
These pages are entirely built with frame·plates‘ own components. So all documantation (well, that‘s a stretch somehow) doubles as a template, that's why layouts change all the time. You are invited to overwrite everythingto your heart‘s content — in your copy.
As a bare-bones construction kit with styled forms and minimal navigation the complete CSS weighs in at about 30 kilobytes without comments, uncompressed. Four lines of js. For comparison: Bootstrap comes with 120k CSS and 130k js before the first body-tag even opens…
All components are completely responsive, but in a predefined way. E.g. 1/3 columns are 1/3 for desktop, 1/2 for tablet and 1/1 for mobile breakpoints. Setting dimensions for each breakpoint for each element has always been overkill for prototypes and simple sites. But you can change that in res/scss/_grid.css
All html, css, js and svg tinkering is done in Nova by Panic, because it‘s a supercool native Mac app and has a nice preview server built in (no PHP, though)
I run scss through Scout app (but actually only use css), because it is simple and solid (even free!) and because the Nova-Plugin couldn‘t handle some setups I had to use. Sorry.
For local development I run all my projects in MAMP pro, which is not cheap. If you only work on one project at a time the free version will do just fine.
Layout and grid development was done in Sketch, which I love as an app, but I can‘t bring myself to adopt the cloud-based document handling they introduced some time ago. I keep my stuff local.
As a fierce opponent to Adobe’s Creative Cloud (especially its pricing, having paid for their apps since the mid-nineties) I completely switched to Affinity about 9 years ago. Never looked back, just great.
Sometimes I need a special font for icons or extra characters which I entrust Glyphs with — which has become an absolute monster. Today I would go for the "Mini" version for 50€. But no .woff2 option… : (
Disclaimer: Everything here is free to use, but no responsibility is taken for any outcome. Questions & Suggestions: ak at alexkoch dot net (you‘re not a robot, I know). And I don‘t use cookies. Version history