|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | + |
| 4 | +<head> |
| 5 | + <title>Variables - CastleCSS</title> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" /> |
| 7 | + |
| 8 | + <link rel="stylesheet" href="css/styles.min.css" /> |
| 9 | + <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css " /> |
| 10 | + <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' /> |
| 11 | + |
| 12 | + <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script> |
| 13 | + |
| 14 | +</head> |
| 15 | + |
| 16 | +<body> |
| 17 | + {% include "inc/analytics.html" %} |
| 18 | + <div id="wrapper" class="wrapper"> |
| 19 | + |
| 20 | + <div class="g full-height"> |
| 21 | + |
| 22 | + <!-- Side --> |
| 23 | + <div class="b0_12 b4_08 b5_06 b6_04"> |
| 24 | + {% include "inc/menu.html" %} |
| 25 | + </div> |
| 26 | + <!-- End side --> |
| 27 | + |
| 28 | + <!-- Main --> |
| 29 | + <div class="b0_12 b4_14 b4_push_01"> |
| 30 | + |
| 31 | + <div class="p-3x"> |
| 32 | + |
| 33 | + <div class="block"> |
| 34 | + <h1>Variables</h1> |
| 35 | + <p class="intro">Tweak your castles defaults</p> |
| 36 | + <p class="alert mb"> |
| 37 | + This is the variable file example for castlecss-core LOWER then 2.0, need 2.x? <a href="variables.html">Click here</a> |
| 38 | + </p> |
| 39 | + <p class="alert"> |
| 40 | + 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>. |
| 41 | + </p> |
| 42 | + <p>Below you can find the default settings of a CastleCSS website.</p> |
| 43 | + <div class="block"> |
| 44 | + <pre class="brush: sass"> |
| 45 | + /* Variables |
| 46 | + Add or replace variables in your OWN variables file |
| 47 | + */ |
| 48 | + |
| 49 | + /* |
| 50 | + Base colors |
| 51 | + Color 01 and 02 reservered for white and black |
| 52 | + */ |
| 53 | + $color01: #fff; |
| 54 | + $color02: #000; |
| 55 | + |
| 56 | + /* Theme colors */ |
| 57 | + $theme01: #1B94BF; // Knight blue |
| 58 | + $theme02: #093142; // Royal blue |
| 59 | + $theme03: #12637F; // Falcon blue |
| 60 | + $theme04: #FFC200; // Royal yellow |
| 61 | + $theme05: #FFFFFF; // Destroyer white |
| 62 | + |
| 63 | + $alert: #FFD700; |
| 64 | + $negative: #FF7878; |
| 65 | + $positive: #29C85D; |
| 66 | + $disabled: #CDCDC1; |
| 67 | + |
| 68 | + /* Breakpoints */ |
| 69 | + $b1: 320px; |
| 70 | + $b2: 480px; |
| 71 | + $b3: 768px; |
| 72 | + $b4: 1024px; |
| 73 | + $b5: 1280px; |
| 74 | + $b6: 1600px; |
| 75 | + |
| 76 | + /* Container sizes */ |
| 77 | + $container: 100%; |
| 78 | + $container-b1: 100%; |
| 79 | + $container-b2: 100%; |
| 80 | + $container-b3: 744px; |
| 81 | + $container-b4: 996px; |
| 82 | + $container-b5: 1224px; |
| 83 | + $container-b6: 1400px; |
| 84 | + |
| 85 | + /* Grid */ |
| 86 | + $flexbox-grid: true; |
| 87 | + $grid-gutter: 12px; |
| 88 | + $grid-gutter-b1: 12px; |
| 89 | + $grid-gutter-b2: 12px; |
| 90 | + $grid-gutter-b3: 12px; |
| 91 | + $grid-gutter-b4: 12px; |
| 92 | + $grid-gutter-b5: 12px; |
| 93 | + $grid-gutter-b6: 12px; |
| 94 | + |
| 95 | + /* Default margin, padding, gutter */ |
| 96 | + $padding-default: 12px; |
| 97 | + $margin-default: 12px; |
| 98 | + |
| 99 | + /* Standard border-radius */ |
| 100 | + $radius: 5px; |
| 101 | + |
| 102 | + /* Fonts */ |
| 103 | + $font-pri: Arial, Helvetica, sans-serif; |
| 104 | + $font-sec: Arial, Helvetica, sans-serif; |
| 105 | + $font-size-default: 1.6rem; |
| 106 | + $line-height-default: 1.5; |
| 107 | + </pre> |
| 108 | + </div> |
| 109 | + |
| 110 | + <!-- Scripts for footer --> |
| 111 | + {% include "inc/footer.html" %} |
| 112 | + |
| 113 | + </body> |
| 114 | + |
| 115 | + </html> |
0 commit comments