{"id":15379292,"url":"https://github.com/andreasbm/pixel-perfect","last_synced_at":"2026-01-12T13:30:18.385Z","repository":{"id":57325034,"uuid":"86565359","full_name":"andreasbm/pixel-perfect","owner":"andreasbm","description":"A pixel perfect SCSS stylesheet. Spiced with themeable mixins, custom CSS variables and other cool stuff you can handpick from.","archived":false,"fork":false,"pushed_at":"2018-10-03T11:15:34.000Z","size":160,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-30T14:06:33.635Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pixel-perfect-39e99.firebaseapp.com/","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/andreasbm.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":"2017-03-29T09:47:46.000Z","updated_at":"2020-03-25T18:16:05.000Z","dependencies_parsed_at":"2022-09-18T03:40:18.828Z","dependency_job_id":null,"html_url":"https://github.com/andreasbm/pixel-perfect","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/andreasbm%2Fpixel-perfect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fpixel-perfect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fpixel-perfect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fpixel-perfect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreasbm","download_url":"https://codeload.github.com/andreasbm/pixel-perfect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239748300,"owners_count":19690237,"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":[],"created_at":"2024-10-01T14:18:44.189Z","updated_at":"2025-02-19T23:19:44.714Z","avatar_url":"https://github.com/andreasbm.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pixel Perfect\n[![Version](https://img.shields.io/npm/v/pixel-perfect.svg)](https://www.npmjs.com/package/pixel-perfect) [![Downloads](https://img.shields.io/npm/dt/pixel-perfect.svg)](https://www.npmjs.com/package/pixel-perfect)\n\n# ![pixel-perfect](https://github.com/andreasbm/pixel-perfect/raw/master/logo.svg?sanitize=true)\n\nA pixel perfect SCSS stylesheet (demo: [https://pixel-perfect-39e99.firebaseapp.com/](https://pixel-perfect-39e99.firebaseapp.com/)). Spiced with themeable mixins, custom CSS variables and other cool stuff you can handpick from.\n\nPixel perfect definition:\n\n\u003e Each pixel is intentionally being used to the fullest for the sharpest, cleanest look.\n\n# How to use\n\n## 👍 Step 1: Install Pixel Perfect\n\n```\n$ npm i pixel-perfect --save\n```\n\n## 🙌 Step 2: Import the library\n```\n@import \"~pixel-perfect/pixel-perfect.scss\";\n```\n\n## 👏 Step 3: Include the layout\n\nYou can include everything from the layout.\n\n```\n@include pp-layout();\n```\n\nOr you can handpick the styles you want. Let's say you only want the grid and the typography.\n```\n@include pp-grid();\n@include pp-typography();\n```\n\n## 👌 Step 4: Create a theme for your app\n\nCreate a theme (or multiple themes) for your app.\n```\n@mixin light-theme() {\n  @include css-vars(pp-palette(\"primary\", $pp-yellow));\n  @include css-vars(pp-palette(\"accent\", $pp-orange));\n  @include css-vars(pp-palette(\"warn\", $pp-red));\n  @include css-vars(pp-palette(\"error\", $pp-orange));\n  @include css-vars(pp-palette(\"success\", $pp-black-dirty));\n  @include css-vars((\n    --navbar-color: white,\n    --navbar-bg: map-get($pp-yellow, 500),\n    --app-text: black,\n    --app-bg: white\n  ));\n}\n```\n\nInclude the mixins in your stylesheet. You could for example scope the themes in classes to quickly switch between themes on runtime.\n\n```\n.theme-light {\n  @include light-theme();\n}\n\n.theme-dark {\n  @include dark-theme();\n}\n```\n\nYou might be wondering what variables the `css-vars(pp-palette(...))` spits out. The palette function spits out all the nessesary key-value pairs for the palette. Look below what variables we are talking about.\n\n```\n$pp-blue: (\n  500: #4581F6,\n  400: light-color(#4581F6),\n  600: dark-color(#4581F6),\n  contrast: (\n    500: $white-87-opacity,\n    400: $white-87-opacity,\n    600: $white-87-opacity\n  )\n);\n\n@include css-vars(pp-palette(\"primary\", $pp-blue), $root: true);\n\n:root {\n  --primary-default: pp-map-get($colors, $default)\n  --primary-lighter: pp-map-get($colors, $lighter),\n  --primary-darker: pp-map-get($colors, $darker),\n  --primary-default-contrast: pp-contrast($colors, $default),\n  --primary-lighter-contrast: pp-contrast($colors, $lighter),\n  --primary-darker-contrast: pp-contrast($colors, $darker)\n  \n  --primary-500: pp-map-get($colors, 500),\n  --primary-500-contrast: pp-contrast($colors, 500)\n  \n  --primary-600: pp-map-get($colors, 600),\n  --primary-600-contrast: pp-contrast($colors, 600)\n  \n  --primary-400: pp-map-get($colors, 400),\n  --primary-400-contrast: pp-contrast($colors, 400)\n}\n```\n\n## 🤘 Step 5: Decide whether you want custom CSS variables or SASS variables.\n\nThe variables can be used in your stylesheets by using the `var(args...)` function. If you want the primary default color you could grab it by using `var(--primary-default)`. The theming in pixel-perfect uses custom CSS variables out of the box. Unfortunately, not all browsers support custom CSS variables yet ([See current state](http://caniuse.com/#feat=css-variables)). Therefore you can set the flag `$css-vars-use-native: false;` to tell pixel-perfect to use SASS variables instead. We recommend that you use custom CSS variables to get all the sweet benefits and either serve a seperate stylesheet for browsers without custom CSS variables or use polyfills.\n\nIf you want to deactivate you can do the following by extracting all of your theme related sass into one mixin that you can reuse with different variables:\n\n```\n// Deactive custom CSS variables :,(\n$css-vars-use-native: false;\n\n.theme-light {\n  @include light-theme();\n  @include demo-theme();\n}\n\n.theme-dark {\n  @include dark-theme();\n  @include demo-theme();\n}\n```\n\n## 💪 Step 6: Customize the variables (optional)\n\nIts possible to customize most of the variables used in pixel-perfect.\n\n```\n@import \"~pixel-perfect/pixel-perfect.scss\";\n\n$font-size-h1: 20rem;\n$font-size-h2: 17rem;\n\n$space-s: 5rem;\n$space-m: 10rem;\n$space-l: 15rem;\n...\n```\n\n## 👊 Step 7: Create your app-theme\n\nHere is an example of what your theme could look like.\n\n```\n@mixin demo-theme() {\n  body {\n    color: var(--app-text);\n    background: var(--app-bg);\n  }\n}\n```\n\n# 🔥 SCSS naming\n\nGo from general to concrete in the naming. Examples could be \"property-element\" or \"property-state\".\n\n```\n$font-size-base-screen-l:   17px !default;\n\n$font-size-l:   px-to-rem(18) !default;\n$font-size-m:   px-to-rem(15) !default; \n\n$font-size-h1:  px-to-rem(50) !default;\n$font-size-h2:  px-to-rem(32) !default;\n\n$font-weight-h1:  $font-weight-bold !default;\n$font-weight-h2:  $font-weight-thin !default;\n\n$space-screen-s: px-to-rem(20) !default;\n\n```\n\nIts fine to use the module name (eg. \"button\") as prefix. \n```\n$button-border: none !default;\n$button-border-radius: px-to-rem(6) !default;\n\n$button-font-size: $font-size-h4 !default;\n$button-line-height: 100% !default;\n$button-transition: all 200ms ease !default;\n```\n\n# 🚀 Mixin overview\n\nHeres an overview of some of the sweet mixins that can generate classes for you.\n\n```\n@include pp-normalize();\n@include pp-color-classes();\n@include pp-elevation-classes();\n\n@mixin pp-layout() {\n\t@include pp-normalize();\n\t@include pp-global();\n\t@include pp-typography();\n\t@include pp-grid();\n}\n\n@mixin pp-layout-helpers() {\n  @include pp-layout-helpers-padding();\n  @include pp-layout-helpers-margin();\n  @include pp-layout-helpers-display();\n  @include pp-layout-helpers-alignment();\n}\n```\n\n# 🌈 License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fpixel-perfect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreasbm%2Fpixel-perfect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fpixel-perfect/lists"}