{"id":15932725,"url":"https://github.com/snugug/letterform-shades","last_synced_at":"2026-06-02T04:30:16.736Z","repository":{"id":16719489,"uuid":"19476498","full_name":"Snugug/letterform-shades","owner":"Snugug","description":null,"archived":false,"fork":false,"pushed_at":"2016-12-07T20:55:32.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-25T02:01:37.852Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Snugug.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-06T01:08:51.000Z","updated_at":"2016-12-07T20:55:33.000Z","dependencies_parsed_at":"2022-07-26T08:32:16.619Z","dependency_job_id":null,"html_url":"https://github.com/Snugug/letterform-shades","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/Snugug%2Fletterform-shades","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snugug%2Fletterform-shades/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snugug%2Fletterform-shades/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Snugug%2Fletterform-shades/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Snugug","download_url":"https://codeload.github.com/Snugug/letterform-shades/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240170065,"owners_count":19759143,"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-07T02:03:38.714Z","updated_at":"2026-06-02T04:30:16.639Z","avatar_url":"https://github.com/Snugug.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Letterform Shades\n\nA little Sass library to work with the fantastic shadowing examples from [Typekit Practice](http://practice.typekit.com/lesson/using-shades/)\n\n## Requirements\n\nLetterform Shades requires a Sass compiler that includes the Sass 3.3 feature [`str-index`](http://sass-lang.com/documentation/Sass/Script/Functions.html#str_index-instance_method), or a compatible implementation of said function.\n\n## Installation\n\nInstall either from Bower or RubyGems\n\n```\nbower install letterform-shades --save-dev\n```\n\nor \n\n```ruby\n# Gemfile\ngem 'letterform-shades', '~\u003e0.1'\n```\n\n## Usage\n\nImport into your stylesheet:\n\n```scss\n@import \"letterform-shades\";\n```\n\n## Mixins\n\n**[Close Shade](http://practice.typekit.com/lesson/using-shades/#toc_2)**\n\n```scss\n//////////////////////////////\n// - $vertical: The color for the vertical shade (consider a lowercase `r`)\n// - $horizontal: The color for the horizontal shade (consider the lowercase `r`)\n// - $from: Direction shadow comes from. Options are `top right`, `top left`, `bottom right`, `bottom left`\n// - $distance: The distance you want the shadow to extend. Must be a positive integer\n// - $size: The size you want each slice.\n//////////////////////////////\n@include close-shade($vertical, $horizontal, $from: 'top right', $distance: 10, $size: 0.005em){}\n```\n\n**[Offset Shade](http://practice.typekit.com/lesson/using-shades/#toc_3)**\n\n```scss\n//////////////////////////////\n// - $background: The color of the background the text is on\n// - $shade: The color of the shadow\n// - $from: Direction shadow comes from. Options are `top right`, `top left`, `bottom right`, `bottom left`\n// - $offset: The distance you want the shade to be offset\n// - $size: The size you want the shade to be.\n//////////////////////////////\n@include offset-shade($background, $shade, $from: 'top right', $offset: .010em, $size: .030em) {}\n```\n\n**[Printer's Shade](http://practice.typekit.com/lesson/using-shades/#toc_5)**\n\n```scss\n//////////////////////////////\n// - $shade: The color for the shade\n// - $from: Direction shadow comes from. Options are `top right`, `top left`, `bottom right`, `bottom left`\n// - $distance: The distance you want the shadow to extend. Must be a positive integer\n// - $size: The size you want each slice.\n//////////////////////////////\n@include printers-shade($shade, $from: 'top right', $distance: 10, $size: 0.005em) {}\n```\n\n**[Split Shade](http://practice.typekit.com/lesson/using-shades/#toc_6)**\n\n```scss\n//////////////////////////////\n// Sandwich Split Shade\n// - $cookie: The color for the \"cookie\"\n// - $flavor: The color for the \"ice cream\"\n// - $from: Direction shadow comes from. Options are `top right`, `top left`, `bottom right`, `bottom left`\n// - $cookie-distance: The distance you want the cookie to extend. Must be a positive integer\n// - $flavor-distance: The distance you want the flavor to extend. Must be a positive integer\n// - $size: The size you want each slice.\n//////////////////////////////\n@include sandwich-shade($cookie, $flavor, $from: 'top right', $cookie-distance: 12, $flavor-distance: 29, $size: .005em) {}\n```\n\n```scss\n//////////////////////////////\n// Reversing Split Shade\n// - $depth: The color for the depth shade\n// - $shadow: The color for the shadow\n// - $from: Direction shadow comes from. Options are `top right`, `top left`, `bottom right`, `bottom left`\n// - $depth-distance: The distance you want the depth to extend. Must be a positive integer\n// - $shadow-distance: The distance you want the shadow to extend. Must be a positive integer\n// - $size: The size you want each slice.\n//////////////////////////////\n@include reverse-shade($depth, $shadow, $from: 'top right', $depth-distance: 25, $shadow-distance: 40, $size: .005em) {}\n```\n\n## License\n\n(c) Sam Richard, 2014\n\n[MIT](https://github.com/Snugug/letterform-shades/blob/master/LICENSE.txt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnugug%2Fletterform-shades","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnugug%2Fletterform-shades","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnugug%2Fletterform-shades/lists"}