{"id":19730531,"url":"https://github.com/begriffs/react-showpiece","last_synced_at":"2025-04-30T01:32:53.980Z","repository":{"id":141768192,"uuid":"10206134","full_name":"begriffs/react-showpiece","owner":"begriffs","description":"Eminently styleable markup","archived":false,"fork":false,"pushed_at":"2015-06-01T04:31:25.000Z","size":5242,"stargazers_count":37,"open_issues_count":8,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T21:34:30.620Z","etag":null,"topics":[],"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/begriffs.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":"2013-05-21T21:45:13.000Z","updated_at":"2016-07-31T21:34:14.000Z","dependencies_parsed_at":"2023-03-13T10:29:04.686Z","dependency_job_id":null,"html_url":"https://github.com/begriffs/react-showpiece","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/begriffs%2Freact-showpiece","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/begriffs%2Freact-showpiece/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/begriffs%2Freact-showpiece/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/begriffs%2Freact-showpiece/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/begriffs","download_url":"https://codeload.github.com/begriffs/react-showpiece/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251611728,"owners_count":21617452,"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-11-12T00:16:40.371Z","updated_at":"2025-04-30T01:32:53.587Z","avatar_url":"https://github.com/begriffs.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"### A new vocabulary for the front-end\n\n![Menus](illustrations/menus.png \"Menus\")\n\n**Look at the menus.** What do you see? I don't see `div` and `li` and\n`dl`, I see *groups* and *items* and *descriptions* and *selections.* So\nlet's just use markup that says what we mean.\n\n### Abstracted from Real Sites\n\nThe markup in this project comes from experiments replicating parts of\nreal sites. The challenge is to collect a wide assortment of screenshots\nof actual page items, like menus, then invent one piece of clean markup\nthat can be styled to look like any of them.\n\n### Translated by JSON-Template\n\n\u003cimg src=\"illustrations/render-fb.png\" alt=\"Facebook Style\" align=\"left\" /\u003e\n```json\n[\n  { \"url\": \"#\", \"id\": \"news\",     \"text\": \"News Feed\",    \"selected\": true },\n  { \"url\": \"#\", \"id\": \"messages\", \"text\": \"Messages\",     \"description\": \"9\" },\n  { \"url\": \"#\", \"id\": \"friends\",  \"text\": \"Find Friends\", \"description\": \"6\" },\n  { \"url\": \"#\", \"id\": \"events\",   \"text\": \"Events\" },\n  { \"url\": \"#\", \"id\": \"photos\",   \"text\": \"Photos\" }\n]\n```\n\n\u003cimg src=\"illustrations/render-twitter.png\" alt=\"Twitter Style\" align=\"left\" /\u003e\n```json\n[\n  {\n     \"text\": \"\",\n     \"id\": \"gear\",\n     \"description\": \"Settings and help\",\n     \"groups\": [\n      {\n        \"items\": [\n          { \"id\": \"profile\", \"url\": \"#\", \"text\": \"John Doe\", \"description\": \"Edit profile\" }\n        ]\n      },\n      {\n        \"items\": [\n          { \"url\": \"#\", \"text\": \"Direct Messages\", \"selected\": true },\n          { \"url\": \"#\", \"text\": \"Lists\" }\n        ]\n      },\n      {\n        \"items\": [\n          { \"url\": \"#\", \"text\": \"Help\" },\n          { \"url\": \"#\", \"text\": \"Keyboard Shortcuts\" },\n          { \"url\": \"#\", \"text\": \"Twitter Ads\" }\n        ]\n      },\n      {\n        \"items\": [\n          { \"url\": \"#\", \"text\": \"Settings\" },\n          { \"url\": \"#\", \"text\": \"Sign out\" }\n        ]\n      }\n    ]\n  }\n]\n```\n\n### One Markup, Many Styles\n\nBy challenging the markup to look like many diverse and popular sites,\nwe arrive at the most flexible markup. The high-level domain specific\nlanguage translates into semantic HTML that is eminently styleable with\nCSS.\n\n### Interactive Demo\n\nThe showpiece\n[playground](http://begriffs.github.io/showpiece/playground) uses an\nold-fashioend JSON template language to generate the markup. It is a\ngood place to experiment with creating a new widget style. We're porting\nthis approach to AngularJS. It dynamically loads templates, examples,\nand styles from this repo and provides quick feedback.\n\n### Contributing\n\nSo far this project includes a template for menus, but it still needs\ntemplates for every other kind of common web widget To name a few:\nbreadcrumbs, forms, and pagination links.\n\nYou can also improve existing templates. Here's how. Take a screenshot\nof a widget on a real site. Let's say it's a menu on www.foo.com. And\nthe screenshot to `wild/menus/foo.png`. Now try to define the showpiece\nstructure of the menu and save it in `templates/menu/examples/foo.json`.\nFinally try to style the markup that showpiece generates and save your\nstyle to `templates/menu/styles/foo.css`. If the markup isn't flexible\nenough to let you style the widget correctly then submit an issue to\nthis repo.\n\n### License\n\nShowpiece is Copyright © 2013 Joe Nelson. It is free software, and may\nbe redistributed under the terms specified in the LICENSE file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbegriffs%2Freact-showpiece","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbegriffs%2Freact-showpiece","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbegriffs%2Freact-showpiece/lists"}