Skip to content

Introduction

Layout is a mobile-first responsive frontend framework built with a focus on animated user interface elements. The framework also provides sensible default styles that are easy to learn, use, and customize. Also, instead of being a bloated static layer beneath your project, it's meant to be a dynamic organized starting point that can grow with your project.

Download

First you'll need to download the framework.

Download Layout

Layout's total footprint, minified and gzipped, is only about 4 KB.

File Structure

The framework is split into two main folders called src which stands for source and dist which stands for distribution.

Folder Description
src Contains the files you'll need to edit to start creating your web interface.
dist Contain the final files you'll want to upload onto to a public web server.

Compiling

You'll also need to download Prepros to compile your CSS and JS.

Download Prepros

It uses the SCSS version of Sass and some of the latest features CSS has to offer such as Flexbox.

Code Editor

You'll need a code editor as well. We recommend using Atom.

Download Atom

Browser Support

It's also tested to be compatible with the latest desktop versions of Chrome, Firefox, Safari, Edge, and Opera web browsers and the latest mobile versions of Chrome and Safari. You'll probably want to install all of them for testing purposes.

For more in-depth browser support information on frontend web technologies for desktop and mobile web browsers we recommend using Can i use.

Intro Type Tables Forms Grid Download