-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of https://github.com/CastleCSS/castlecss
- Loading branch information
Showing
1 changed file
with
64 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1,77 @@ | ||
| # CastleCSS | ||
| # CastleCSS (Full package) | ||
| A modular, updatable, easy to use SCSS Framework | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
|
|
||
| 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. | ||
|
|
||
| ### 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}** | ||
|
|
||
| You can overwrite these breakpoins in your own variable file. | ||
|
|
||
| ### Breakpoints | ||
| Mobile first breakpoints (defined in variables.scss) | ||
|
|
||
| .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) | ||
|
|
||
| As your base you can always just use b0, only use b1 if you have a totally different markup <320px | ||
|
|
||
|
|
||
|
|
||
| ## Included files and structure | ||
| CastleCSS Core has the following basic files to kickstart your website: | ||
|
|
||
| ### SCSS folder structure and overwriting the CastleCSS defaults | ||
| The ideal structure of your SASS folder should be the following: | ||
|
|
||
| | 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* | ||
| ## 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) | ||
|
|
||
| ### 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: | ||
| ## 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). | ||
|
|
||
| ``` | ||
| @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 | ||
| ``` | ||
| When you dó adjust the dependencies, you will lose all adjustments with an update. | ||
|
|
||
| ### 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. | ||
| There are a few ways to install: | ||
|
|
||
| ## How to install | ||
| You can install castle css with [NPM](https://nodejs.org) in your sass folder: | ||
| - 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 | ||
|
|
||
| ## Updating files | ||
|
|
||
| npm i castlecss-core | ||
|
|
||
| ### How to update | ||
| Type the following to check for updates in your sass folder: | ||
|
|
||
| npm outdated | ||
|
|
||
| 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. | ||
|
|
||
| Nothing? Good! Then you're up to date | ||
| In any other case you'll get something that looks like this: | ||
| We recommend downloading the full package and updating the dependencies like: | ||
| ``` | ||
| npm update castlecss-core | ||
| npm update castlecss-buttons | ||
| npm update castlecss-notifications | ||
| ``` | ||
|
|
||
| Package Current Wanted Latest Location | ||
| castlecss-core 1.0.0 1.1.0 1.1.0 castlecss-core | ||
| ## Documentation | ||
| We're currently writing the documentation. Hang on tight! | ||
|
|
||
| So type the following to update: | ||
| ## 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. | ||
|
|
||
| npm update | ||
| ``` | ||
| | Your project/ | ||
| | | ||
| |-- scss/ | ||
| | |-- /* Custom project specific scss files here */ | ||
| | |-- Main.scss | ||
| | | | ||
| |-- node_modules/ | ||
| | | | ||
| | | /* CastleCSS files included automatically here */ | ||
| | | castlecss-core/ | ||
| | | castlecss-buttons/ | ||
| | | castlecss-etc ;)/ | ||
| ``` | ||
|
|
||
| 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 | ||
| ### Main.scss | ||
| Your main.scss should have a setup similair to this (included in the [Full CastleCSS Package](https://github.com/CastleCSS/castlecss)): | ||
|
|
||
| ``` | ||
| /* 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 | ||
| -------------------------------------- | ||
| */ | ||
| ``` |