{"id":13549687,"url":"https://github.com/JohnCoates/CSSketch","last_synced_at":"2025-04-02T23:30:52.080Z","repository":{"id":142349438,"uuid":"44083044","full_name":"JohnCoates/CSSketch","owner":"JohnCoates","description":"Plugin that adds CSS support to Sketch 3 for a faster design workflow.","archived":false,"fork":false,"pushed_at":"2018-05-26T16:12:33.000Z","size":17784,"stargazers_count":1890,"open_issues_count":48,"forks_count":96,"subscribers_count":74,"default_branch":"master","last_synced_at":"2025-04-01T13:09:08.871Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","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/JohnCoates.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-10-12T03:53:59.000Z","updated_at":"2025-02-12T11:06:22.000Z","dependencies_parsed_at":"2024-01-13T19:41:58.184Z","dependency_job_id":"65f4764f-edd4-4b31-8095-5f104fba8e70","html_url":"https://github.com/JohnCoates/CSSketch","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnCoates%2FCSSketch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnCoates%2FCSSketch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnCoates%2FCSSketch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnCoates%2FCSSketch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JohnCoates","download_url":"https://codeload.github.com/JohnCoates/CSSketch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246910852,"owners_count":20853651,"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-08-01T12:01:24.441Z","updated_at":"2025-04-02T23:30:52.050Z","avatar_url":"https://github.com/JohnCoates.png","language":"Objective-C","readme":"## Unsupported\nCSSketch is no longer supported, and doesn't work with the latest versions of Sketch. I'm no longer designing as much, so I haven't had time to keep it updated. If you're interested in maintaining this project and know Objective-C and reverse engineering, email me at john@johncoates.me\n\n## CSSketch - CSS for Sketch 3\nCSSketch is a Sketch 3 plugin that enables you to modify your designs quickly by attaching it a stylesheet to it that you can use to lay out your designs, change colors and shadows quickly, etc.\nIt supports [Sass](http://sass-lang.com/) and [{less}](http://lesscss.org) stylesheets, which means you can put functions and variables in your stylesheet to make your workflow even more efficient.\n\nCSSketch is completely open source, so feel free to contribute to its development!\n\n## The Story Behind CSSketch\n#### [Programmers Design Differently: Why I Built a CSS Plugin for Sketch 3](https://medium.com/@punksomething/programmers-design-differently-why-i-built-a-css-plugin-for-sketch-3-52a1246305a4) on Medium.com\n\n## Screencast\n\n![Screencast](https://raw.githubusercontent.com/JohnCoates/CSSketch/master/screencast.gif)\n\n## Download \u0026 Install\n#### CSSketch is available through [Sketch Toolbox](http://sketchtoolbox.com/). This is the best option for installation, as it automatically keeps CSSketch up to date.\n\n## Download \u0026 Install Manually\nDownload from [Github](https://github.com/JohnCoates/CSSketch/archive/master.zip)\n\nOpen CSSketch.sketchplugin and Sketch will ask if you'd like it installed\n\n\n## Using CSSketch\n\n* To enable CSSketch you must run the menu bar option every time Sketch 3 launches. You can find it on the menu bar at Plugins -\u003e CSSketch -\u003e Layout Layers.\n* A stylesheet is set on a per-page basis. Set the stylesheet at Plugins -\u003e CSSketch -\u003e Set Page's Stylesheet for every page you want a stylesheet for. Once this is set, simply make changes to the stylesheet and save them to see the effects.\n* Take a look in Examples/ for examples of what you can do right now.\n* **Please Note:** Handling for many CSS rules is missing currently.\n\n\n## Targeting Your Sketch File\n\nYou can use the following attributes to target various components of your sketch file in combination with other css targeting methods:\n\n* `[type=\"artboard\"]` - To target all artboards\n* `[type=\"text\"]` - To target all text\n* `[name=\"yourLayerName\"]` - To target all layers with `yourLayerName` in their name\n* `.className` - To target all layers named `.className`\n\n## Features\n* **Less Support:** Variables and functions are supported. Find out more at [LessCSS.org](http://lesscss.org)\n* **Auto Detect Stylesheet changes:** Set the stylesheet once, and that's it. Changes are detected and applied as soon as you save the stylesheet.\n* **Webkit Engine:** CSSketch is powered by the WebKit engine, the same code that powers Safari and Google Chrome.\n* **Toolbar Icon:** A toolbar icon is added after running CSSketch for easy applying of changes.\n* **Sandbox Support:** CSSketch works with the Mac App Store version of Sketch 3 as well as the regular version.\n* **Stylesheet Path Store In Document:** You only ever have to set the stylesheet path once. It's then stored in the document for future use.\n\n## Supported CSS\n* CSSketch uses the system version of WebKit. Upgrade to El Capitan for the best compatibility with CSS standards.\n* All layout variables should work fine.\n* All elements are given default values of position:absolute, top, and left, with their current positions on the artboard.\n* For selectors: All layers are the element type \"layer\". The name attribute is set to a layer's name, minus the classes. The type attribute is set to \"text\" for text, and \"artboard\" for artboards.\n* Background-color is supported\n* Border is supported (only solid lines)\n* Shadow is supported\n* Color is supported\n* Text-transform is supported\n\n## Extra Resources Posted On Dribbble!\n[![Dribbble](https://raw.githubusercontent.com/JohnCoates/CSSketch/master/Documentation/dribbbleFollow.png)](https://dribbble.com/johncoates)\n\n\n## Community\n- **Find a bug?** [Open an issue](https://github.com/JohnCoates/CSSketch/issues/new). Try to be as specific as possible.\n- **Have a feature request** [Open an issue](https://github.com/JohnCoates/CSSketch/issues/new). Tell me why this feature would be useful, and why you and others would want it.\n\n## Contribute\nLot of CSS rules have yet to be added. They're decently easy to add. I appreciate all pull requests! You'll want to modify the following files to add CSS rule handling:\n* CSS Rule handlers: [CSSketch Helper/src/Models/Layout/CSKLayerCSS.m](https://github.com/JohnCoates/CSSketch/blob/master/CSSketch%20Helper/src/Models/Layout/CSKLayerCSS.m)\n* Sketch Header Stubs: [CSketch Helper/src/Headers/CSSketchHeaders.h](https://github.com/JohnCoates/CSSketch/blob/master/CSSketch%20Helper/src/Headers/CSKSketchHeaders.h)\n\n## Changelog\n- February 2016 - 1.1: Sass support, installer, now uses [SketchKit](https://github.com/JohnCoates/SketchKit)\n- October 2015 - 1.0: first release\n\n## License\n[MIT License](https://raw.githubusercontent.com/JohnCoates/CSSketch/master/LICENSE)\n\n## Author\nMaintained and created by John Coates [@punksomething](http://twitter.com/punksomething)\n","funding_links":[],"categories":["Objective-C","Objective-C  Stars 1000以内排名整理","📦 Legacy \u0026 Inactive Projects","Other"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJohnCoates%2FCSSketch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJohnCoates%2FCSSketch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJohnCoates%2FCSSketch/lists"}