{"id":18378307,"url":"https://github.com/tyom/paragon","last_synced_at":"2025-04-11T08:24:24.282Z","repository":{"id":144815483,"uuid":"14997987","full_name":"tyom/paragon","owner":"tyom","description":"Easy UI prototyping \u0026 testing powered by Middleman static generator","archived":false,"fork":false,"pushed_at":"2014-01-11T22:37:11.000Z","size":1368,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-15T22:42:30.502Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://tyom.github.io/paragon/exemplars/","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/tyom.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":"2013-12-07T01:43:49.000Z","updated_at":"2014-01-11T22:37:13.000Z","dependencies_parsed_at":"2023-03-22T13:02:33.455Z","dependency_job_id":null,"html_url":"https://github.com/tyom/paragon","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/tyom%2Fparagon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyom%2Fparagon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyom%2Fparagon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tyom%2Fparagon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tyom","download_url":"https://codeload.github.com/tyom/paragon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248361078,"owners_count":21090811,"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-06T00:32:53.776Z","updated_at":"2025-04-11T08:24:24.263Z","avatar_url":"https://github.com/tyom.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"Paragon\n=======\n\nEasy UI prototyping \u0026amp; testing powered by Middleman static generator\n\nDevelopment server and static site generator with isolated styles, mock data and JavaScript.\n\nIt's great for quick interaction prototyping, generating styleguides and UI regression testing.\n\nCheck `source/prototypes` for example of a prototype and `source/exemplar` for an example which can be set up for UI testing.\n\n\nTech\n----\n\nParagon is built on top of [Middleman](https://github.com/middleman/middleman). Bundled with [Slim Templates](https://github.com/slim-template/slim), [Bourbon](https://github.com/thoughtbot/bourbon), [Neat](https://github.com/thoughtbot/neat) by default. Those can be extended or replaced with little effort. Deploy with [Middleman Deploy](https://github.com/tvaughan/middleman-deploy).\n\n\nOptionally included: Foundation 5 and AngularJS via ([Bower](https://github.com/bower/bower)).\n\n\nUsage\n-----\n\nThe best way to use Paragon is to install it as a Middleman template:\n```\ngit clone --depth=1 git@github.com:tyom/paragon.git ~/.middleman/paragon \u0026\u0026 rm -rf ~/.middleman/paragon/.git\n```\n\nThen initialise a project with `middleman init \u003cproject-name\u003e -T paragon`. This create all files, run bundle and leave the git repo out so a fresh repo can be created.\n\n### Inside new project\n\n```\nbower install\n````\n\nInstall client-side libraries: AngularJS and Foundation (add your own).\n\n```\nmiddleman\n```\n\nRun local server.\n\n```\nmiddleman build\n```\n\nBuild static website.\n\n\nExemplars\n---------\n\nAdd new exemplars (UI components) in /exemplars directory. [See examples](https://github.com/tyom/paragon/tree/master/source/exemplars).\n\nExemplar pages have their meta data defined in Frontmatter. It also has several ways to inject custom JavaScript or CSS along:\n\n```\n---\njavascripts:\n  - exemplars/example/custom-js\nstylesheets:\n  - exemplars/example/custom-css\n---\n```\n\nThis will include those additionally files. CoffeeScript \u0026 Sass are compiled on the fly. Sass files can include any other Sass/CSS files that are in the `load_paths`.\n\nIt's also possible to use Slim filters, for example, to inline Sass, JS or any other [supported templates](http://rdoc.info/gems/slim/file/README.md#Embedded_engines__Markdown______).\n\nExemplars are included on page by using a special helper, see example (Slim):\n\n**Include external file**\n```slim\n= exemplar_for 'form/input', title: 'Text input'\n```\n\n**Include inline in a block***\n```slim\n= exemplar \\\n  title: 'Radio buttons' do\n  erb:\n    \u003cp\u003e\n      \u003cinput type=\"radio\" name=\"vote\" id=\"agree\"\u003e\n      \u003clabel for=\"agree\"\u003eAgree\u003c/label\u003e\n    \u003c/p\u003e\n    \u003cp\u003e\n      \u003cinput type=\"radio\" name=\"vote\" id=\"disagree\"\u003e\n      \u003clabel for=\"disagree\"\u003eDisagree\u003c/label\u003e\n    \u003c/p\u003e\n```\n\nExemplars also come with a way to configure modifier classes on components.\n\n```slim\n= exemplar title: 'Default button' do\n  button(class=\"btn\" modifiers=\"[larger:__larger, large:__large, medium:__medium, small:__small]\") Submit\n```\n\nIn ERB it looks like this:\n\n```erb\n\u003c%= exemplar title: 'Default button' do %\u003e\n  \u003cbutton class=\"btn\" modifiers=\"[larger:__larger, large:__large, medium:__medium, small:__small]\"\u003eSubmit\u003c/button\u003e\n\u003c% end %\u003e\n```\nIn this example the `\u003cbutton\u003e` element has modifiers classes: `__larger`, `__large`, `__medium` and `__small`. By specifying them in the attribute `modifiers` they will be automaticall parsed and the menu will be attached to the component's exemplar, allowing to toggle those classes.\n\nThe `modifiers` attributes has a simple syntax which allows to group some of the items together, untoggling other items in group as new items are selected. Normal (ungrouped) behaviour allows toggling multiple buttons.\n\n```erb\n\u003cbutton class=\"btn\" modifiers=\"dark:__dark, [larger:__larger, large:__large, medium:__medium, small:__small]\"\u003eSubmit\u003c/button\u003e\n```\n\nThis will create one group of buttons which controls the size and another button that controls its colour.\n\nThere is a `name:value` syntax. For example, `special version of a component:special` will have the text label on the button and toggle `special` class name.\n\nSee [more examples](http://tyom.github.io/paragon/exemplars/).\n\n![](https://ga-beacon.appspot.com/UA-332655-4/paragon/readme?pixel)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyom%2Fparagon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyom%2Fparagon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyom%2Fparagon/lists"}