{"id":15285513,"url":"https://github.com/jslid/bookcase","last_synced_at":"2026-01-04T23:06:15.577Z","repository":{"id":58234237,"uuid":"60481863","full_name":"jslid/Bookcase","owner":"jslid","description":"Simple Responsive CSS Framework","archived":false,"fork":false,"pushed_at":"2018-03-20T21:24:41.000Z","size":208,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-01T03:19:20.600Z","etag":null,"topics":["css","framework","grunt","gulp","haml","jade","less","mixins","responsive","responsive-grid","sass","stylus"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jslid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-05T21:23:15.000Z","updated_at":"2021-10-05T00:01:22.000Z","dependencies_parsed_at":"2022-08-31T04:52:45.608Z","dependency_job_id":null,"html_url":"https://github.com/jslid/Bookcase","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jslid%2FBookcase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jslid%2FBookcase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jslid%2FBookcase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jslid%2FBookcase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jslid","download_url":"https://codeload.github.com/jslid/Bookcase/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245168892,"owners_count":20571803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","framework","grunt","gulp","haml","jade","less","mixins","responsive","responsive-grid","sass","stylus"],"created_at":"2024-09-30T15:05:43.721Z","updated_at":"2026-01-04T23:06:15.488Z","avatar_url":"https://github.com/jslid.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n![Bookcase Logo Graphic](http://www.jslid.com/bookcase-img/bookcase-github-graphic.png)\n\n#Bookcase - Simple Responsive CSS Framework\n\nBookcase 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: \n\n - LESS\n - SASS\n - Stylus\n\nBookcase 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).\n\n\n----------\n\n## **Getting Started**\n\nGetting started with Bookcase is easy, choose between three options: \n\n#### **Github**\n\n\u003e Download the repository - [https://github.com/jslid/Bookcase](https://github.com/jslid/Bookcase)\n\n#### **Bower**\n\n\u003e $ bower install bookcase\n\n#### **NPM** \n\n\u003e $ npm install bookcase-framework \n\n\n----------\n\n## **Using the Framework** \n\nThe 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. \n\n### **Standard Grid**\n\nBookcase'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: \n\n#### **Container/Bookcase and Row/Shelf**\n\nAll 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. \n\n    \u003cdiv class=\"container\"\u003e\n\t    \u003cdiv class=\"row\"\u003e\n\t    \u003c/div\u003e\n\t\u003c/div\u003e\n\nor \n\n    \u003cdiv class=\"bookcase\"\u003e\n\t    \u003cdiv class=\"shelf\"\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n##### **Full Length Containers**\nA 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: \n\n    \u003cdiv class=\"container-wide\"\u003e\n\t    \u003cdiv class=\"row\"\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\nor\n\n    \u003cdiv class=\"bookcase-wide\"\u003e\n\t    \u003cdiv class=\"shelf\"\u003e\n\t    \u003c/div\u003e\n\t\u003c/div\u003e\n\n\n#### **Columns** \n\nColumns 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: \n\n - Mobile or Extra Small (xs)\n - Phablet or Small (sm)\n - Tablet or Medium (md)\n - Desktop or Large (lg)\n - HD or Extra Large (xl)\n\nBookcase 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: \n\n##### **Mobile/Extra Small (xs) Devices** \n\n    \u003cdiv class=\"container\"\u003e\n\t    \u003cdiv class=\"row\"\u003e\n\t\t    \u003cdiv class=\"col-6\"\u003e\n\t\t\t    \u003cp\u003eThis is a mobile 6 column\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-3\"\u003e\n\t\t\t\t\u003cp\u003eThis is a mobile 3 column\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\nor \n\n    \u003cdiv class=\"bookcase\"\u003e\n\t    \u003cdiv class=\"shelf\"\u003e\n\t\t    \u003cdiv class=\"col-6-xs\"\u003e\n\t\t\t    \u003cp\u003eThis is a small 6 column\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-3-xs\"\u003e\n\t\t\t\t\u003cp\u003eThis is a small 3 column\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\n##### **Phablet/Small (sm) Devices**\n\n    \u003cdiv class=\"container\"\u003e\n\t    \u003cdiv class=\"row\"\u003e\n\t\t    \u003cdiv class=\"col-12 col-5-phablet\"\u003e\n\t\t\t    \u003cp\u003eThis column is full length on mobile devices and 5 columns wide on a phablet/small device.\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-8-phablet\"\u003e\n\t\t\t\t\u003cp\u003eThis content is 8 columns wide on a phablet device.\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\nor\n\n    \u003cdiv class=\"bookcase\"\u003e\n\t    \u003cdiv class=\"shelf\"\u003e\n\t\t    \u003cdiv class=\"col-12 col-5-sm\"\u003e\n\t\t\t    \u003cp\u003eThis column is full length on small devices and 5 columns wide on small/phablet devices.\u003c/p\u003e\n\t\t\t\u003c/div class=\"col-8-sm\"\u003e\n\t\t\t\t\u003cp\u003eThis content is 8 columns wide on a small/phablet device.\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n##### **Tablet/Medium (md) Devices**\n\n    \u003cdiv class=\"container\"\u003e\n\t    \u003cdiv class=\"row\"\u003e\n\t\t    \u003cdiv class=\"col-12 col-5-tablet\"\u003e\n\t\t\t    \u003cp\u003eThis column is full length on mobile devices and 5 columns wide on a tablet device.\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-8-tablet\"\u003e\n\t\t\t\t\u003cp\u003eThis content is 8 columns wide on a tablet device.\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\nor\n\n    \u003cdiv class=\"bookcase\"\u003e\n\t    \u003cdiv class=\"shelf\"\u003e\n\t\t    \u003cdiv class=\"col-12-sm col-5-md\"\u003e\n\t\t\t    \u003cp\u003eThis column is full length on small devices and 5 columns wide on medium devices.\u003c/p\u003e\n\t\t\t\u003c/div class=\"col-8-md\"\u003e\n\t\t\t\t\u003cp\u003eThis content is 8 columns wide on a medium device.\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n##### **Desktop/Large (lg) Devices**\n\n    \u003cdiv class=\"container\"\u003e\n\t    \u003cdiv class=\"row\u003e\n\t\t    \u003cdiv class=\"col-4-desktop\"\u003e\n\t\t\t    \u003cp\u003eThis content is 4 columns wide on desktop devices\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-7 col-2-tablet col-3-desktop\"\u003e\n\t\t\t\t\u003cp\u003eThis content is 7 columns wide on a mobile device, 2 columns wide on a tablet, and 3 columns wide on a desktop\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\nor \n\n    \u003cdiv class=\"bookcase\"\u003e\n\t    \u003cdiv class=\"shelf\"\u003e\n\t\t    \u003cdiv class=\"col-4-lg\"\u003e\n\t\t\t    \u003cp\u003eThis content is 4 columns wide on large devices\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class\"col-7-sm col-2-md col-3-lg\"\u003e\n\t\t\t\t\u003cp\u003eThis content is 7 columns wide on a small device, 2 columns wide on a medium device, and 3 columns wide on a large device\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n##### **HD/XL (xl) Devices**\n\n    \u003cdiv class=\"container\"\u003e\n\t    \u003cdiv class=\"row\"\u003e\n\t\t    \u003cdiv class=\"col-6 col-4-desktop col-2-hd\"\u003e\n\t\t\t    \u003cp\u003eThis 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.\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-6-hd\"\u003e\n\t\t\t\t\u003cp\u003eThis content is 6 columns wide on an HD device\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\nor\n\n    \u003cdiv class=\"bookcase\"\u003e\n\t    \u003cdiv class=\"shelf\"\u003e\n\t\t    \u003cdiv class=\"col-6-sm col-4-lg col-2-xl\"\u003e\n\t\t\t    \u003cp\u003eThis 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.\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-6-xl\"\u003e\n\t\t\t\t\u003cp\u003eThis content is 6 columns wide on an XL device.\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjslid%2Fbookcase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjslid%2Fbookcase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjslid%2Fbookcase/lists"}