| 
						
						
						
					 | 
				
				 | 
				
					@ -1,10 +1,11 @@ | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					# cripsy-boilerplate | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					# Cripsy-Boilerplate | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					Flat Sass Boilerplate to give you a amount of Basic Settings, Components, Helpers, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					Mixins and Functions. It uses also the following Libraries, | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					* normalize.css / (https://necolas.github.io/normalize.css/)[https://necolas.github.io/normalize.css/] | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					* reflex-grid / (http://reflexgrid.com/docs/)[http://reflexgrid.com/docs/] | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					* normalize.css / [https://necolas.github.io/normalize.css/](https://necolas.github.io/normalize.css/) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					* reflex-grid / [http://reflexgrid.com/docs/](http://reflexgrid.com/docs/) | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					* opt / [https://octicons.github.com"](https://octicons.github.com") | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					Many Boilerplates and also Frameworks, are trying to hard adding styles that | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					are most time will be overwritten to make it work for you. This causes a loss in | 
				
			
			
		
	
	
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
				
				 | 
				
					@ -12,7 +13,7 @@ Performance and more Fighting with the Framework and the Documentation. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					## Coding Style | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					The Boilerplate uses as Coding Style (http://getbem.com/)[BEM], but as a more | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					The Boilerplate uses as Coding Style [http://getbem.com/](BEM), but as a more | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					simpler idea of it. One of the Benefits of BEM is that you create Components and | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					can reuse them. But one the other hand it can be really Strange if you overthinking it. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
	
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
				
				 | 
				
					@ -21,7 +22,7 @@ can reuse them. But one the other hand it can be really Strange if you overthink | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					Components are created to give you a Structure and a Basic set of Styles and | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					not that they look fancy. The Idea is to extend each Compontent and save up | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					a Bunch of CSS Code, and so get more Performance and less Errors. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					Of Course is really Fancy to get more Performance. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					Of Course is really Fancy to get more Performance and less Errors. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					## Only Include if you need it | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
	
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
				
				 | 
				
					@ -29,22 +30,53 @@ Components and Helpers are organizes as Mixins, that makes it a little easier to | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					add. Also it can be used to create multiples css files for each single site you | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					need on a site oder   | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					You can order them and structure the output of the CSS-files. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					## Getting Started | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					### Installation | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					``` | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					npm install crispy-boilerplate | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					``` | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					Main SCSS-File: | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					``` | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					@import "crispy"; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					@import | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    "crispy"; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					``` | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					``` | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					After this, include Mixins you need: | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					``` | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					@include crispy__*() | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					``` | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					To overwrite defaults simple adding your own config-file before import crispy: | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					``` | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					@import | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    "config", | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					    "crispy"; | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					``` | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					### npm | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					There are a few npm scripts in the package.json that you can you use to build | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					your styles. Copy them and change the path. There is nothing special about them. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					### Example | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					You find a Working Example i | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					You find an Example in "/src/example". It is also the site of the Documentation. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					In the Example there are additional Directories. These one are part of a Structure | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					you might find helpful. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					#### Site | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					Contains header, footer, Partials that use on are site or webapp. Header, Footer are | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					not Classical Components, there often more Complex and have a special Brand. | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					#### Templates | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					
 | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					Templates are for a single Site or a group of Sites, they are complex and the is | 
				
			
			
		
	
		
			
				
					 | 
					 | 
				
				 | 
				
					no benfit so reuse them as Components. |