Guide for new frontend developers

Download Atom

This is the code editor we use on the design/frontend team. You are free to use another code editor, but this guide only focuses on Atom. We use SCSS in Berú, so make sure to download this Atom package: sass-autocompile

You should also make sure to have this setting setup for the "sass-autocompile" plugin:

Remove checkmarks for these two settings:

Check off this box:

A GoBasic theme consists of this overall file structure:

The GFX folder

If you have any svg's for buttons, graphical elements etc., place it in the gfx folder.

The fonts folder

Place webfonts here, and place them in their own, individual folders like this:

The js folder

Place .js and individual script files here.

The CSS folder

This folder is mainly divided into custom and variables. We want to make the styling as DRY (Don't Repeat Yourself) as possible, so please try to use as many variables as possible in order to implement the design exactly like the Sketch file. Custom files are only for when you can't achieve something in the design with variables.

Variables are already imported per default in the theme, so you don't need to do this:

Customizing the variables

When you start to implement the design, go through all of the variable files and see what you can tweak in order to achieve a design that looks like the Sketch file.

In each theme you will find the most commonly used variables, but you will find even more in the GoBasicV5 folder, right here:

Web Projects/GoBasicV5/GoBasic.Web/Themes/_base-v5/css/variables

From here you can copy variables into your theme in the "variables" folder and tweak them.

If you want to edit how a variable is built in the base stylesheet, you can find that here:

Web Projects/GoBasicV5/GoBasic.Web/Themes/_base-v5/css/folder-name

So in the css folder we have sub folders with all of the BASE styling for modules, components, navigation, buttons etc. Here you can see what exactly the variable affects in the base stylesheet, in this example it's the padding of a div:

 

Spacing

We work with the 8-point grid, so when doing spacing, padding, margin etc. try to use these variables as much as possible: 

So if you see some spacing in the Sketch design that's fx 9 pixels, talk to the designer and make sure that it should be 8 instead to avoid not using the variables.

Custom scss

When you can't find variables to achieve the look of the Sketch design, you can make custom files and place them in this folder:

The custom files should be imported in theme.css, like this:

Things to remember when making custom scss files

• It's still important to use as many variables as possible when making custom files, so the code is as easy to maintain as possible.
• Try to not use HEX codes, use your color variables instead, try to not use fixed pixel sizes, but use your size variables instead etc.
• If you have a custom element that you reuse a lot in the theme, make a placeholder and place it in a _placeholders.scss file in the custom folder, and@extend it where you want to use it, like this example:

Download Charles Proxy

This software lets you map your local stylesheets to a live site, so you don't need to upload new css every time you make a small change. Ask someone on the web team for a serial number so you don't just have a trial.

Download the software, and do this if you're on a Mac:

Download Tortoise HG

This is a program that lets you pull new code changes from repositories ("repo's") that represent all of the GoBasic solutions. It will also let you push new changes to the repo when you've made some changes in the code on your own computer.

Before heading into Tortoise, there are a couple of things you should do:

• Get a user from someone on the web team for: https://repos.beru.dk/hgweb.cgi/
• Make this folder structure in your "Documents" folder: "Documents/Web Projects/GoBasic Solutions". Just make the empty folders for now, and they will fill up later.

Now, log in to the URL from the first bullet above.

After logging in you should be able to see all of our solutions in this list:

Click on the solution "GoBasicV5", and copy the URL in your browser:

Now, go to Tortoise HG and click "File > Clone repository".

In the source path, paste in the URL you just copied:

In "Destination", put the GoBasicV5 code in the "Web Projects" folder you created before.

Remember to check off "Do not verify host certificate" as well.

Now you have the BASE stylesheet, so you can compile all of the individual themes. When downloading another solution that is not GoBasicV5, place it inside the "GoBasic Solutions" folder, like this example where we are downloading the solution "DKR":

This might seem like a lot, but remember, you only have to download the solutions once. When you have downloaded the solutions you are working on, you can push and pull code for the repository inside Tortoise HG.

Pulling new changes

When clicking on a repository in the left navigation in Tortoise HG:

You will see a list of the changes in the branch. To update and pull the newest changes, click this button in the top bar: 

When you have done this, remember to update to the newest branch you are working on:

Now you can push the changes you are making.

Pushing new changes

When you've made changes and updated to the latest update on the branch you're working on, click this icon in the top bar: 

Now, you will get a list of your newest changes:

Click the refresh icon to make sure you have everything: 

Write a comment for your newest changes before clicking the "Commit" button in the right corner of this view:

Remember to be as detailed as possible, so there is no misunderstandings between developers, this is very important.

Now, click "Commit". You now have a draft on the branch but it's not public for everyone yet.

To publish the changes and make it public, click this button: 

And that's it!

 

Before proceeding to the next step, you should do the following:

1. Install this version of Node.js and NPM: https://nodejs.org/download/release/v10.6.0/
2. Go to terminal and write: sudo npm install -g --unsafe-perm node-sass
3. Still in terminal, write: sudo npm install -g gulp@3.9.1
4. Go to your /user and delete the "node_modules" folder if it exists, and replace it with this folder: https://www.dropbox.com/sh/ci4ixsu5xkce35d/AADOG4b1YAFwTR6Ra-vDIIQBa?dl=1

You should install Node.js, NPM and Gulp before following these steps. Please see the previous chapter to learn how to do this.

This will enable you to compile and make release files of themes, so you can upload your newest updates to the server (but remember to commit and push your changes first!)

To make release files, go to the solution's "Themes" folder in terminal, like this example:

cd "Documents/Web Projects/GoBasic Solutions/coronasmitte/Website/Themes"

When you are here, use the gulp command in terminal and press enter:

gulp

Now the theme's release files are being created in: "/Themes/theme-name/Release"

Now you can proceed to upload the files to the server.

Before you can do this, download Microsoft Remote Desktop.

When you have done so, add the different servers in Microsoft Remote Desktop. You can see the IP's, usernames and passwords here:

We take pride in meeting the WCAG 2.1 A + AA standards. Almost all the GoBasic HTML is accessible, and we strive to constantly improve it and meet the newest standards and demands.

Therefore, we strongly encourage you to learn about accessible frontend code, and keep up with the latest requirements of WCAG 2.1 A + AA. Meeting these requirements is a big deal for our customers, so it's very important that we deliver compliant code.

When making HTML, be sure to scan your code with a tool like AXE or WAVE to check if it's accessible. This will save us a lot of time, and give us even happier clients 😊