The principles of beautiful web design

Layout and Composition

When most people think about grids, they think about engineering and architecture. However, the grid is an essential tool for graphic design as well, and the use of grids in website design have exploded in popularity in the last few years.

With the foundation framework you can start with responsive templates.

💡 Protip: Keep It Simple. Try to follow the principes of


  • Download a template

  • Hack the grid and build your own layout

  • If you feel lost just edit this file for now <PROJECT_NAME>/src/pages/index.html


At the beginnig a beautiful webdesign only need 3 colors. In this example you can see one main contrasted color (red), versus others colors (green).

Don't write CSS here. We are going to use SCSS variables.

$foundation-palette: (
primary: #1779ba,
secondary: #767676,
success: #3adb76,
warning: #ffae00,
alert: #cc4b37,
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;

Now you have defined your own colors your can use $primary-color, $secondary-color or $black for your design.

💡 Protip: There are a lot of color scheme generator, try to use one like



For a great font pairing you can use

In the foundation world, you only need to edit theses variables and BAM your hole website is updated.

$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
// 4. Base Typography
// ------------------
$header-font-family: $body-font-family;

💡 Protip: Maximum 2 types of differents fonts because web performance matters.



One the fastest solution to have icons is to use

Just add the CDN link on your <head>

<link href="" rel="stylesheet">


  • Choose an icon library

  • Edit this file<PROJECT_NAME>/src/layouts/default.html

Imagery is a great website for high-resolution photos.