{"id":13554561,"url":"https://github.com/tsx/shireframe","last_synced_at":"2025-04-04T09:08:16.014Z","repository":{"id":29245214,"uuid":"32777471","full_name":"tsx/shireframe","owner":"tsx","description":"Declarative wireframes for programmers, based on web technologies. Pull requests are welcome!","archived":false,"fork":false,"pushed_at":"2015-12-11T09:06:21.000Z","size":408,"stargazers_count":1085,"open_issues_count":0,"forks_count":52,"subscribers_count":47,"default_branch":"master","last_synced_at":"2024-04-14T01:11:06.940Z","etag":null,"topics":["design-tools","markup","mockup","new","sketching","ui-design","wireframe","wireframing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tsx.png","metadata":{"files":{"readme":"README.adoc","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":"2015-03-24T05:11:48.000Z","updated_at":"2024-04-10T04:25:30.000Z","dependencies_parsed_at":"2022-08-07T14:15:46.883Z","dependency_job_id":null,"html_url":"https://github.com/tsx/shireframe","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/tsx%2Fshireframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsx%2Fshireframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsx%2Fshireframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsx%2Fshireframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsx","download_url":"https://codeload.github.com/tsx/shireframe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149501,"owners_count":20891954,"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":["design-tools","markup","mockup","new","sketching","ui-design","wireframe","wireframing"],"created_at":"2024-08-01T12:02:50.466Z","updated_at":"2025-04-04T09:08:15.993Z","avatar_url":"https://github.com/tsx.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","others"],"sub_categories":[],"readme":"= Shireframe\n:toc:\n:toc-placement: preamble\n\nDeclarative wireframes for programmers, based on\nopen web technologies.\n\n== Motivation\n\nSometimes, you need to communicate to other people on what\nyour software will do and how.\nThe most efficient way is to create wireframes to show functionality and layouts.\nHowever, if you are a programmer, it is likely that writing code is easier for you\nthan drawing boxes in an unfamiliar graphics editor.\n\n*Shireframe* allows you to create wireframes by writing HTML\nusing your favorite IDE, preview results in your favorite browser,\nbranch/diff/merge wireframes as code in your favorite VCS\nand do anything else you usually do with source code.\n\nShireframe includes ready-made styling for sketchy look-and-feel,\na number of reusable components, and bundled great libraries to simplify your life.\n\nInteractivity support comes _for free_ thanks to web technologies!\n\n== Example\n\nimage::examples/doodle.jpg[]\n\nLive demo: http://rawgit.com/tsx/shireframe/master/examples/doodle.html\n\nSource:\n\n[source, html]\n----\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003cscript src=\"http://rawgit.com/tsx/shireframe/master/shireframe-r.js\"\u003e\u003c/script\u003e\n\t\t\u003ctitle\u003eDoodle\u003c/title\u003e\n\t\u003c/head\u003e\n\t\u003cbody\u003e\n\t\t\u003cbrowser-chrome\u003e\n\t\t\t\u003cdiv class=\"container-fluid\"\u003e\n\t\t\t\t\u003cdiv class=\"text-right vertical-margin\"\u003e\n\t\t\t\t\t\u003ca\u003e~Me\u003c/a\u003e\n\t\t\t\t\t\u003ca\u003eMail\u003c/a\u003e\n\t\t\t\t\t\u003ca\u003ePictures\u003c/a\u003e\n\t\t\t\t\t\u003cglyphicon th\u003e\u003c/glyphicon\u003e\n\t\t\t\t\t\u003cglyphicon user\u003e\u003c/glyphicon\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\t\u003cdiv class=\"vertical-margin\"\u003e\n\t\t\t\t\t\u003crow\u003e\n\t\t\t\t\t\t\u003ccol-6 col-offset-3\u003e\n\t\t\t\t\t\t\t\u003ch1 class=\"text-title text-center\"\u003e\u003c/h1\u003e\n\t\t\t\t\t\t\t\u003cbox class=\"width-100 vertical-margin\"\u003e|\u003c/box\u003e\n\t\t\t\t\t\t\u003c/col-6\u003e\n\t\t\t\t\t\u003c/row\u003e\n\t\t\t\t\t\u003crow\u003e\n\t\t\t\t\t\t\u003ccol-3 col-offset-3\u003e\n\t\t\t\t\t\t\t\u003cbutton class=\"btn btn-default width-100\"\u003eDoodle search\u003c/button\u003e\n\t\t\t\t\t\t\u003c/col-3\u003e\n\t\t\t\t\t\t\u003ccol-3\u003e\n\t\t\t\t\t\t\t\u003cbutton class=\"btn btn-default width-100\"\u003eI'm feeling doodley\u003c/button\u003e\n\t\t\t\t\t\t\u003c/col-3\u003e\n\t\t\t\t\t\u003c/row\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t\t\u003cfooter class=\"vertical-margin\"\u003e\n\t\t\t\t\t\u0026copy; \u003ctext-url\u003e\u003c/text-url\u003e 2015\n\t\t\t\t\u003c/footer\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/browser-chrome\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n----\n\n== What's inside?\n\nShireframe includes the following libraries:\n\n* AngularJS drives the HTML and simplifies interactivity,\n* jQuery handles DOM manipulation,\n* RequireJS loads modules and styles,\n* Bootstrap provides solid foundation for layout and a number\nof helpful utility classes,\n* Lodash is a great utility belt,\n* Google font \"Kalam\" which looks hand-written while supporting\nboth normal and bold styles (a rare combination),\n* and FontAwesome, because it _is_ awesome indeed.\n\nYou can use any features from these libraries, and also include and use any other JavaScript libraries you like.\n\n== Getting started\n\n. Create an HTML5 document and include a JS script.\n+\n[source, html]\n\u003cscript src=\"https://rawgit.com/tsx/shireframe/master/shireframe-r.js\"\u003e\u003c/script\u003e\n\n. And just start including your content into document body.\n  Make sure to use some bundled goodness described below.\n\n. Open your HTML5 document in your favorite browser.\n\n. Profit!\n\n== More examples\n\nSee the source code in `examples` folder\n\nLive demo: http://rawgit.com/tsx/shireframe/master/examples/kitter.html\n\nimage::examples/kitter.jpg[]\n\n== Components\n\nMost components are actually AngularJS directives or special CSS styles.\n\nHere's an exhaustive list:\n\n=== Settings\n\nWhen including shireframe-r.js, you can add attributes to the `\u003cscript\u003e` tag to modify behaviour. Available options are:\n\n* `no-sketchy-filter` removes line \"waviness\"\n* more to come...\n\nExample:\n\n[source, html]\n\u003cscript src=\"http://rawgit.com/tsx/shireframe/master/shireframe-r.js\" no-sketchy-filter\u003e\u003c/script\u003e\n\n=== Tags\n\nNOTE: Make sure all closing elements match their opening counterparts.\nRemember that it doesn't work with self-closed tags like\n`\u003cthis /\u003e`.footnote:[https://github.com/angular/angular.js/issues/1953]\n\n==== `box`\n\nA `box` is just a div with a preset black border.\nYou may use it as fake inputbox or whatever.\nPipe symbol (`|`) may denote a cursor within such an inputbox.\n\n[source, html]\n\u003cbox\u003eHello there!|\u003c/box\u003e\n\u003cdiv box\u003eas an attribute\u003c/div\u003e\n\u003cdiv class=\"box\"\u003eclass is also ok\u003c/div\u003e\n\n==== `row`, `col-*`, `col-offset-*`\n\nA `row`, `col-1` ... `col-12` are shorthands for Bootstrap's grid classes\n`row` and `col-xs-*`.\nIt is shorter to read and write than `\u003cdiv class=\"col-xs-1 col-xs-offset-1\"\u003e`.\n\n[source, html]\n\u003crow\u003e\n\t\u003ccol-3 col-offset-1\u003eFirst column\u003c/col-3\u003e\n\t\u003ccol-3\u003eSecond column\u003c/col-3\u003e\n\t\u003cb col-3\u003eAbusing B to make third column bold\u003c/b\u003e\n\u003c/row\u003e\n\n==== `fa`, `glyphicon`\n\nShorthands for FontAwesome and Glyphicon classes.\nThey also turn all attributes into prefixed classes.\n\n[source, html]\n\u003cfa star\u003e\u003c/fa\u003e\n\u003cfa gear fw 5x spin\u003e\u003c/fa\u003e\n\u003cglyphicon user\u003e\u003c/glyphicon\u003e\n\n==== `kitten`\n\nInserts a random kitten photo from teh internet.\nEach next tag instance will have a different picture,\nbut they persist across page reloads.\nUse it as a placeholder for images or user photos. Fun!\n\n[source, html]\n\u003ckitten\u003e\u003c/kitten\u003e\n\u003ckitten size=\"5em\"\u003e\u003c/kitten\u003e\n\n==== `browser-chrome`\n\nWrap your content in `\u003cbrowser-chrome\u003e ... \u003c/browser-chrome\u003e`\nto have a nice fake window border with a title, address bar and nav buttons.\nOf course, they are fake and don't react to clicks, but allow you to express\nyour app environment (\"my app works in a web browser\").\n\n[source, html]\n\u003cbrowser-chrome\u003e\n\tLook, a kitty in my web browser: \u003ckitten\u003e\u003c/kitten\u003e\n\u003c/browser-chrome\u003e\n\nThis has nothing to do with with Google Chrome.\nIt's just any browser's UI is frequently called\n_chrome_.footnote:[http://www.nngroup.com/articles/browser-and-gui-chrome/]\n\n==== `text-title`\n\nShows the same thing as in your `\u003ctitle\u003e` or _awesome_ default if there isn't any title.\nUsed in browser-chrome and potentially many other places.\n\n[source, html]\n\u003ctext-title\u003e\u003c/text-title\u003e\n\u003ch1 text-title\u003e\u003c/h1\u003e\n\n==== `text-url`\n\nLike `text-title`, but transforms it to fake url like `http://awesome.com`.\n\n[source, html]\n\u003ctext-url\u003e\u003c/text-url\u003e\n\u003ca text-url\u003e\u003c/a\u003e\n\n==== `angry-comment`, `cheerful-comment`\n\nInserts a comment which expresses dissatisfaction or satisfaction.\n\n[source, html]\n\u003ccheerful-comment\u003e\u003c/cheerful-comment\u003e\n\u003cangry-comment\u003e\u003c/angry-comment\u003e\n\u003cp cheerful-comment\u003e\u003c/p\u003e\n\n==== `lorem-ipsum`\n\nInserts a widely-known placeholder text of _N_ characters length.\n\n[source, html]\n\u003cp lorem-ipsum=\"100\"\u003e\u003c/p\u003e\n\u003clorem-ipsum\u003e\u003c/lorem-ipsum\u003e\n\n==== Planned for future\n\n* [ ] `my-profile-photo` which is the same in every tag instance\n* [ ] `random-profile-photo` which is different in every tag instance\n* [ ] `random-logo` an abstract shape\n* [ ] `login-form` username-password (or email-password) form with a \"login\" button\n* [ ] `template-navbar` a ready navbar will include\nrandom-logo, title, searchbar,\ngear button (aka settings), my-profile-photo and a logout button\n* [ ] `template-footer` a ready footer will include a made-up\ncopyright statement and a few made-up links\n* [ ] `ipad-chrome` with orientation parameter\n* [ ] `ipad-browser-chrome`\n* [ ] `iphone-chrome`\n* [ ] `iphone-browser-chrome`\n* [ ] `android-chrome`\n* [ ] `mac-native-app-chrome`\n* [ ] `windows-native-app-chrome`\n* [ ] `nonsense` random placeholder text that looks like\nsyntactically correct English but has no meaning\n* [ ] `video-player`\n* [ ] `audio-player`\n* [ ] `random-pie-chart` based on d3.js and c3.js\n* [ ] `random-bar-chart`\n* [ ] `random-line-chart`\n\nand more... Contributions welcome!\n\n=== CSS classes\n\nWith one-time wireframes that will be thrown out soon,\nit is likely that you won't care about separating\nand reusing future-proof CSS rules.\nInstead, inline styles are the way to go.\n\nThat's why I provide a number of helper\nclasses for you to use along with Bootstrap's tools to perform common tasks.\n\n==== `h*, .h*`\n\nOverrides Bootstrap's font-weight to 600\nwhich is supported by bundled handwriting font.\n\n==== `vertical-margin`\n\nAdds 1em vertical space to the top and bottom of your element.\n\n[source, html]\n\u003crow class=\"vertical-margin\"\u003e\u003c/row\u003e\n\n==== `overflow-auto`\n\nAn alias for `style=\"overflow: auto\"`\n\n==== `width-100`\n\nAn alias for `style=\"width: 100%\"`\n\n==== `display-block`\n\nAn alias for `style=\"display: block\"`\n\n==== `display-inline-block`\n\nAn alias for `style=\"display: inline-block\"`\n\n== Interactivity\n\nIn the simplest form, you could create several `*.html` files,\nand link them together using `\u003ca href=\"...\"\u003e` links.\nYou probably know that already :-)\n\nAnother possibility is to use AngularJS directives\nthat add behavior like `ng-click`.\nRefer to AngularJS docs for more info.\n\nJust remember that your wireframe is an ordinary HTML page\nand you can do anything you want with the page.\n\n== Data-driven\n\nTODO\n\n== Create your own reusable components / API\n\nYou can refactor your templates to reusable components.\nExtract bits and pieces into separate html files and register\nthem using `partials` attribute on shireframe `script` tag.\n\n[source, html]\nwireframe.html:\n\u003cscript src=\"http://rawgit.com/tsx/shireframe/master/shireframe-r.js\" partials=\"my-partial another-partial\"\u003e\u003c/script\u003e\n\u003cmy-partial\u003e\u003c/my-partial\u003e\n\u003canother-partial\u003eMy content\u003c/another-partial\u003e\n\n[source, html]\nmy-partial.html:\n\u003cb\u003eHey, I'm partial!\u003c/b\u003e\n\n\n[source, html]\nanother-partial.html:\n\u003ci\u003eHere's your content: \u003cng-transclude\u003e\u003c/ng-transclude\u003e\u003c/i\u003e\n\n== Including other scripts \u0026 code\n\nTODO\n\n== Browser support\n\nShireframe uses cutting-edge web technologies,\nso only evergreen browsers are supported.\nSafari, Chrome, Firefox are ok.\nSorry, IE users.\n\nAlso, SVG filter which is used to distort wireframe for \"sketchy\" look\nis completely broken on iOS,\nso you have to opt-out of filtering\nor use pre-rendered images to show wireframes on iPads and iPhones.\n\n== Render to PNG\n\nThere's a script included in make-screenshot\ndirectory which will render a hi-res version of your wireframe.\n\n[source, shell]\nshireframe/make-screenshot/make-screenshot.sh http://wherever.your/wireframe/is.html render.jpg\n\nTo make it work, you have to install PhantomJS 2.0\n(1.x branch won't work) and ImageMagick.footnote:[\nPhantomJS seems to ignore SVG filters,\nso ImageMagick is used instead to achieve the same effect]\n\nOn Mac OS X with MacPorts, the following commands\nwill bring in everything you need.\n\n[source]\nsudo port install phantomjs\nsudo port install ImageMagick\n\n== License\n\nThis project is licensed under the terms of GNU GPLv2 (GNU General Public License version 2) or later.\n\nShireframe is distributed in the hope that it will be useful,\nbut WITHOUT ANY WARRANTY; without even the impliged warranty of\nMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\nGNU General Public License for more details.\n\n== Contributing\n\nFork, hack, push and pull-request. Contributions welcome!\n\nAlso, please help spreading the word and freeing your fellow\ncolleague programmers from having to struggle with\nmouse-driven graphics editors.\n\n== Why the name?\n\n**W** in **w**ireframe looks like Cyrillic **Ш** (sh).\nThat's it.\n\n== Author\n\nVyacheslav Tverskoy \u003ctsx@tsx.su\u003e\n\nIf you have any questions, feedback or just want to say thanks,\nping me at Twitter http://twitter.com/tsxxst[@tsxxst]\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsx%2Fshireframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsx%2Fshireframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsx%2Fshireframe/lists"}