Variables

Tweak your castles defaults

Note: Never overwrite the castlecss-core variables, but instead create your own document and overwrite the variables there. We have already included said document in the boilerplate.

Looking for the variable example of castlecss-core 1.x? Click here

Below you can find the default settings of a CastleCSS website.

					/*
					---------- VARIABLES ----------
					Castlecss-core variables
					Do not edit this file!
					Create a copy and edit or add your own variables there
					or download the boilerplate for a ready-to-go setup here: https://github.com/CastleCSS/castlecss-boilerplate
					-------------------------------
					*/

					/*
					Base colors
					Color 01 and 02 reservered for white and black
					*/
					$color01:  	#fff;
					$color02:  	#000;

					/*
					Theme colors
					*/
					$theme01: 	#1B94BF;	// Knight blue
					$theme02: 	#093142; 	// Royal blue
					$theme03:	#12637F;	// Falcon blue
					$theme04:	#FFC200;	// Royal yellow
					$theme05:	#FFFFFF;	// Destroyer white

					/*
					Notification colors
					*/
					$alert:		#FFD700;
					$negative:	#FF7878;
					$positive:	#29C85D;
					$disabled:	#CDCDC1;

					/*
					Breakpoints
					You can edit or add breakpoints
					*/
					$b1: 320px;
					$b2: 480px;
					$b3: 768px;
					$b4: 1024px;
					$b5: 1280px;
					$b6: 1600px;

					/*
					Mapping for breakpoint loops
					Must be the same amount as breakpoints above
					*/
					$breakpoint-map: (
					1: $b1,
					2: $b2,
					3: $b3,
					4: $b4,
					5: $b5,
					6: $b6,
					);
					$amount-breakpoints: length($breakpoint-map);

					/*
					Container sizes
					Must be the same amount of breakpoints and $breakpoint-map as above
					*/
					$container: 100%;
					$container-b1: 100%;
					$container-b2: 100%;
					$container-b3: 744px;
					$container-b4: 996px;
					$container-b5: 1224px;
					$container-b6: 1400px;

					/*
					Container map
					Must be the same amount of breakpoints and $breakpoint-map as above
					*/
					$container-map: (
					1: $container-b1,
					2: $container-b2,
					3: $container-b3,
					4: $container-b4,
					5: $container-b5,
					6: $container-b6,
					);

					/*
					Flexbox grid, set to true or false for flexbox
					*/
					$flexbox-grid:	 true;

					/*
					Grid gutters
					Must be the same amount of breakpoints $breakpoint-map as above
					*/
					$grid-gutter:	 12px;
					$grid-gutter-b1: 12px;
					$grid-gutter-b2: 12px;
					$grid-gutter-b3: 12px;
					$grid-gutter-b4: 12px;
					$grid-gutter-b5: 12px;
					$grid-gutter-b6: 12px;

					/*
					Default margin and padding
					*/

					$padding-default: 	12px;
					$margin-default: 	12px;

					/*
					Standard border-radius
					*/
					$radius:	5px;

					/*
					Fonts
					*/
					$font-pri: Arial, Helvetica, sans-serif;
					$font-sec: Arial, Helvetica, sans-serif;
					$font-size-default: 1.6rem;
					$line-height-default: 1.5;