Skip to content

First experiment: Change the design

Jump to bottom
Osvaldo edited this page Jan 28, 2023 · 11 revisions

After you have set up your site to do experiments with Abrantes, you can start your first experiment. This will help you to start understanding how Abrantes works.

In this first experiment we'll have a page with a header and a paragraph. We want to test what happens if we increase or decrease the text size. For this we'll create two variants: variant-1 with bigger text and variant-2 with smaller text.

The html and the css

First the html is:

<h1>Lorem ipsum</h1>

<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Now we'll add the css for the two variants to the page. As Abrantes will add a class name to the <body> tag identifying the variant, the CSS is:

<style>
    .variant-1 h1 {
        font-size: 2.5rem;
    }

    .variant-1 p {
        font-size: 1.5rem;
    }

    .variant-2 h1 {
        font-size: 1.7rem;
    }

    .variant-2 p {
        font-size: 0.8rem;
    }
</style>

Please note the CSS can be in a .css file linked inside the <head>. This makes a lot of sense for CSS that's being applied to many pages or for larger changes in CSS. CSS can become larger specially if you use media queries to experiment with specific design for certain screen sizes or types of device.

The JavaScript

Use JavaScript to control all about the experiment. Let’s go trough each line/block and explain it. Just like the css, JavaScript can be inserted in the html or in a separate .js file.

First we create an object to configure and control the experiment. It can be named anything you want, as long as it does not conflict with other objects in your page. In this example let's name it MyDesginExperiment

var MyDesginExperiment = Object.create(Abrantes);

Now we need to define how what each variant does. Each variant is defined by a JavaScript function in an array.

MyDesginExperiment.variants = [

    // Original
    function () {
    },

    // Variant 1
    function () {
    },

    // Variant 2
    function () {
    },

];

Please note that in this example all changes are defined only in the css, so all you need is an empty function for each variant, including the original.

Clone this wiki locally