Grace

Web Frontend Fundament

We at Me & Company are using this boilerplate project to set up our web projects. It unifies the structure of each project and simplifies the start of development.

Essentially, it provides the folder structure and some basic files for SASS and JavaScript. It has a builder included with various tasks, which add value to each project and improve the quality without any major effort. We implemented some features, at this stage especially for the work with SASS. It is adaptable for other frameworks, but can also be used as an independent HTML framework.

Installation

Download or clone into your project folder
Run npm install
As macOS user you need some extra steps for the images build process to work: Install Homebrew, then install libpng library with brew install libpng
Run gulp dev and you are ready to go

Features

1. HTML

There is a basic index.html file, where you can import template snippets via Gulp File Include e.g.:

    <html>

    @@include('./src/html/snippets/header.html');

    ...

    </html>

With gulp include the html files get build and gulp html minifies them into the dist folder.

2. SASS

Settings

We have variables for most attributes in CSS, which are individual for each project and design related.

define basic variables, like maximum page size, values for spacing rhythm
define breakpoints
define color variables, font-size variables, grid options, spacing variables
see settings

Tools

There are several mixins and functions to simplify and unify common used declarations like font-sizes, colors, breakpoints and spacing.

responsive font-size: @include font-size(base)
fixed font-size: @include font-size(base, sm, false)
use defined colors: color: color(base)
device-based breakpoints: @include breakpoint(md)
content-based breakpoints: @include breakpoint(920px)
use defined spacings: padding-top: spacing(m), for text-spacing: padding-bottom: text-spacing(l)

Grid

We implemented a sass generated grid. You are able to choose your preferred grid type (flex, float, inlineblock, CSS Grids coming soon), the amount of columns and the spacing between columns. The generated grid classes are mostly named like bootstrap, e.g.:

col-6, col-lg-6, col-md-6, col-sm-6, col-xs-6
col-offset-6, col-lg-offset-6, col-md-offset-6, col-sm-offset-6, col-xs-offset-6

Atoms, Elements, Modules

We are using a customized approach of Atomic Design. We decided to call molecules 'elements' and organisms 'modules'. Semantically they are pretty much the same.

Have a look at our template file for a suggested structure of attribute declarations and examples of usage.

Helper Classes

Instead of creating a variation of an element or atom class for unique styling cases we are using helper classes.

spacing: .mt-1, .mb-1, .n-mt-1, .mt-md-1, .pt-1, ...
font styling: .font-lg-base, .font-bold, .text-uppercase, ...
see helpers for more

3. JavaScript

support of EcmaScript6 via Babel Polyfill
included jQuery
...more to come

4. Inline SVG-Icons

We are using inline SVG-Icons. The build process gulp images optimizes the SVGs using SVGO, builds them into a PHP file and as .svg-files to the image folder. From there you can either import them by using the PHP variables or using the built-in Gulp File Include module.

inline import into HTML template via @@include(dist/img/icons/icon-atom.svg)

inline import for PHP e.g.:

  <?php require 'icons.php'; ?>

  <span class="icon"><?php echo $icon_atom; ?></span>

Gulp Tasks

gulp dev - used in development environment gulp build - used for production environment

Others

images optimized by mozjpeg, pngquant
BrowserSync
minified JS, CSS and HTML

Browser Support

last 4 versions, not ie <= 10, not Edge <= 13, Safari >= 8
see browserl.ist fore more information

Future Work

implement JS Features
add JS and SASS Linting
integrate automated test setup

We'd like to hear your opinion, any comments or suggestions to make it even better.

Built with <3 by Me & Company

man-oi / grace Goto Github PK

grace's Introduction