Installation

A modular, updatable, easy to use SCSS Framework

CastleCSS is built with easy updating in mind.
You can do anything as long as you don't edit the dependencies (core, buttons, notifications, etc).

When you do adjust the dependencies, you will lose all adjustments with an update.

Boilerplate

The easiest way 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!

What's included?

Installation

Structure

The basic structure for your website should look similar to this (included in the boilerplate):

| Project directory/
|
|-- node_modules/
| | -- castlecss-core/
| | -- castlecss-buttons/
| | -- castlecss-notifications/
| | -- castlecss-icons/
| |
|-- scss/
| |-- main.scss
| |-- variables.scss
| |
|-- img/
|-- dist/
| |-- styles.min.css
| |-- styles.min.map
| |
|-- index.html
|-- Gruntfile.js
|-- package.json

Main.scss

Your main.scss should have a setup similar to this (included in the boilerplate):

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

Install packages separately

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.

Core

Installation

Via npm: npm install castlecss-core -S

Updating

npm update castlecss-core

What's included?

  • Main: include all your other SCSS files
  • Reset: Set browser defaults to zero/none so nothing weird happends in different browsers
  • Variables: Variables for the grid, fonts, utility, etc
  • defaults: Set default web settings
  • Mixins: Small but handy collection of mixins to use
  • Utility: Genereral utility classes
  • Utility spacers: Margin and padding utility classes
  • Grid: Flexbox scss grid with floating fallback
  • Static files: Classes that are static throughout the site

Buttons

Installation

Via npm: npm install castlecss-buttons -S

Updating

npm update castlecss-buttons

What's included?

  • Buttons Basic buttons for your site

Notifications

Installation

Via npm: npm install castlecss-notifications -S

Updating

npm update castlecss-notifications

What's included?

  • Notifications Notifications and alerts

Icons

Installation

Via npm: npm install castlecss-icons -S

Updating

npm update castlecss-icons

What's included?

  • 675 Font Awesome Icons Hosted via Cloudflare