CastleCSS is a modular, updatable and easy to use HTML and SCSS framework. Use this Boilerplate to get started with your project right away!
- A simple and mobile-friendly HTML5 template to kickstart your website
- Configuration for Grunt, to easily compile and minify your Sass files
- castlecss-core
- castlecss-buttons
- castlecss-forms
- castlecss-notifications
- castlecss-breadcrumbs
- castlecss-icons
- castlecss-stickers
- Download or clone this package
- Install the project:
npm install
- Start the project with:
npm run start
This will automatically start a browserSync server.
The project will watch for changes in your scss and html files in your root and scss folder and automatically reload when you change something
- Build the project:
npm run create_all - Only build CSS:
npm run create_css
The basis structure for your website should look similar like this:
| Project directory/
|
|-- node_modules/
| | -- castlecss-core/
| | --castlecss-buttons/
| | --castlecss-notifications/
| |
|-- scss/
| |-- main.scss
| |-- variables.scss
| |
|-- img/
|-- dist/
| |-- styles.min.css
| |-- styles.min.map
| |
|-- index.html
|-- Gruntfile.js
|-- package.json
Your main.scss should have the following set-up:
/* 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";
/* 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";
Check out http://www.castlecss.com for an extended documentation and more examples!