Frast

Fast frontend mockup

Focus on code & design.
Let Frast do the rest.

Frast makes your frontend dev fast. It provides an out-of-the-box toolset to code static pages from scratch, providing best developper experience and focusing on performance.

  • Code fast and clean thanks to:
    • live reload on your sources ;
    • lint on the fly on any mistake you do ;
    • desktop notification when somethig goes wrong.
  • Plug contents
    • include external libs easily with bower ;
    • use require in your javascript thanks to browserify ;
    • include your customer html and markdown contents ;
    • put random images for your mockups ;
    • use and configure your fonticon with ease ;
    • get your sprites automatically built.
  • Publish instantly on github.io, it's free and simple! Moreover, Frast provide optimized output code - html compression, css compression, javascript compression, images optmisation, so your page will load fast.

Fork me on Github

Install in a minute

Usecases

Frast is perfect for:

  • static html page buidling ;
  • html mockup ;
  • test frontend concept/UI and ideas ;
  • github.io page creation.

For example, this page is built with Frast :)

How it works.

No magic.
Just best practices in a nutshell.

Frast is built over gulp and comes with awesome services and best practices. It has been developped, keeping in mind the "Keep It Simple Stupid" adage.

All your source codes are checked, optimized, compiled and served throught a light micro-server. You can access the result on your browser, update your work easily, and publish it on github.io in a minute.

You're the master.
Do what YOU want

All tools are integrated to make you work fast with a default optimized config. But you can easily turn anything on/off or custom any of their options.

You have not to adopt Frast. Frast adapts to your needs. If it fails, fork it to break it! Or ask us to improve it.

Install Frast in a minute

Terminal
  1. git clone http://github.com/tilap/frast.git myproject
  2. cd myproject
  3. make install
  4. make watch

Clone the repo. Install the dependancies. Start coding.

You can access all the other magic with a few command lines.

Read doc examples

Code fast & clean.

Livereload:
See what you're coding.

Frast comes with html, javascript and less compilation. But you don't loose time asking for compilation everytime nor refreshing your browser.

Frast watchs any change on your files. When you save a file, Frast compiles and refresh the changes on your browser. Moreover, Frast only reloads what's needed: you change a less file, only the CSS will be live reloaded.

You see what you code in realtime, adjust quickly your code to get what you aim to.

No more ugly code:
Stay alert on any mistake.

While coding fast, you sometimes do mistake in your code: bad html tagging, error in you javascript file, ...

"Errare humanum est, perseverare diabolicum"

Frast provides live linting on compilation and checks the code of any file you save. If there is an error, you'll know it instantly with a smart desktop notification. Clean code has never been so easy.

Make your app beautifull.
Use external ressources.

Bower

Frast comes with bower. It installs bower locally, so you don't need to install it globally on your computer or bother about the version.

Updating the bower.json file, you can add thousands of frontend library fast, no matter of dependancies.

Browserify

If you often use the same components and they are not in bower, include them fast with browserify.

Or code clean by separating you javascript features and take advantage of javascript require function.

Html and Markdown

Thanks to gulp plugins, Frast allows to include external html or markdown files (wich of course are parsed on compilation).

Thus you can easily put your customer contents. Or reuse the same files in many places, on many pages.

Put real images, no placeholders.

While you're coding a mockup or some frontend test, you often need images but you don't have time finding, croping, resizing somes that won't be kept.

Frast comes with a easy-to-use helper you can put anywhere in your html to insert a random image. For example, write that in your html file:

<%- randomImg(400, 250, 'nightlife') %>
Some few of the fontello available icons

Customize your fonticon fast, Frast comes with the Fontello UI editor.

Frast comes with fontello automation. Open your current frast project fonticon, edit it in fontello GUI, add, edit, custom, save, and they are available in your project.

If you have no fonticon coz your not a designer, you can access all the fonticon preset easily.

Don't be shame using small images, Frast build your sprite.

If you need lots of small images, you'll probably want to use sprites. Frast comes with a task generating your sprite automaticall and the LessCss class to use it.

Just drop your images in a the sprite project folder, and use the css class.

Sample of generated sprite

Publish on github.io
Only 2 rows needed!

Once you're happy with your webpages, you can publish it on github.io.

Frast will be clean, compil again to keep sure everything is good and push on the gh-pages of your repo. Your website will be available on http://username.github.io/repositoryname/

As Frast optimize html, css, javascript, images, ... the page will look really good and load fast.

By changing the configuration, you can push you static page on any other repository/branch.

Terminal
  1. make githubio
  2. make publish

Documentation

Command line

make install

