Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

How would you config file on this site?

HI,

If you look at (this)[https://karhoo.com/en-GB/] site, I'm re-doing it with Sass, and i was wondering, how should i take the approach it?

How shoulc my confi file look like?

At the moment it looks like

// ==========================================================================
// Config
// ==========================================================================

// Font Stacks

$font-family--primary    : web-objektiv,sans-serif;
$font-family--secondary  : 'Helvetica Neue', Helvetica, Arial, sans-serif;

// Font Weights

$font-weight--thin       : 100;
$font-weight--light      : 300;
$font-weight--medium     : 400;
$font-weight--bold       : 700;
$font-weight--ultra-bold : 900;

// Text

$base__font-size : 16px;
$base__line      : 24px;
$letter-space    : 1px;

// Path to Assets

$path--rel      : "assets/img/";

// Breakpoints

$brk-xs    : 1px;
$brk-sm    : 544px;
$brk-md    : 768px;

But how woudl i set a good file for that? What about circle colors? main colors etc.. how woudl you name them? etc..

1 Answer

Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Hello Mr Bond 007,

For the circles on the website, it might be a good idea to store the values of the colors used in the circle gradients in individual variables and then creating variables with the gradient colors like below. 

$color-red: #e74c3c;
$color-orange: #e67e22;

$redOrange-gradient: linear-gradient(to right, $color-red , $color-orange);

//you can also create primary and secondary color variables for the main colors used on your website

$primary-color: #1abc9c;
$secondary-color: #34495e;
$terciary-color: #95a5a6; 
$text-color: #2c3e50;
$main-headline-color: #27ae60;

//etc...
Daniel Gonzalez
Daniel Gonzalez
22,105 Points

This way by storing your desired "red" and "orange" color in a variable if you need to change the color to a different shade of red, you won't have to create a new color-red variable and enter it everywhere it is used in your files. You could just change the value of the $color-red file.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Hmmm, thank you, i give it a go.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Oh, okay, now i get it even better! I don't know why the comment says it was writen 1d ago, but It showed it me now, but now i get it. Thank you :) that's what i was acutally thinking.