Setting up and Variables

As explained in the installation guide you will need to reference the two main CSS imports for GEFF in your css application.

Separating GEFF's variables and the style files allow you to override any of the original base variables found in GEFF. If you create a variable-override SCSS file and place it in between the two GEFF css imports within your application file, you can override any variables used in the base layout.

@import 'geff/variables'
@import 'variable-overrides'
@import 'geff/style'

Inside your variable override file you can change any variable used in GEFFs base styles.

A good example of this is the primary color variable which will undoubtably need to be changed. $primary-color is set to the base $blue color of #1565c0.

On top of this there are many other variables that can easily be changed, here is an example of some important ones:

Base Colors:

$blue: #1565c0;
$red: #c71f16;

$black: #333;
$medium-gray: #bdbdbd;
$light-gray: #F6F6F6;
$white: #fff;

$primary-color: $blue; // The main colour used for all buttons and links
$card-background: $white; // The colour of the background of the card component
$negative-color: $red; // The colour of negative attributes like errors.
$positive-color: $blue;

$base-font-color: $black;
$base-border-color: $medium-gray;
$base-background-color: #fff;

Border Radius

The border radius used as a base for all card and button components - set to 0 if no border radius is wanted.

$base-border-radius: 4px;

$base-border: 1px solid $base-border-color;

Typography

The base font for everything is the core font of the users operating system. To change the font family just add into your variable-override file any new fonts you want to use and change the $base-font-family or $heading-font-family. More info about Typography

$font-stack-system: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
$base-font-family: $font-stack-system;
$heading-font-family: $base-font-family;

$base-line-height: 1.5;
$base-line-height-desktop: 1.75;
$heading-line-height: 1.2;

Media Queries

These Media queries are used for any css relating to media sizes. If needed these can also be changed in the variable file. These are used to control our media query mixins, you can find out more here.

$tablet-width: 640px;
$desktop-width: 960px;
$hd-desktop-width: 1440px;

Customisation

As explained you can easily customise GEFF to your project by creating the variable override file. GEFF also has a load of other base styles and components you can read about in the other pages on the wiki. But obviously no one project is the same - and GEFF isn't meant to define the style of the project, its a tool for creating the base framework of the front end, and providing some useful helpers and mixins. Customisation is fully the aim for any project using GEFF and do not feel constrained by anything.

What I would recommend is as you customise GEFF in your project, just create new scss files that will sit on top of the layers. Have a look at our thinking on Component Design which includes naming conventions and folder and file structure. This is the same structure GEFF follows. So in your project, lets say you want to completely customise the button element. (Don't forget if its as simple as changing the colour or removing the border-radius - you can do so in the variable override file!)

What I recommend you do is create a new folder in your project called elements/ in here you can create a buttons.scss file which you can put all of you styles relating to buttons in. Of course you can do this for any element or component! GEFF does not mind, GEFF knows that no one project will always have the same style of card, or form, GEFF just gives an initial style to get you going.