Skip to content
A simple and mobile-friendly HTML5 template with CastleCSS to kickstart your website
Branch: master
Clone or download
Latest commit b746b8b Nov 13, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
img
js
scss Updated all packages to make sure everything works with the latest ve… Nov 12, 2018
.gitignore Updated all packages to make sure everything works with the latest ve… Nov 12, 2018
Gruntfile.js
LICENSE
README.md
about.html
clean.html
contact.html
index.html
package-lock.json
package.json 1.5.0 Nov 13, 2018
products.html Updated all packages to make sure everything works with the latest ve… Nov 12, 2018

README.md

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!

CastleCSS logo @CastleCss.com

What's included?

How to install

  • Download or clone this package
  • Install the project: npm install

Build and run automatically

  • 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 and run manually

  • Build the project: npm run create_all
  • Only build CSS: npm run create_css

Basic structure

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

main.scss

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

Documentation and examples

Check out http://www.castlecss.com for an extended documentation and more examples!

You can’t perform that action at this time.