Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jslid/bookcase

Simple Responsive CSS Framework
https://github.com/jslid/bookcase

css framework grunt gulp haml jade less mixins responsive responsive-grid sass stylus

Last synced: 4 days ago
JSON representation

Simple Responsive CSS Framework

Awesome Lists containing this project

README 

        

![Bookcase Logo Graphic](http://www.jslid.com/bookcase-img/bookcase-github-graphic.png)



#Bookcase - Simple Responsive CSS Framework



Bookcase is an extremely simple responsive CSS grid framework, that acts as an excellent starting point for web related projects. Bookcase is a simple framework in the fact that it bypasses all of the bells and whistles that many responsive frameworks contain to provide just simple basic styles to make it easier to add your own additional styles as necessary. Not only this, but Bookcase has been developed with all three CSS Pre-Processors in mind. Bookcase has a version for: 



 - LESS

 - SASS

 - Stylus



Bookcase also contains three starter templates in HTML, HAML, and Jade. Users can make use of either CSS Pre-Processor or HTML template language by making minor tweaks to the task runner of your choosing (Grunt or Gulp).



----------



## **Getting Started**



Getting started with Bookcase is easy, choose between three options: 



#### **Github**



> Download the repository - [https://github.com/jslid/Bookcase](https://github.com/jslid/Bookcase)



#### **Bower**



> $ bower install bookcase



#### **NPM** 



> $ npm install bookcase-framework 



----------



## **Using the Framework** 



The Bookcase framework has two separate grid systems. A standard grid system based on floats, and a flex-grid. Both grid systems are based on column percentages. The default number of columns in both grid systems is 12. This number can easily be changed to however many columns you prefer by editing the "**variables**"  file in the pre-processor folder of your choosing. It is possible to have a standard grid and flex grid with different column totals. 



### **Standard Grid**



Bookcase's standard grid is similar to nearly all responsive frameworks, which contain a "container, row, then columns". The difference with bookcase is varying naming options for elements. For example: 



#### **Container/Bookcase and Row/Shelf**



All grid elements need to be wrapped in a container class element. This class can either be called a "**container**," or a "**bookcase**". Inside of a container/bookcase resides a "**row**," or a "**shelf**". It is important to note that these elements can be interchanged. For example you could have a "bookcase" with a "row" inside, or a "container" with a "shelf" inside. 



    


	    


	    


	



or 



    


	    


		


	



##### **Full Length Containers**

A containers size is determined by the "container" variables, in the "variables" file. It is possible for containers to be full-page length using the following classes: 



    


	    


		


	



or



    


	    


	    


	



#### **Columns** 



Columns reside within either a "row" or "shelf", and it is possible to nest additional rows/shelfs and columns within one another. Bookcase provides two methods of naming columns, depending on which one makes it easier you or your team to interpret. Bookcase is divided into the following sizes: 



 - Mobile or Extra Small (xs)

 - Phablet or Small (sm)

 - Tablet or Medium (md)

 - Desktop or Large (lg)

 - HD or Extra Large (xl)



Bookcase is a mobile first framework, therefore you should design with mobile devices in mind and adjust column structures as the device width becomes larger. Below are examples for all media/width types: 



##### **Mobile/Extra Small (xs) Devices** 



    


	    


		    


			    
This is a mobile 6 column


			


			


				
This is a mobile 3 column


			


		


	



or 



    


	    


		    


			    
This is a small 6 column


			


			


				
This is a small 3 column


			


		



##### **Phablet/Small (sm) Devices**



    


	    


		    


			    
This column is full length on mobile devices and 5 columns wide on a phablet/small device.


			


			


				
This content is 8 columns wide on a phablet device.


			


		


	



or



    


	    


		    


			    
This column is full length on small devices and 5 columns wide on small/phablet devices.


			


				
This content is 8 columns wide on a small/phablet device.


			


		


	



##### **Tablet/Medium (md) Devices**



    


	    


		    


			    
This column is full length on mobile devices and 5 columns wide on a tablet device.


			


			


				
This content is 8 columns wide on a tablet device.


			


		


	



or



    


	    


		    


			    
This column is full length on small devices and 5 columns wide on medium devices.


			


				
This content is 8 columns wide on a medium device.


			


		


	



##### **Desktop/Large (lg) Devices**



    


	    


			    
This content is 4 columns wide on desktop devices


			


			


				
This content is 7 columns wide on a mobile device, 2 columns wide on a tablet, and 3 columns wide on a desktop


			


		


	



or 



    


	    


		    


			    
This content is 4 columns wide on large devices


			


			


				
This content is 7 columns wide on a small device, 2 columns wide on a medium device, and 3 columns wide on a large device


			


		


	



##### **HD/XL (xl) Devices**



    


	    


		    


			    
This content is 6 columns wide on a mobile and tablet device, 4 columns wide on a desktop, and 2 columns wide on an HD device.


			


			


				
This content is 6 columns wide on an HD device


			


		


	



or



    


	    


		    


			    
This content is 6 columns whide on a small and medium device, 4 columns wide on a large device, and 2 columns wide on an HD device.


			


			


				
This content is 6 columns wide on an XL device.