{"id":13424259,"url":"https://github.com/rohitkrai03/pills","last_synced_at":"2025-05-16T06:04:27.824Z","repository":{"id":36282671,"uuid":"40587181","full_name":"rohitkrai03/pills","owner":"rohitkrai03","description":"A simple responsive CSS Grid for humans. View Demo - ","archived":false,"fork":false,"pushed_at":"2016-09-08T17:03:30.000Z","size":92,"stargazers_count":1453,"open_issues_count":1,"forks_count":56,"subscribers_count":33,"default_branch":"gh-pages","last_synced_at":"2025-05-16T06:03:57.125Z","etag":null,"topics":["css","css-grid","grid","grid-framework"],"latest_commit_sha":null,"homepage":"https://rohitkrai.dev/pills","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rohitkrai03.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":"2015-08-12T07:42:45.000Z","updated_at":"2025-05-06T07:21:58.000Z","dependencies_parsed_at":"2022-09-21T01:01:01.774Z","dependency_job_id":null,"html_url":"https://github.com/rohitkrai03/pills","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitkrai03%2Fpills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitkrai03%2Fpills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitkrai03%2Fpills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rohitkrai03%2Fpills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rohitkrai03","download_url":"https://codeload.github.com/rohitkrai03/pills/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478186,"owners_count":22077675,"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","css-grid","grid","grid-framework"],"created_at":"2024-07-31T00:00:50.905Z","updated_at":"2025-05-16T06:04:27.799Z","avatar_url":"https://github.com/rohitkrai03.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Pills\n\n\u003e A simple, responsive, and tiny CSS grid for humans who don't like memorising all those cryptic codes like col-*-6 or something.\n\u003e [View the Demo --\u003e](http://arkpod.in/pills)\n\n## Why?\nYou must be thinking there are like a thousand grid frameworks. So why another one?? What's so special about this one??\n\nWell, there are three types of people who use css grids in their own way -\n\n* First - The ones who just memorize the cryptic codes like col-md-6 or whatever from their favourite CSS Framework like Bootstrap or Foundation. And not long before, I too was in this category using Bootstrap's grid all the time.\n\n* Second - The ones who simplify the grids into simple partitions of the page. Like half of the page or one-third or something like that and process ahead with that. One of the best grid frameworks that is present for this category is [Gridism](http://cobyism.com/gridism/) which  actually inspired me to create Pills in the first place.\n\n* Third -  The ones who like to count number of rows and columns but in a simple, human-like language.\n\n\n### My thoughts\nTrust me, Gridism is awesome and it simplifies stuff like anything. But still sometimes I felt the one-third, two-fifths, golden-small n all are a bit of confusing (_For me at least_). And Gridism is just a 5 column grid which can sometimes be a bit limiting compared to 12-column grids. \n\n\u003e What if I wanted a simple 12-column layout and I could say that I want this div to be of size of **four columns**  and another div in the same row with size of **eight columns**?? \n\u003e What if I wanted to use offsets??\n\nThis made me think about a grid which will focus on both the Second and Third category of people. A grid which can be used like traditional row-column layout or the more contemporary thinking of dividing the page like half or one-third or something.\n\nSo, Pills has two parts (Not literally, I mean there is just one file that is pills.css) - \n\n* First - This will have a 12 columns for that granular control but still would be simple enough like English language.\n\n* Second - Inspired by Gridism thinking and catering to people who think fractional division of page is simpler.\n\n\n## Installation\n\n### 1. Get the files\n\nThe easiest way to use Pills in your project is via the [Bower](http://twitter.github.com/bower) package manager.\n\n```sh\nbower install pills\n```\n\nAlso, you can download it using npm.\n```sh\nnpm install pills\n```\n\nOtherwise, [download the zip folder from here](https://github.com/rohitkrai03/pills), extract it, and copy `dist/pills.min.css` into your project’s folder. Boom. Done.\n\n### 2. Link the stylesheet\n\nAdd the following stylesheet to your HTML’s `\u003chead\u003e` section:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"bower_components/pills/dist/pills.min.css\"\u003e\n```\n\n**Note:** If you didn’t install using Bower, you need to adjust the path of the CSS file to match your file structure.\n\n### 3. Viewport scale\n\nAdd the following meta tag to your HTML’s `\u003chead\u003e` section:\n\n```html\n\u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1\"\u003e\n```\n\nWithout this meta tag, mobiles and tablets might load your page as a scaled-down version of the desktop size, instead of resizing the content to match the device’s actual viewport width.\n\n## Build\nInstall npm dev dependencies.\n```sh\nnpm install\n```\n\nFor compiling scss files and watching the changes.\n```sh\ngulp\n```\n\n## Usage\n\n### 1. First \n\nA part of Pills is to build using `columns` classes which are inside of a `row` class.\n\nThe `row` class encapsulates the `columns`. As Pills uses a twelve column grid, the `twelve columns` class will take up the whole of the row.\n```html\n\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\u003cdiv class=\"twelve columns\"\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n```\n\n\nYou can mix it up however you like though.\n```html\n\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\u003cdiv class=\"four columns\"\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"eight columns\"\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n```\n\n\nYou can put a `row` class inside of a `column` class in order to nest `columns`.\n```html\n\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\u003cdiv class=\"four columns\"\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"eight columns\"\u003e\n\t\t\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\t\t\u003cdiv class=\"six columns\"\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\u003cdiv class=\"six columns\"\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n```\n\n\nYou can also offset a column as per your wish.\n```html\n\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\t\u003cdiv class=\"eight columns offset by-four\"\u003e\n\t\t\u003c/div\u003e\n```\n\n\n\n\n### 2. Second \n\nThe second part of Pills consists of a five column layout with division of page in mind. If you want to strech the column to the whole page, just use `whole` along with `column`\n\n```html\n\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\u003cdiv class=\"column whole\"\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n```\n\n\nUsing two halves of the page\n```html\n\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\u003cdiv class=\"column half\"\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"column half\"\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n```\n\n\nThis can also be nested like above.\n```html\n\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\u003cdiv class=\"column one-fourth\"\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"column three-fourths\"\u003e\n\t\t\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\t\t\u003cdiv class=\"column two-fifths\"\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\t\u003cdiv class=\"column three-fifths\"\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n```\n\n\nYou can also offset a column as per your wish.\n```html\n\t\t\u003cdiv class=\"row\"\u003e\n\t\t\t\t\u003cdiv class=\"column two-thirds offset by-one-third\"\u003e\n\t\t\u003c/div\u003e\n```\n\n\n### 3. Other useful classes.\n\n####For using different width for the rows.\n\n.wide - 1180px\n```html\n\t\t\u003cdiv class=\"row wide\"\u003e\n\t\t\t\u003cdiv class=\"column whole\"\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n```\n\n.wider - 1366px\n```html\n\t\t\u003cdiv class=\"row wider\"\u003e\n\t\t\t\u003cdiv class=\"column whole\"\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n```\n\nNo max-width for the rows.\n```html\n\t\t\u003cdiv class=\"row free-width\"\u003e\n\t\t\t\u003cdiv class=\"column whole\"\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n```\n\n## Contributing\nI'd love to get contributions for this project. This is just my amateur attempt at doing something which came to my mind. I'm all up for criticism if i've done something wrong, but do help me correct those by contributing to this project. Fork at your will. \n\n## License\n\n[LICENSE](https://github.com/rohitkrai03/pills/blob/gh-pages/LICENSE) (MIT).\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohitkrai03%2Fpills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frohitkrai03%2Fpills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frohitkrai03%2Fpills/lists"}