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.
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!
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
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";
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.
Via npm: npm install castlecss-core -S
npm update castlecss-core
Via npm: npm install castlecss-notifications -S
npm update castlecss-notifications
Via npm: npm install castlecss-icons -S
npm update castlecss-icons