Will install all the dependancies for the first time (node and bower packages) and copy a samble config file.

make update

Update the dependancies (npm and bower) after prune to keep installed packages cleaned.

make watch

Start the local webserver and watch all the sources files, triggering live reload on usefull file changes.

make githubio

Initialize the local and remote gh-pages branch. Delete the existing ones if any.

make publish

Publish the static webpages built on the gh-pages branch of your repositoriy.

make clean

Clean all the useless stuff. Usefull when you need to tar you code.

make fontopenmac

Open the project fonticon library on your browser (for Mac users)

make fontopenlinux

Open the project fonticon library on your browser (for Linux users)

make fontsave

Once you have edited your font on fontello, use it to import your fonticon in your project.

Quick how-to / F.A.Q.

How to start?

First of all, install Frast (see "Install Frast in a minute" section above)

I don't like doc, I prefer code

Checkout and take a llok at the demo branch of the repo. It's the source code of the current page.

Where is my source code?

All your source code is in the "src" folder. Subfolders are explicitly named:

  • assets: static images (mostly used as background image or with inline tag <img>). All of them will be optimised/copy in /dist/assets/
  • fonts: for fonts
    • fonts/fontello folder automatically import from fontello with the make font* command lines
  • html for all your html/ejs/markdown files. All the first level pages will be output in /dist/. See below for all the file processing and the available helpers/tools.
  • js for the Javascripts that are browserified, compressed and copy in the /dist/js/ folder
  • sprites: the place where you put png/jpg that will be aggregate in a sprite - see below for more information.
  • stylesheet: where you put your less files. Each top level less file will be output as a compiled/compressed css file with the same basename in dist/stylesheet
    • sprites: contains the automatically generated file sprites.less when using sprites.
  • tools: templates files for sprites and other tools

HTML helpers

Insert variable from config (EJS)

Set your configuration values in the config.js 'contentdata' property. Then use ejs standard markers. Example :

In config.js

module.exports = {
    contentdata: {
        app: {
            name: 'Frast'
        },
        author: 'Tilap'
    },
    server: {
    ...

In a html top level page:

<%- app.name %>
<%- author %>
Include html files in your main html

To include a basic html:

@@include('./includes/my-file.html')

To include a html, setting some content vars:

@@include('./includes/my-file.html', {
    var1: 'my var 1 value is wonderfull',
    var2: 'my var 2 value is awesome'
})

In your ./includes/my-file.html file, you'll be able to display the vars values anywhere in the dom with:

@@var1
@@var2
Include markdown files in your main html

To include a markdown file that will be compiled in html:

@@include(markdown('./includes/my-markdown.md'))
Include a random image

Thanks to Lorem Pixel service, you can set random image for your mockup anywhere in your top level html page. For a 400px x 250px random image, use that for example:

<%- randomImg(400, 250, 'nightlife') %>

You can set the following categories: abstract, animals, business, cats, city, food, nightlife, fashion, people, nature, sports, technics, transport.

Include css/javascript

The compliation task use usemin plugin. SO in your html, you can merge many external css/js files with it. For example:

<!-- build:js js/bundle.js -->
<script src="../../vendor/jquery/dist/jquery.js"></script>
<script src="js/app.js"></script>
<!-- endbuild -->

Will merge ../../vendor/jquery/dist/jquery.js and js/app.js files, compress them, rename the whole result in js/bundle.js file. Moreover, it will add a unique suffix (ie somthing like js/bundle-01234.js) automatically and replace the whole closure with a beautifull 

<script src="js/bundle-01234.js"></script>

The suffix is a hash based on file content, so it avoid browser script/css file caching.

You can do the same with css:

<!-- build:css stylesheet/style.css -->
<link rel="stylesheet" href="../../tmp/stylesheet/stylesheet.css" />
<!-- endbuild -->

(here only one file, but will still be renamed with a hash suffix so no brwoser cache problem).

How to use external libs (bootstrap, jquery, and so on...)

Frast is built over bower. If you don't know bower, here a really basic usage (try learning the few thing to know by asking Google...). To install bootstrap for example:

bower install --save bootstrap
How to use less files ?

Less is compiled by default with bower directory as additional path. So just put something like :

@import 'bootstrap/less/mixins/vendor-prefixes.less';

or if you want the whole bootstrap css file:

@import (inline) 'bootstrap/dist/css/bootstrap.css';
How to add external javascript files ?

You have 2 main ways do to it. Some external libraries can be browserified, so just use require.

If not, use the html helper describes above.

How to change the linter options, disable a feature, ....?

Just read and edit the config.js file after installing.