Skip to content

Commit

Permalink
Merge branch 'hotfix/Readme'
Browse files Browse the repository at this point in the history
  • Loading branch information
Darius Rosendahl committed Dec 19, 2016
2 parents 2b3ee74 + 4bca535 commit e15219f
Showing 1 changed file with 11 additions and 8 deletions.
19 changes: 11 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# CastleCSS
CastleCSS is a modular, updatable, easy-to-use HTML5 and SCSS framework. It includes a flexible grid system, buttons, notifications, utility classes and a set of Sass mixins to make a quick start for your site or app.
CastleCSS is a modular, updatable, easy-to-use HTML5 and SCSS framework. It includes a flexible grid system, buttons, notifications, utility classes, icons and a set of Sass mixins to make a quick start for your site or app.

![CastleCSS logo @CastleCss.com](https://www.doordarius.nl/castlecss-logo-250.png)

Expand All @@ -9,19 +9,22 @@ This is a meta package with all available packages for CastleCSS:
- [castlecss-core](https://github.com/CastleCSS/castlecss-core)
- [castlecss-buttons](https://github.com/CastleCSS/castlecss-buttons)
- [castlecss-notifications](https://github.com/CastleCSS/castlecss-notifications)
- [castlecss-icons](https://github.c
om/CastleCSS/castlecss-icons)

## Getting Started
There are a few ways to get started with CastleCSS. If you're setting things up all by yourself, the easiest way to install is through the npm package manager or to clone the package in your project directory.

- Install with [npm](https://www.npmjs.com/): ```npm install castlecss```
- Download the [CastleCSS Boilerplate](https://www.github.com/CastleCSS/castlecss-boilerplate). All Packages are included + examples and project setup
- Install with [npm](https://www.npmjs.com/): ```npm install castlecss -S```
- Clone the package ```git clone https://github.com/CastleCSS/castlecss.git```

Make sure to run ```npm install``` from your directory to install the dependencies and start using CastleCSS.

### Adjusting the variables
Because of the unique update-able setup of CastleCSS you need a seperate variable file to overwrite the default CastleCSS variables. There are a few ways to do this:

- Use the [boilerplate](https://github.com/CastleCSS/castlecss-boilerplate/) which provides a variables.scss file
- Download the [CastleCSS Boilerplate](https://www.github.com/CastleCSS/castlecss-boilerplate). All Packages are included + examples and project setup
- Copy variables.scss from /node_modules/castlecss-core/sass/variables.scss into your own scss folder and include it into your main.scss
- Copy the example from the [documentation](http://castlecss.com/variables.html) into your own variables.scss and include it into your main.scss

Expand All @@ -33,9 +36,7 @@ This front-end framework is easy updatable. This has the advantage that new feat

We recommend updating the dependencies as follows:
```
npm update castlecss-core
npm update castlecss-buttons
npm update castlecss-notifications
npm update
```

## Documentation and examples
Expand All @@ -51,6 +52,7 @@ Your project should have a setup similar to this:
| | -- castlecss-core/
| | -- castlecss-buttons/
| | -- castlecss-notifications/
| | -- castlecss-icons/
| |
|-- scss/
| |-- main.scss
Expand All @@ -62,7 +64,7 @@ Your project should have a setup similar to this:
| |-- styles.min.map
| |
|-- index.html
|-- Gruntfile.js
|-- Gruntfile.js (or gulp, or whatever you want to use)
|-- package.json
```

Expand All @@ -82,6 +84,7 @@ Your main.scss should have the following setup:
@import "path/to/castlecss-core/sass/main";
@import "path/to/castlecss-buttons/sass/main";
@import "path/to/castlecss-notifications/sass/main";
@import "path/to/castlecss-icons/sass/main";
/* Include your own files below this line
-------------------------------------- */
Expand All @@ -102,4 +105,4 @@ We're currently working hard on making the CastleCSS expansions and improvements
Please see the [ROADMAP.MD](https://github.com/CastleCSS/castlecss/blob/master/ROADMAP.md) for our current plans for the future.

## Contributing
Want to contribute? We'd love your help, please take a look at the roadmap or submit new suggestions.
Want to contribute? We'd love your help, please take a look at the roadmap or submit new suggestions.

0 comments on commit e15219f

Please sign in to comment.