minimal responsive front-end framework

minframe is a modern HTML5, mobile-first front-end framework built with Sass and Gulp on a 12 column responsive grid. The framework boasts all of the modern accessiblility features and tools developers use in builds but none of the style bloat. The only boilerplate styling is normalize.scss, our 12 column responsive grid and basic HTML5 Sass nesting. Javascript is only required during the build process, not in the browser.

Automated Development Tools

Responsive grid built on Sass preprocessor is automatically compiled, concataneted, minified and autprefixed along with your custom styles to support legacy browsers.

Panini templating ensures you Don't Repeat Yourself by creating reusable head, header and footer layouts templates to combine with the pages unique body content.

BrowserSync Live Reload and device testing built right in.

Gulp.js task runner to streamline and automate your workflow.

Server side PHP5 form validation, sanitation and email processing.

Use the lastest ES6 syntax with Babeljs, automatically check quality with jsHint then compile, concatenate and minify with Uglifyjs.

Automatically generate and update sitemaps.

.htaccess file fine-tuned by the pros at Google.

Stand on the shoulders of giants and use the npm code base in the client with browserify.

No redundant styles to overwrite.

Minimal File Bloat, Maximum Development Power.

The Grid

The Minimal Frameworks Responsive Grid is a 12 column, mobile-first design that scales up to fit all viewports. All columns are 100 width by default until 768px. It is built with Sass mixins eliminating much of the div="class class class" markup that polutes the HTML files of other frameworks. The section tag itself defines horizontal sections and clears floats much like div class="row" in Bootstrap. You also have the option of using div class="section" if that makes more semeantic sense. Columns only require one class col# where # is how many units out of twelve the column spans. Go ahead, resize your browser.

.section

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col1

.col2

.col2

.col2

.col2

.col2

.col2

.col3

.col3

.col3

.col3

.col4

.col4

.col4

.col5

.col7

.col6

.col6

.col7

.col5

.col8

.col4

.col9

.col3

.col10

.col2

.col11

.col1

.col12

DRY Reusable Templates

Don't Repeat Yourself! Zurb's Panini flat file compiler allows us to create pages with consistent reusable layouts and partials. Only write your head, header, navigation and footer one time and reuse it across all of your pages. Only make edits once to change your entire site. If you need multiple layouts, just create them and call which one you would like to use in the Front Matter header on each page.

Front Matter Markup

Top of each unique page(↓index.html↓)

---
layout: default
title: minframe | Mobile-first, Responsive, Light-weight Front-End Framework
url:
image:
description: minframe is a modern HTML5, mobile-first framework built with Sass and Gulp on a 12 column responsive grid. The framework boasts all of the modern accessiblility features and tools developers use in builds but none of the style bloat.
---

Template Head Tags

Populated from page Front Matter markup (↓default.html↓)

<meta description="minframe is a modern HTML5, mobile-first front-end framework built with Sass and Gulp on a 12 column responsive grid. The framework boasts all of the modern accessiblility features and tools developers use in builds but none of the style bloat." />
<meta property="og:title" content="minframe | Mobile-first, Responsive, Light-weight Front-End Framework" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:description" content="minframe is a modern HTML5, mobile-first front-end framework built with Sass and Gulp on a 12 column responsive grid. The framework boasts all of the modern accessiblility features and tools developers use in builds but none of the style bloat." />
<title>minframe | Mobile-first, Responsive, Light-weight Front-End Framework </title>

Get Started

Git CLI

  1. Open your terminal and navigate to where you would like to download the package folder.
    cd desktop
  2. Download minframe.
    git clone https://github.com/joshboyan/minframe.git
  3. Rename the folder.
    mv minframe PROJECTNAME
  4. Change directories into the package you just installed.
    cd PROJECTNAME
  5. Change the GitHub remote repository to one you own.
    git remote set-url origin https://github.com/USERNAME/YOURREPO.git
  6. Verify the remote URL has changed.
    git remote -v
  7. Install the node_module dependencies.
    npm install
  8. Install gulp-cli globally
    npm install -g gulp-cli
  9. Start up the automated build and open chrome with Live Reload.
    gulp
  10. Open _components_ folder with your favorite text editor and create HTML markup in _layouts_ and _pages_, add your Sass styles to _scss_ and JavaScript to _js_.
  11. To stop the automated workflow tools, use:
    ctr c /OR/ cmd c

Git GUI

You can clone minframe using the GitHub GUI but you will need to use your command line interface to work with minframe.

Need a little more instruction to get started? Check out the minframe front-end framework tutorial!