{"id":15011735,"url":"https://github.com/p-realinho/p-reset","last_synced_at":"2025-10-22T21:15:00.100Z","repository":{"id":57317473,"uuid":"62525202","full_name":"p-realinho/p-reset","owner":"p-realinho","description":null,"archived":true,"fork":false,"pushed_at":"2017-08-06T04:06:10.000Z","size":96,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-28T20:07:28.050Z","etag":null,"topics":["css","framework","grid","less","normalize","reset","wordpress"],"latest_commit_sha":null,"homepage":"https://p-realinho.github.io/p-reset","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/p-realinho.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-04T02:16:58.000Z","updated_at":"2023-01-28T08:02:33.000Z","dependencies_parsed_at":"2022-08-25T21:11:53.770Z","dependency_job_id":null,"html_url":"https://github.com/p-realinho/p-reset","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-realinho%2Fp-reset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-realinho%2Fp-reset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-realinho%2Fp-reset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p-realinho%2Fp-reset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/p-realinho","download_url":"https://codeload.github.com/p-realinho/p-reset/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235184549,"owners_count":18949260,"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","grid","less","normalize","reset","wordpress"],"created_at":"2024-09-24T19:41:34.972Z","updated_at":"2025-10-03T20:32:01.316Z","avatar_url":"https://github.com/p-realinho.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# (P)reset\n\nA simple, lightweight LESS Framework.\n\n[![npm version](https://badge.fury.io/js/p-reset.svg)](https://badge.fury.io/js/p-reset)\n[![Bower version](https://badge.fury.io/bo/p-reset.svg)](https://badge.fury.io/bo/p-reset)\n\n(More info and better docs soon)\n\n### Vars\n\n| Var | Function |\n|------|----------|\n| **Fonts** | |\n| @bodyfont | Font used in general text.\n| @titlefont | Font for titles (h1 / h3 / h5).\n| **Shades** | |\n| @white / @lightgray / @gray / @black | |\n| @background | Background color.\n| @color | Text color.\n| **Colors** | |\n| @accent | The main color. Used in buttons/inputs, .info/.message boxes and titles. |\n| @compl | Complementary color. |\n| @success / @error / @warn | Colors for .info/.message boxes and buttons/inputs. |\n| **Sizes** | |\n| @basefont | General font size. |\n| @baseline | General |\n| @navheight | Height for the nav menu. |\n| @pagePadding | @baseline * 6; |\n| @pagePadding--tablet | @baseline; |\n| @pagePadding--phone | @baseline / 2; |\n| **Others** | |\n| @laptop / @tablet / @phone | Media Query Breakpoints. |\n| @cubic-bezier | Main easing function. |\n| @brad | Main border-radius. Used in buttons/inputs and .info/.message boxes. |\n\n### Columns / Grid\n\nSo, columns.\n\nAll you need is an element with a `.row-(n)` class (in this case, the default is `.row-12`), and inside, the `.col-(n)` elements.\nIn case you need gutters, wrap it all inside a `.gutt`.\n\n\n#### Default Breakpoints\n\n| Var     | Class         | Media Query |\n|---------|---------------|-------------|\n|         | `.col-(n)`    |             |\n| @tablet | `.col-sm-(n)` | max-width: 900px |\n| @phone  | `.col-xs-(n)` | max-width: 600px |\n\n\n#### Examples\n\n**Without Gutters**\n\n\t\u003cdiv class=\"row-12\"\u003e\n\t\t\u003cdiv class=\"col-sm-12 col-4\"\u003e\n\t\t\tI'm full-width on tablets and phones, and 1/3 on bigger screens.\n\t\t\u003c/div\u003e\n\t\t\u003cdiv class=\"col-xs-12 col-sm-6 col-4\"\u003e\n\t\t\tWe're full-width on phones, 1/2 on tablets, and 1/3 on bigger screens.\n\t\t\u003c/div\u003e\n\t\t\u003cdiv class=\"col-xs-12 col-sm-6 col-4\"\u003e\n\t\t\tWe're full-width on phones, 1/2 on tablets, and 1/3 on bigger screens.\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n\n**With Gutters**\n\n\t\u003cdiv class=\"gutt\"\u003e\n\t\t\u003cdiv class=\"row-12\"\u003e\n\t\t\t\u003cdiv class=\"col-sm-12 col-4\"\u003e\n\t\t\t\tI'm full-width on tablets and phones, and 1/3 on bigger screens.\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-xs-12 col-sm-6 col-4\"\u003e\n\t\t\t\tWe're full-width on phones, 1/2 on tablets, and 1/3 on bigger screens.\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"col-xs-12 col-sm-6 col-4\"\u003e\n\t\t\t\tWe're full-width on phones, 1/2 on tablets, and 1/3 on bigger screens.\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\n\nNote that the idea behind (P)reset is to **tweak it to better serve your needs**.\n\nSo if, for example:\n- 12 columns are not enough;\n- The gutters are not the size you wanted;\n- You could use one or two more breakpoints, or change when the current ones are triggered;\n- ... feel free to change it! ([Cool, but ... How?](#useful-tweaks))\n\nAlso, keep in mind that, unlike other frameworks (i.e. Bootstrap), this grid layout is **not mobile-first**.\nSo only the `col-` size is required, instead of the mobile (col-xs-) size.\n\n### Classes\n\n| Class | Function |\n|-------|----------|\n| .shadow | Adds a box shadow to the element. |\n| .input | Styles an element like an input. |\n| **.button / .btn** | Styles an element like a button. |\n| .big | Make the button bigger. |\n| .hover | Style the button as it was hovered. |\n| .no-shadow | Removes shadow from the button. |\n| .active | Style the button as it was active. |\n| **Colors** | |\n| .border-(color) | Change the border color of an element. (i.e. '.border-black') |\n| .color-(color) | Change the text color of an element. (i.e. '.color-white') |\n| .bg-(color) | Change the background color of an element. (i.e. '.color-acc') |\n| **Fonts** | |\n| .font-title | Change the element's font to the @titlefont. |\n| .font-body | Change the element's font to the @bodyfont. |\n| **Text Aligns** | |\n| .talignleft | Align the elements text to the left. |\n| .taligncenter | Align the elements text to the center. |\n| .talignright | Align the elements text to the right. |\n| **Margins / Paddings** | |\n| .page-padding | |\n| .page-margin | |\n| .no-padding | Removes all padding from an element. |\n| .no-margin | Removes all margins from an element. |\n| .padding | Adds a padding of @baseline to the element. |\n| .padding-half | Adds a padding of (@baseline / 2) to the element. |\n| .padding-sides | Adds a padding of @baseline to the left and right sides of the element. |\n| .padding-ends | Adds a padding of @baseline to the top and bottom sides of the element. |\n| **Media Hides** | |\n| .laptop-hide | Hide the element on laptops (and above). |\n| .tablet-hide | Hide the element on tablets (and below). |\n| .phone-hide | Hide the element on phones. |\n| **Width** | |\n| .full-width / .width-100 | Set the element's width to 100%. |\n| .half-width / .width-50 | Set the element's width to 50%. |\n| **Border Radius** | |\n| .brad / .b-rad | Set the element's border-radius to the value defined in `vars.less` |\n| **Info / Message** | |\n| .info / .message | |\n| .warn / .warning | |\n| .yes / .accept / .success / .succ | |\n| .no / .cancel / .error / .err | |\n\n\n### Useful Tweaks\n\n\n---\n\n\n#### TODO\n- Footer - Always on bootom fix\n- Add tooltips\n- Add saturation var to .shadow()\n- Media Queries\n\t- Test something like ~'(min-width: @tablet + 1)'\n- Change table styles\n- Consider adding\n\ta, a:link, a:visited, a:focus, a:hover, a:active{ color: inherit; }\n\t:not(nav){\n\t\ta, a:link, a:visited, a:focus, a:hover, a:active{\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n- Add mixin for all a states [Docs](http://lesscss.org/features/#detached-rulesets-feature).\n- Add WordPress Gallery Support\n- Fix WordPress Admin Bar + nav top on mobile\n- Move nav styles from 'p-reset.less' to 'style.less'\n- Fix Slick overflow-x\n- Add more font/text size options (big/bigger)\n- Refactor inputs/buttons\n\t- Implement \u0026:extend(.class all);\n\t- Add mixin. [Docs](http://lesscss.org/features/#detached-rulesets-feature).\n- Add ratio/container classes.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp-realinho%2Fp-reset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fp-realinho%2Fp-reset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp-realinho%2Fp-reset/lists"}