From 94eba46574315498b22eb7f6f153e4676ddf7129 Mon Sep 17 00:00:00 2001 From: Darius Date: Tue, 9 Aug 2016 10:16:21 +0200 Subject: [PATCH 1/3] Update README.md --- README.md | 142 +++++++++++++++++++++++------------------------------- 1 file changed, 59 insertions(+), 83 deletions(-) diff --git a/README.md b/README.md index 9dbab56..083182d 100644 --- a/README.md +++ b/README.md @@ -1,99 +1,75 @@ -# CastleCSS -![CastleCSS logo @CastleCss.com](https://www.doordarius.nl/castlecss-logo-250.png) - -## What is CastleCSS? -CastleCSS a mobile first SCSS framework with modular building blocks for the web. It's also fully **updateable**! Now longer worrying if your base files are still correct. We do this for you ;) - -## What is different between CastleCSS and other frameworks? -Unlike other Frameworks we don't include *everything*, but only what you need. You don't need and want everything :):. -You pick what you want to use. The core is a way to kickstart your website with the basic files and philosophy we believe in. +# CastleCSS (Full package) +A modular, updatable, easy to use SCSS Framework -Our philosophy is mobile first, self explanatory code code and breakpoints. On the other hand we want to be able to keep you up to date with the latest version of CastleCSS, this is possible if you overwrite the defaults the way you're supposed to. +![CastleCSS logo @CastleCss.com](https://www.doordarius.nl/castlecss-logo-250.png) -### Breakpoint CSS -We don't believe in classes like *laptop* or *small* and other device-classes that change throughout time but we define everything with **b{breakpoint}** this makes everything readable and since we use this throughout the whole framework everything feels familiar when you use it for a while. Whether it's for grid, utility classes, hiding, showing. It all starts with **b{breakpoint}** +## What's included? +Included in this package: +- Example project setup +- Gruntfile and task +- [castlecss-core](https://github.com/CastleCSS/castlecss-core) +- [castlecss-buttons](https://github.com/CastleCSS/castlecss-buttons) +- [castlecss-notifications](https://github.com/CastleCSS/castlecss-notifications) -You can overwrite these breakpoins in your own variable file. +## How to install +CastleCSS is built with easy updating in mind. +You can download the Full package and make adjustments as long as you don't update the dependencies (core, buttons, notifications, etc). -### Breakpoints -Mobile first breakpoints (defined in variables.scss) +When you dó adjust the dependencies, you will lose all adjustments with an update. - .b0: 0px; (smartwatch and higher) - .b1: 320px; (phone portait and higher) - .b2: 480px; (phone landscape and higher) - .b3: 768px; (tablet portait and higher) - .b4: 1024px; (tablet landscape/desktop and higher) - .b5: 1280px; (desktop large and higher) - .b6: 1600px; (desktop huge and higher) +There are a few ways to install: -As your base you can always just use b0, only use b1 if you have a totally different markup <320px +- Install via [NPM](https://www.npmjs.com/): ```npm install castlecss-core``` +- Require it in your own NPMJS package +- Download or clone the package +## Updating files +CastleCSS is built so it's easy to update, you can just download make it your own as long as you don't ovewrite the core files. +``` +npm update castlecss-core +npm update castlecss-buttons +npm update castlecss-notifications +``` -## Included files and structure -CastleCSS Core has the following basic files to kickstart your website: +## Documentation +We're currently writing the documentation. Hang on tight! -### SCSS folder structure and overwriting the CastleCSS defaults -The ideal structure of your SASS folder should be the following: +## Setup +Your project should have a setup similair to this (included in the Full package): +With this you make sure your own variables overwrite the castle-core variables and your setup is still updatable. - | Your project/ - |-- sass/ - | |-- Custom project specific files here - | |-- Main.scss //include castlecss main.scss files here first, your project specific files after that - | | - | |-- node_modules/ //CastleCSS files are automatically installed here - | | | - | | | castlecss-core/ - | | | | - | | | |-- sass/ - | | | | |-- main.scss - include all your other SCSS files - | | | | - | | | |-- base/ - | | | | |-- reset.scss - set browser defaults to zero/none so nothing weird happends in different browsers - | | | | |-- variables.scss - Variables for the grid, fonts, utility, etc - | | | | |-- defaults.scss - Set default web settings - | | | | |-- mixins.scss - Small but handy collection of mixins to use - | | | | |-- utility.scss - Utility classes - | | | | |-- utility_spacers.scss - Utility padding / margin classes - | | | | - | | | |-- layout/ - | | | | |-- grid.scss - *Flexbox scss grid with floating fallback* - | | | | |-- static_files.scss - *Static files like containers* +``` +| Your project/ +| +|-- scss/ +| |-- /* Custom project specific scss files here */ +| |-- Main.scss +| | +|-- node_modules/ +| | +| | /* CastleCSS files included automatically here */ +| | castlecss-core/ +| | castlecss-buttons/ +| | castlecss-etc ;)/ +``` ### Main.scss -You should make your own main.scss which includes castlecss. Your main.scss could/should look similar to this if you want to use your own variables: +Your main.scss should have a setup similair to this (included in the [Full CastleCSS Package](https://github.com/CastleCSS/castlecss)): ``` - @import 'node_modules/castlecss-core/sass/variables'; core variables - @import 'base/variables'; // own variables - @import '/node_modules/castlecss-core/sass/main'; //rest of core files - // now import the rest of your scss files +/* castlecss variable files */ +@import "path/to/castlecss-core/sass/variables"; + + +/* Your own variables so they overwrite the core */ +@import "variables"; +/* rest of castle files */ +@import "path/to/castlecss-core/sass/main"; +@import "path/to/castlecss-buttons/sass/variables"; +@import "path/to/castlecss-notifications/sass/variables"; + +/* Include your own files below this line + -------------------------------------- +*/ ``` - -### Overwrite CastleCSS -Of course you want to be able to set your own variables and other classes. To do this: make your own custom folder outside of node modules folder and include the files in your main.scss. - -## How to install -You can install castle css with [NPM](https://nodejs.org) in your sass folder: - - npm i castlecss-core - -### How to update -Type the following to check for updates in your sass folder: - - npm outdated - - -Nothing? Good! Then you're up to date -In any other case you'll get something that looks like this: - - Package Current Wanted Latest Location - castlecss-core 1.0.0 1.1.0 1.1.0 castlecss-core - -So type the following to update: - - npm update - -If you didn't alter the core files it will now update. -If the updated did succeed you shouldn't get anything back from your terminal if you use *npm outdated* again - From 90a6db131f0c160890e77d4c729833af9f3ea477 Mon Sep 17 00:00:00 2001 From: Darius Date: Tue, 9 Aug 2016 10:18:39 +0200 Subject: [PATCH 2/3] Update README.md Explanation updating full package --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 083182d..c883fcf 100644 --- a/README.md +++ b/README.md @@ -24,8 +24,10 @@ There are a few ways to install: - Download or clone the package ## Updating files -CastleCSS is built so it's easy to update, you can just download make it your own as long as you don't ovewrite the core files. +NOTE: Only update the dependencies so you don't overwrite your own SCSS files. If you do update the Full package you'll overwrite everything. + +We recommend downloading the full package and updating the dependencies like: ``` npm update castlecss-core npm update castlecss-buttons From ac591d8ea2047db21c417456f214a0e34a53ca59 Mon Sep 17 00:00:00 2001 From: Darius Date: Tue, 9 Aug 2016 10:22:15 +0200 Subject: [PATCH 3/3] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c883fcf..ffccbe2 100644 --- a/README.md +++ b/README.md @@ -19,9 +19,9 @@ When you dó adjust the dependencies, you will lose all adjustments with an upda There are a few ways to install: +- Download or clone the package (easiest way for the full package) - Install via [NPM](https://www.npmjs.com/): ```npm install castlecss-core``` - Require it in your own NPMJS package -- Download or clone the package ## Updating files