Brandaris

Front end awesomeness, true story

Getting started

Brandaris is a mobile first framework, which has a flexible grid, with vertical rythm, modular scale, and responsive ratio based headlines for typography. It is extended with the Entypo+ SVG icons from Daniel Bruce and easy to use, thanks to this automatically build (thanks Jekyll) documentation.

System Preparation

Required tools

To use the front end develop environment for the projects, you’ll need the following things installed on your machine.

  1. NodeJS - use the installer.
  2. Ruby - use an installer like RubyInstaller.
  3. Jekyll - $ gem install jekyll jekyll-sitemap kramdown rouge
  4. GulpJS - $ npm install -g gulp
  • Atom
    Atom is a fast, goodlooking and extendable text editor by GitHub.
  • Cmdr
    Console emulator for Windows, based on Conemu. For context menu integration open terminal in installation dir (preferably C:\cmder) as Administrator and run .\cmder.exe /REGISTER ALL.
    Mini (download) version should be enough.

Local Installation

After installing required tools, run the following command inside the Brandaris directory:

$ npm install

Usage

Run this simple command for more information about available tasks and options.

$ gulp help

HTML template

Often you need an empty HTML template. You can steal this one, I won’t tell.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="<!-- Page description -->">
    <meta name="author" content="<!-- Your name -->">

    <title><!-- Page title --></title>

    <link href="/assets/styles/main.css" rel="stylesheet">
    <link rel="apple-touch-icon" href="/assets/images/apple-touch-icon.png">
    <link rel="icon" href="/favicon.ico">

    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="<!-- Site name -->">
    <meta property="og:title" content="<!-- Page title -->">
    <meta property="og:description" content="<!-- Page description -->">
    <meta property="og:url" content="<!-- Page url -->">
    <meta property="og:image" content="<!-- Page image -->">
  </head>
  <body>
    <!-- Content -->
  </body>
</html>
On this page