{"id":24503900,"url":"https://github.com/taylorpzreal/primary-style","last_synced_at":"2026-04-17T15:02:38.152Z","repository":{"id":57330306,"uuid":"100326743","full_name":"TaylorPzreal/primary-style","owner":"TaylorPzreal","description":"A library for basic style write with scss","archived":false,"fork":false,"pushed_at":"2018-01-02T23:50:09.000Z","size":36,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-22T02:34:36.481Z","etag":null,"topics":["css","css-styles","primary-style","scss"],"latest_commit_sha":null,"homepage":"","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/TaylorPzreal.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":"2017-08-15T01:51:21.000Z","updated_at":"2018-01-02T12:43:58.000Z","dependencies_parsed_at":"2022-09-21T02:21:20.908Z","dependency_job_id":null,"html_url":"https://github.com/TaylorPzreal/primary-style","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/TaylorPzreal%2Fprimary-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaylorPzreal%2Fprimary-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaylorPzreal%2Fprimary-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaylorPzreal%2Fprimary-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TaylorPzreal","download_url":"https://codeload.github.com/TaylorPzreal/primary-style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243704183,"owners_count":20334111,"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-styles","primary-style","scss"],"created_at":"2025-01-21T23:18:54.427Z","updated_at":"2026-04-17T15:02:35.532Z","avatar_url":"https://github.com/TaylorPzreal.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# primary-style\n\nBrowser basic styles and useful class.\n\n## Installation And Usage\n\n```bash\nyarn add primary-style\n```\n\n```js\nimport 'primary-style';\n```\n\n## Features\n\n* Page defaults\n\nFrom [Bootstrap](https://getbootstrap.com/docs/4.0/content/reboot/)\n\n```HTML\nThe \u003chtml\u003e and \u003cbody\u003e elements are updated to provide better page-wide defaults. More specifically:\n\n* The box-sizing is globally set on every element—including *::before and *::after, to border-box. This ensures that the declared width of element is never exceeded due to padding or border.\n\n* No base font-size is declared on the \u003chtml\u003e, but 16px is assumed (the browser default). font-size: 1rem is applied on the \u003cbody\u003e for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.\n\n* The \u003cbody\u003e also sets a global font-family, line-height, and text-align. This is inherited later by some form elements to prevent font inconsistencies.\n\n* For safety, the \u003cbody\u003e has a declared background-color, defaulting to #fff.\n```\n\n```css\nhtml {\n  box-sizing: border-box;\n  line-height: 1.15; // Correct the line height in all browsers.\n  height: 100%; // make full height\n  -webkit-text-size-adjust: 100%; // 4\n  -ms-text-size-adjust: 100%; // 4\n  -ms-overflow-style: scrollbar; // 5\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n\n// 1. Set an explicit initial text-align value so that we can later use the\n//    the `inherit` value on things like `\u003cth\u003e` elements.\n\nbody {\n  background-color: #fff;\n  color: #34374c;\n  display: flex;\n  flex-direction: column;\n  font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;\n  font-size: 1rem;\n  height: 100%;\n  margin: 0;\n  text-align: left; // 1\n}\n```\n\n* Font size\n\nUse class ___font-10___, the font size is 10px.\nThe size also could be oneof [10, 12, 14, 16, 18, 20, 22, 24, 28, 30, 32, 36, 48, 64, 72];\n\n* Layout\n\n${size} is oneOf\n\n```js\n[1, 2, 4, 5, 6, 8, 10, 12, 15, 16, 18, 20, 22, 24, 26, 28, 32, 48, 64, 72, 100, 120]\n```\n\nSupport:\n\n```css\n.pl-${size} {\n  padding-left: #{$size}px;\n}\n/* Others like this */\n/*\npr-${size}\npt-${size}\npb-${size}\n\nmr-${size}\nml-${size}\nmt-${size}\nmb-${size}\n*/\n\n.no-padding {\n  padding: 0;\n}\n.no-margin {\n  margin: 0;\n}\n.full-width {\n  width: 100%;\n}\n.full-height {\n  height: 100%;\n}\n```\n\n* Definate Scrollbar default style\n\n## Plan\n\n* [ ] Add colors\n* [ ] Could extention by scss variable\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaylorpzreal%2Fprimary-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaylorpzreal%2Fprimary-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaylorpzreal%2Fprimary-style/lists"}