castlecss-docs/views/variables.html

Documentation website for CastleCSS

{% set currentPageId = 'variables' %}{% set pageTitle = 'Variables - CastleCSS' %}{% include "inc/header.html" %}

	<!-- Main -->
	<div class="b0_12 b4_14 b4_push_01">
		<div class="p p-b3-3x">

			<div class="block">
				<h1>Variables</h1>
				<p class="intro">Tweak your castles defaults</p>
				<p class="alert">
					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 <a href="https://github.com/CastleCSS/castlecss-boilerplate" target="_blank">boilerplate</a>.
				</p>
				<p>
					Looking for the variable example of castlecss-core 1.x? <a href="variables_1x.html">Click here</a>
				</p>
				<p>Below you can find the default settings of a CastleCSS website.</p>
			</div>
			<h4>castlecss-core@2.6.0 variables.scss</h4>
			<div class="block">
				<pre class="brush: sass">
					/*
					---------- VARIABLES ----------
					Castlecss-core variables
					-------------------------------
				*/

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

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

				/*
					Notification colors
					https://github.com/CastleCSS/castlecss-notifications
				*/
				$alert:		#c0dbff;
				$warning:	#ffe283;
				$negative:	#feb3b3;
				$positive:	#c3e5cd;
				$disabled:	#CDCDC1;

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

				/*
					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: 752px;
				$container-b4: 992px;
				$container-b5: 1208px;
				$container-b6: 1592px;

				/*
					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: 16px;
				$grid-gutter-b4: 16px;
				$grid-gutter-b5: 16px;
				$grid-gutter-b6: 16px;

				/*
					Gutter map
					Must be the same amount of gutters and $gutter-map as above
				*/
				$gutter-map: (
					1: $grid-gutter-b1,
					2: $grid-gutter-b2,
					3: $grid-gutter-b3,
					4: $grid-gutter-b4,
					5: $grid-gutter-b5,
					6: $grid-gutter-b6,
				);

				/*
					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;

				/*	Breadcrumbs seperator
					https://github.com/CastleCSS/castlecss-buttons
				*/
				$breadcrumbs-separator: '\00bb';

				/*	Form specific variables
					https://github.com/CastleCSS/castlecss-forms
				*/

				/* Standard Inputs */
				$input-height: 4.8rem;
				$input-bg-color: $color01;
				$input-bg-color-focus: $color01;
				$input-color: $color02;
				$input-color-focus: $color02;
				$input-border-color: #eee;
				$input-border-color-focus: #eee;
				$input-border: 1px solid $input-border-color;

				/* Custom select */
				$select-arrow: "\203A";

				/* Labels */
				$input-label-color: #aaa;
				$input-label-color-focus: #aaa;

				/* Radios and Checkboxes*/
				$input-control-color: #eee;
				$input-control-color-focus: $theme01;

				/* Form transitions */
				$input-transition: .1s all ease-in-out;

				/* Icons */
				$input-icon-color: #eee;
				$input-icon-bg-color: #797979;

				/*	Default sticker styles
					https://github.com/CastleCSS/castlecss-stickers
				*/
				$sticker-font-size: 1.4rem;
				$sticker-font-size-large: 1.6rem;
				$sticker-bgcolor: $color03;
				$sticker-color: $color02;
				$sticker-text-transform: none;
				$sticker-weight: normal;
				$sticker-radius: $radius;</pre>
			</div>
		</div>
	</div>
	<!-- End main -->

{% include "inc/footer.html" %}