Advanced Uses for Heinz

Heinz was built using Sass which enables a lot of powerful customization options. This Page guides you through the process of adjusting the framework to your needs.

Heinz was built for modern browsers using modern tools. We personally really like working with the Prepros Program which offers a GUI for common command-line tools.

Heinz comes with a prepros file included, which will ensure that all compiling is done correctly and no tool is forgotten.

However, if you prefer working with other build-tools or just run the tasks manually, you are very welcome to do that. If you are at that stage of advanced you most probably won't need any help from us anyways. So why are you still reading? Go check our code directly.

Simple Adjustments with Sass

All important settings that you might want to customize have been made using Sass Variables. There is a Settings Partial within the Sass folder which contains all of our settings. You can go ahead and play in there, but we wouldn't recommend that.

Our recommendation is to keep all the defaults in case you want to roll back on something and use the overwrite partial we provided.

Overwriting is very simple. You want to open up the Settings file for referencing, copy the variable name into the overwrite file and then just include your new value.

As an example if you'd like to change the background color, switch the headings and main text font and change the menu background color, you'd do something like this.

$main-font: $sans-serif;
$headings-font: $serif;
$background-color: #eee;
$menu-bg: black;

Custom Grid

There is an additonal empty partial called custom which is the perfect place to add additional Sass Code. Heinz includes a powerful Grid Mixin, which helps you create a fun layout in no time. You know, in case you want to go a bit crazy.

Let's say you want to build a custom Grid like this. You could totally do this to a body tag as well and have a full-screen grid. like here.

Building this is super simple. Start by writing some HTML. To keep this simple this example works with a bunch of div tags.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/heinz.min.css" rel="stylesheet">
    <title>Heinz - Documentation</title>
</head>

<body class="customgrid">
    <div class="area-1"></div>
    <div class="area-2"></div>
    <div class="area-3"></div>
    <div class="area-4"></div>
    <div class="area-5"></div>
    <div class="area-6"></div>
    <div class="area-7"></div>
</body>

</html>

Next is building the Sass. The Grid Creator is a mixin, that takes 4 values. The rows, the columns, the list of elements and the grid layout.

This example works with a simple 4x4 layout, that breaks into a 2x5 grid.

Then this Sass is added to the _custom.scss partial file with two variables. One of them is the breakpoint where the layout should break and the other is a list of colors. This example uses some background colors and stretches all grid items, to fill the full screen. Accomplishing this is just a few lines of SCSS.

$breakpoint: 850px;

$grid-colors: #F5C7CA, #E779AE, #3759A0, #A0CEEC, #EBEBEB, #D7E6E8, #D6D3EE;

@each $c in $grid-colors {
    $i: index($grid-colors, $c);
    .area-#{$i} {
        background: $c;
        box-shadow: inset 0px 0px 5px darken($c, 30%);
    }
}

.customgrid{
    width: 100%;
    height: 100vh;
    align-items: stretch;
}

Now for the actual Grid Part. In this example auto-sizing is used for the grid items, passing the list of items will assign the area to the container with the class of the same name in the HTML. So make sure you use those area names as your class names, in order for this to work. The amount of classes is variable, you can pass an empty list too, which is what happends in this example, when the gridCreator mixin is called again, for our media query. Then just build the layout, and you're done.

.customgrid{
    width: 100%;
    height: 100vh;
    align-items: stretch;

    @include gridCreator(
        auto auto auto auto,
        auto auto auto auto,
        (area-1, area-2, area-3, area-4, area-5, area-6, area-7),
        'area-1 area-2 area-3 area-3',
        'area-4 area-2 area-3 area-3',
        'area-4 area-5 area-5 area-6',
        'area-7 area-7 area-7 area-6');

    @media screen and (max-width: $breakpoint){
        @include gridCreator(
            auto auto auto auto auto,
            auto auto,
            (),
            'area-1 area-2',
            'area-3 area-3',
            'area-4 area-5',
            'area-6 area-5',
            'area-7 area-7');
    }
}

The possibilities of this are infinite and will help in creating some very interesting looks with ease.