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