castlecss-docs

{% set currentPageId = 'installation' %}{% set pageTitle = 'Installation - CastleCSS' %}{% include "inc/header.html" %}  <div class="b0_12 b4_14 b4_push_01"> <div class="p p-b3-3x"> <div class="block"> <h1>Installation</h1> <p class="intro">A modular, updatable, easy to use SCSS Framework</p> <p>CastleCSS is built with easy updating in mind.<br /> You can do anything as long as you don't edit the dependencies (core, buttons, notifications, etc).</p> <p>When you do adjust the dependencies, you will lose all adjustments with an update.</p> </div> <div class="block block-invert p-3x pt-2x"> <h2>Boilerplate</h2> <p> The <strong>easiest way</strong> to start is with the CastleCSS Boilerplate. CastleCSS is a modular, updatable and easy to use HTML and SCSS framework. Use this Boilerplate to get started with your project right away! <div> <a href="https://github.com/castlecss/castlecss-boilerplate" class="btn-theme02" aria-label="Watch castlecss/castlecss-boilerplate on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a> </div> </p> <h3>What's included?</h3> <ul> <li>A simple and mobile-first HTML5 template to kickstart your website</li> <li>Configuration for Grunt, to easily compile and minify your Sass files</li> <li><a href="https://github.com/CastleCSS/castlecss-core" target="_blank">castlecss-core</a></li> <li><a href="https://github.com/CastleCSS/castlecss-buttons" target="_blank">castlecss-buttons</a></li> <li><a href="https://github.com/CastleCSS/castlecss-notifications" target="_blank">castlecss-notifications</a></li> <li><a href="https://github.com/CastleCSS/castlecss-icons" target="_blank">castlecss-icons</a></li> </ul> <h3> Installation </h3> <div> <a href="https://github.com/castlecss/castlecss-boilerplate/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-boilerplate on GitHub" target="_blank"><i class="fa fa-cloud-download"></i> Download boilerplate</a> </div> </div> <div class="block mb-3x"> <h2>Structure</h2> <p>The basic structure for your website should look similar to this (included in the boilerplate):<br /> </p> <code class="code-structure"> | Project directory/<br /> |<br /> |-- node_modules/<br /> | | -- castlecss-core/<br /> | | -- castlecss-buttons/<br /> | | -- castlecss-notifications/<br /> | | -- castlecss-icons/<br /> | |<br /> |-- scss/<br /> | |-- main.scss<br /> | |-- variables.scss<br /> | |<br /> |-- img/<br /> |-- dist/<br /> | |-- styles.min.css<br /> | |-- styles.min.map<br /> | |<br /> |-- index.html<br /> |-- Gruntfile.js<br /> |-- package.json<br /> </code> </div> <div class="block mb-3x"> <h2>Main.scss</h2> <p>Your main.scss should have a setup similar to this (included in the boilerplate):</p> <pre class="brush: sass;"> /* CastleCSS Core variables */ @import "node_modules/castlecss-core/sass/variables"; /* Your variables */ @import "variables"; /* Remaining Core files and other CastleCSS modules */ @import "node_modules/castlecss-core/sass/main"; @import "node_modules/castlecss-buttons/sass/main"; @import "node_modules/castlecss-notifications/sass/main"; @import "node_modules/castlecss-icons/sass/main"; /* Include your own files below this line -------------------------------------- */ /* -------------------------------------- Include your own files above this line */ @import "node_modules/castlecss-core/sass/base/utility"; @import "node_modules/castlecss-core/sass/base/utility_spacers";</pre> </div> <div class="block mb-3x"> <h2>Install packages separately</h2> <p>Already have a CastleCSS project and want to add a module or just want to add 1 part of CastleCSS? Just include the core and any addon you want.</p> <div class="g"> <div id="core" class="b0_12 b5_12 eq"> <div class="block block-invert p-3x pt-2x"> <h2>Core</h2> <p> <div> <a href="https://github.com/castlecss/castlecss-core" class="btn-theme02 mb" aria-label="Watch castlecss/castlecss-core on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a> <a href="https://github.com/castlecss/castlecss-core/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-core on GitHub"><i class="fa fa-cloud-download"></i> Download core</a> </div> </p> <h3>Installation</h3> <p> Via npm: <code>npm install castlecss-core -S</code> </p> <h3>Updating</h3> <p> <code>npm update castlecss-core</code><br /> </p> <h3>What's included?</h3> <p> <ul> <li><strong>Main:</strong> include all your other SCSS files</li> <li><strong>Reset:</strong> Set browser defaults to zero/none so nothing weird happends in different browsers</li> <li><strong><a href="variables.html">Variables</a>:</strong> Variables for the grid, fonts, utility, etc</li> <li><strong>defaults:</strong> Set default web settings</li> <li><strong><a href="mixins.html">Mixins</a>:</strong> Small but handy collection of mixins to use</li> <li><strong><a href="utility.html">Utility</a>:</strong> Genereral utility classes</li> <li><strong><a href="utility_spacers.html">Utility spacers</a>:</strong> Margin and padding utility classes</li> <li><strong><a href="grid.html">Grid</a>:</strong> Flexbox scss grid with floating fallback</li> <li><strong>Static files:</strong> Classes that are static throughout the site</li> </ul> </p> </div> </div> <div id="buttons" class="b0_12 b5_12 eq"> <div class="block block-invert p-3x pt-2x"> <h2>Buttons</h2> <p> <div> <a href="https://github.com/castlecss/castlecss-buttons" class="btn-theme02 mb" aria-label="Watch castlecss/castlecss-buttons on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a> <a href="https://github.com/castlecss/castlecss-buttons/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-buttons on GitHub"><i class="fa fa-cloud-download"></i> Download buttons</a> </div> </p> <h3>Installation</h3> <p> Via npm: <code>npm install castlecss-buttons -S</code> </p> <h3>Updating</h3> <p> <code>npm update castlecss-buttons</code><br /> </p> <h3>What's included?</h3> <p> <ul> <li><strong>Buttons</strong> Basic buttons for your site</li> </ul> </p> </div> </div> <div id="notifications" class="b0_12 b5_12 eq"> <div class="block block-invert p-3x pt-2x"> <h2>Notifications</h2> <p> <div> <a href="https://github.com/castlecss/castlecss-notifications" class="btn-theme02 mb" aria-label="Watch castlecss/castlecss-notifications on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a> <a href="https://github.com/castlecss/castlecss-notifications/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-notifications on GitHub"><i class="fa fa-cloud-download"></i> Download notifications</a> </div> </p> <h3>Installation</h3> <p> Via npm: <code>npm install castlecss-notifications -S</code> </p> <h3>Updating</h3> <p> <code>npm update castlecss-notifications</code><br /> </p> <h3>What's included?</h3> <p> <ul> <li><strong>Notifications</strong> Notifications and alerts</li> </ul> </p> </div> </div> <div id="icons" class="b0_12 b5_12 eq"> <div class="block block-invert p-3x pt-2x"> <h2>Icons</h2> <p> <div> <a href="https://github.com/castlecss/castlecss-icons" class="btn-theme02 mb" aria-label="Watch castlecss/castlecss-icons on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a> <a href="https://github.com/castlecss/castlecss-icons/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-icons on GitHub"><i class="fa fa-cloud-download"></i> Download icons</a> </div> </p> <h3>Installation</h3> <p> Via npm: <code>npm install castlecss-icons -S</code> </p> <h3>Updating</h3> <p> <code>npm update castlecss-icons</code><br /> </p> <h3>What's included?</h3> <p> <ul> <li><strong>675 Font Awesome Icons</strong> Hosted via Cloudflare</li> </ul> </p> </div> </div> </div> </div> </div> </div>  {% include "inc/footer.html" %}