castlecss-docs
Version:
Documentation website for CastleCSS
86 lines (75 loc) • 2.51 kB
HTML
{% set currentPageId = 'variables' %}{% set pageTitle = 'Variables - CastleCSS' %}{% include "inc/header.html" %}
<!-- Main -->
<div class="b0_12 b4_14 b4_push_01">
<div class="p-3x">
<div class="block">
<h1>Variables</h1>
<p class="intro">Tweak your castles defaults</p>
<p class="alert mb">
This is the variable file example for castlecss-core LOWER then 2.0, need 2.x? <a href="variables.html">Click here</a>
</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>Below you can find the default settings of a CastleCSS website.</p>
</div>
<div class="block">
<pre class="brush: sass">
/* Variables
Add or replace variables in your OWN variables file
*/
/*
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
$alert: #FFD700;
$negative: #FF7878;
$positive: #29C85D;
$disabled: #CDCDC1;
/* Breakpoints */
$b1: 320px;
$b2: 480px;
$b3: 768px;
$b4: 1024px;
$b5: 1280px;
$b6: 1600px;
/* Container sizes */
$container: 100%;
$container-b1: 100%;
$container-b2: 100%;
$container-b3: 744px;
$container-b4: 996px;
$container-b5: 1224px;
$container-b6: 1400px;
/* Grid */
$flexbox-grid: true;
$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, padding, gutter */
$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;</pre>
</div>
</div>
</div>
<!-- End main -->
{% include "inc/footer.html" %}