{"id":15111904,"url":"https://github.com/trowel/trowel","last_synced_at":"2025-09-27T13:30:39.229Z","repository":{"id":57380172,"uuid":"67021722","full_name":"Trowel/Trowel","owner":"Trowel","description":"⚠️ DEPRECATED. Trowel is a Sass toolkit that allows you to create and use CSS frameworks with the most flexible pattern ever designed.","archived":true,"fork":false,"pushed_at":"2019-10-22T12:16:03.000Z","size":558,"stargazers_count":82,"open_issues_count":7,"forks_count":4,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-26T03:02:01.876Z","etag":null,"topics":["sass","sass-framework","sass-functions","sass-mixins","trowel"],"latest_commit_sha":null,"homepage":"http://trowel.github.io/","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/Trowel.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":"2016-08-31T09:05:19.000Z","updated_at":"2024-01-19T20:30:10.000Z","dependencies_parsed_at":"2022-08-28T21:22:20.123Z","dependency_job_id":null,"html_url":"https://github.com/Trowel/Trowel","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Trowel%2FTrowel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Trowel%2FTrowel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Trowel%2FTrowel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Trowel%2FTrowel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Trowel","download_url":"https://codeload.github.com/Trowel/Trowel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234438056,"owners_count":18832618,"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":["sass","sass-framework","sass-functions","sass-mixins","trowel"],"created_at":"2024-09-26T00:24:13.045Z","updated_at":"2025-09-27T13:30:38.908Z","avatar_url":"https://github.com/Trowel.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Trowel](media/dist/banners/trowel-black-on-transparent.png)\n\n# Trowel\n[![CircleCI](https://circleci.com/gh/Trowel/Trowel.svg?style=svg)](https://circleci.com/gh/Trowel/Trowel)\n[![Bower](https://img.shields.io/bower/v/trowel-core.svg?maxAge=2592000)]()\n[![npm](https://img.shields.io/npm/v/trowel-core.svg?maxAge=2592000)]()\n\nThe most evolving way to write scss code\n\n## Download\n```sh\n# with bower\nbower install trowel-core --save\n\n# with npm\nnpm install trowel-core --save\n\n# with yarn\nyarn add trowel-core\n```\n\n## What is *Trowel* ?\nTrowel is made for helping you to create and customize visual components.\n\n### The frameworks state of play\nCSS frameworks like Bootstrap or Foundation are great to start projets because they provide solid bases to your front-end design. Sass and less versions of thoses librairies are even better because they allow you to customize the UI through variables like below :\n```scss\n// typical way to customize a framework with scss variables.\n$button-primary-bg: rgb(31, 13, 51) !default;\n$button-success-bg: rgb(55, 211, 189) !default;\n$button-warning-bg: rgb(255, 176, 0) !default;\n$button-danger-bg: rgb(253, 65, 100) !default;\n```\nBut maybe you just need two themes for you button component or maybe you need to create a fith theme. Today you cannot do this easily and quickly with variables and it makes framework painful to use when you need deep changes from your design.\n\n### The *Trowel* way\nTrowel is a Sass extension designed to create framework easier and quicker to customize. The key feature provided by *Trowel* is a new way to write scss variables : we will defined into a single variable all the variants for a property.\n\nIf we translate in *Trowel variable* the previous example we will need a single variable :\n```scss\n// the trowel variable for button backgrounds\n$button-bg: (\n  '-primary': rgb(31, 13, 51),\n  '-success': rgb(55, 211, 189),\n  '-warning': rgb(255, 176, 0),\n  '-danger': rgb(253, 65, 100),\n) !default;\n```\nThen *Trowel* will loop over the map `$button-bg` and generate css declaration for each button variant.\n\nYou don't need `.btn--danger` button variant ? Just redefine the `$button-bg` variable without the `'-danger'` and you won't find it into your style.\n\nYou want to add an 'info' variant for your button component ? Rewrite the `$button-bg` map by adding a new entry with `'-info''` as entry and the color you want as value.\n\n\n## Learn *Trowel*\nIf you want to learn how to use a *Trowel component* and create your own, check out our [getting started](./doc/1-the-concept.md) tutorial.\n\n\n## Contribution\nA contribution guide is coming soon\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrowel%2Ftrowel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrowel%2Ftrowel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrowel%2Ftrowel/lists"}