├── .gitignore
├── LICENSE
├── README.adoc
├── browserChrome.html
├── dev-server.js
├── examples
├── doodle.html
├── doodle.jpg
├── kitter.html
└── kitter.jpg
├── fonts.js
├── make-screenshot
├── make-screenshot.js
└── make-screenshot.sh
├── package.json
├── shireframe-config.js
├── shireframe-r.js
├── shireframe.css
└── shireframe.js
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | node_modules
3 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | GNU GENERAL PUBLIC LICENSE
2 | Version 2, June 1991
3 |
4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
6 | Everyone is permitted to copy and distribute verbatim copies
7 | of this license document, but changing it is not allowed.
8 |
9 | Preamble
10 |
11 | The licenses for most software are designed to take away your
12 | freedom to share and change it. By contrast, the GNU General Public
13 | License is intended to guarantee your freedom to share and change free
14 | software--to make sure the software is free for all its users. This
15 | General Public License applies to most of the Free Software
16 | Foundation's software and to any other program whose authors commit to
17 | using it. (Some other Free Software Foundation software is covered by
18 | the GNU Lesser General Public License instead.) You can apply it to
19 | your programs, too.
20 |
21 | When we speak of free software, we are referring to freedom, not
22 | price. Our General Public Licenses are designed to make sure that you
23 | have the freedom to distribute copies of free software (and charge for
24 | this service if you wish), that you receive source code or can get it
25 | if you want it, that you can change the software or use pieces of it
26 | in new free programs; and that you know you can do these things.
27 |
28 | To protect your rights, we need to make restrictions that forbid
29 | anyone to deny you these rights or to ask you to surrender the rights.
30 | These restrictions translate to certain responsibilities for you if you
31 | distribute copies of the software, or if you modify it.
32 |
33 | For example, if you distribute copies of such a program, whether
34 | gratis or for a fee, you must give the recipients all the rights that
35 | you have. You must make sure that they, too, receive or can get the
36 | source code. And you must show them these terms so they know their
37 | rights.
38 |
39 | We protect your rights with two steps: (1) copyright the software, and
40 | (2) offer you this license which gives you legal permission to copy,
41 | distribute and/or modify the software.
42 |
43 | Also, for each author's protection and ours, we want to make certain
44 | that everyone understands that there is no warranty for this free
45 | software. If the software is modified by someone else and passed on, we
46 | want its recipients to know that what they have is not the original, so
47 | that any problems introduced by others will not reflect on the original
48 | authors' reputations.
49 |
50 | Finally, any free program is threatened constantly by software
51 | patents. We wish to avoid the danger that redistributors of a free
52 | program will individually obtain patent licenses, in effect making the
53 | program proprietary. To prevent this, we have made it clear that any
54 | patent must be licensed for everyone's free use or not licensed at all.
55 |
56 | The precise terms and conditions for copying, distribution and
57 | modification follow.
58 |
59 | GNU GENERAL PUBLIC LICENSE
60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
61 |
62 | 0. This License applies to any program or other work which contains
63 | a notice placed by the copyright holder saying it may be distributed
64 | under the terms of this General Public License. The "Program", below,
65 | refers to any such program or work, and a "work based on the Program"
66 | means either the Program or any derivative work under copyright law:
67 | that is to say, a work containing the Program or a portion of it,
68 | either verbatim or with modifications and/or translated into another
69 | language. (Hereinafter, translation is included without limitation in
70 | the term "modification".) Each licensee is addressed as "you".
71 |
72 | Activities other than copying, distribution and modification are not
73 | covered by this License; they are outside its scope. The act of
74 | running the Program is not restricted, and the output from the Program
75 | is covered only if its contents constitute a work based on the
76 | Program (independent of having been made by running the Program).
77 | Whether that is true depends on what the Program does.
78 |
79 | 1. You may copy and distribute verbatim copies of the Program's
80 | source code as you receive it, in any medium, provided that you
81 | conspicuously and appropriately publish on each copy an appropriate
82 | copyright notice and disclaimer of warranty; keep intact all the
83 | notices that refer to this License and to the absence of any warranty;
84 | and give any other recipients of the Program a copy of this License
85 | along with the Program.
86 |
87 | You may charge a fee for the physical act of transferring a copy, and
88 | you may at your option offer warranty protection in exchange for a fee.
89 |
90 | 2. You may modify your copy or copies of the Program or any portion
91 | of it, thus forming a work based on the Program, and copy and
92 | distribute such modifications or work under the terms of Section 1
93 | above, provided that you also meet all of these conditions:
94 |
95 | a) You must cause the modified files to carry prominent notices
96 | stating that you changed the files and the date of any change.
97 |
98 | b) You must cause any work that you distribute or publish, that in
99 | whole or in part contains or is derived from the Program or any
100 | part thereof, to be licensed as a whole at no charge to all third
101 | parties under the terms of this License.
102 |
103 | c) If the modified program normally reads commands interactively
104 | when run, you must cause it, when started running for such
105 | interactive use in the most ordinary way, to print or display an
106 | announcement including an appropriate copyright notice and a
107 | notice that there is no warranty (or else, saying that you provide
108 | a warranty) and that users may redistribute the program under
109 | these conditions, and telling the user how to view a copy of this
110 | License. (Exception: if the Program itself is interactive but
111 | does not normally print such an announcement, your work based on
112 | the Program is not required to print an announcement.)
113 |
114 | These requirements apply to the modified work as a whole. If
115 | identifiable sections of that work are not derived from the Program,
116 | and can be reasonably considered independent and separate works in
117 | themselves, then this License, and its terms, do not apply to those
118 | sections when you distribute them as separate works. But when you
119 | distribute the same sections as part of a whole which is a work based
120 | on the Program, the distribution of the whole must be on the terms of
121 | this License, whose permissions for other licensees extend to the
122 | entire whole, and thus to each and every part regardless of who wrote it.
123 |
124 | Thus, it is not the intent of this section to claim rights or contest
125 | your rights to work written entirely by you; rather, the intent is to
126 | exercise the right to control the distribution of derivative or
127 | collective works based on the Program.
128 |
129 | In addition, mere aggregation of another work not based on the Program
130 | with the Program (or with a work based on the Program) on a volume of
131 | a storage or distribution medium does not bring the other work under
132 | the scope of this License.
133 |
134 | 3. You may copy and distribute the Program (or a work based on it,
135 | under Section 2) in object code or executable form under the terms of
136 | Sections 1 and 2 above provided that you also do one of the following:
137 |
138 | a) Accompany it with the complete corresponding machine-readable
139 | source code, which must be distributed under the terms of Sections
140 | 1 and 2 above on a medium customarily used for software interchange; or,
141 |
142 | b) Accompany it with a written offer, valid for at least three
143 | years, to give any third party, for a charge no more than your
144 | cost of physically performing source distribution, a complete
145 | machine-readable copy of the corresponding source code, to be
146 | distributed under the terms of Sections 1 and 2 above on a medium
147 | customarily used for software interchange; or,
148 |
149 | c) Accompany it with the information you received as to the offer
150 | to distribute corresponding source code. (This alternative is
151 | allowed only for noncommercial distribution and only if you
152 | received the program in object code or executable form with such
153 | an offer, in accord with Subsection b above.)
154 |
155 | The source code for a work means the preferred form of the work for
156 | making modifications to it. For an executable work, complete source
157 | code means all the source code for all modules it contains, plus any
158 | associated interface definition files, plus the scripts used to
159 | control compilation and installation of the executable. However, as a
160 | special exception, the source code distributed need not include
161 | anything that is normally distributed (in either source or binary
162 | form) with the major components (compiler, kernel, and so on) of the
163 | operating system on which the executable runs, unless that component
164 | itself accompanies the executable.
165 |
166 | If distribution of executable or object code is made by offering
167 | access to copy from a designated place, then offering equivalent
168 | access to copy the source code from the same place counts as
169 | distribution of the source code, even though third parties are not
170 | compelled to copy the source along with the object code.
171 |
172 | 4. You may not copy, modify, sublicense, or distribute the Program
173 | except as expressly provided under this License. Any attempt
174 | otherwise to copy, modify, sublicense or distribute the Program is
175 | void, and will automatically terminate your rights under this License.
176 | However, parties who have received copies, or rights, from you under
177 | this License will not have their licenses terminated so long as such
178 | parties remain in full compliance.
179 |
180 | 5. You are not required to accept this License, since you have not
181 | signed it. However, nothing else grants you permission to modify or
182 | distribute the Program or its derivative works. These actions are
183 | prohibited by law if you do not accept this License. Therefore, by
184 | modifying or distributing the Program (or any work based on the
185 | Program), you indicate your acceptance of this License to do so, and
186 | all its terms and conditions for copying, distributing or modifying
187 | the Program or works based on it.
188 |
189 | 6. Each time you redistribute the Program (or any work based on the
190 | Program), the recipient automatically receives a license from the
191 | original licensor to copy, distribute or modify the Program subject to
192 | these terms and conditions. You may not impose any further
193 | restrictions on the recipients' exercise of the rights granted herein.
194 | You are not responsible for enforcing compliance by third parties to
195 | this License.
196 |
197 | 7. If, as a consequence of a court judgment or allegation of patent
198 | infringement or for any other reason (not limited to patent issues),
199 | conditions are imposed on you (whether by court order, agreement or
200 | otherwise) that contradict the conditions of this License, they do not
201 | excuse you from the conditions of this License. If you cannot
202 | distribute so as to satisfy simultaneously your obligations under this
203 | License and any other pertinent obligations, then as a consequence you
204 | may not distribute the Program at all. For example, if a patent
205 | license would not permit royalty-free redistribution of the Program by
206 | all those who receive copies directly or indirectly through you, then
207 | the only way you could satisfy both it and this License would be to
208 | refrain entirely from distribution of the Program.
209 |
210 | If any portion of this section is held invalid or unenforceable under
211 | any particular circumstance, the balance of the section is intended to
212 | apply and the section as a whole is intended to apply in other
213 | circumstances.
214 |
215 | It is not the purpose of this section to induce you to infringe any
216 | patents or other property right claims or to contest validity of any
217 | such claims; this section has the sole purpose of protecting the
218 | integrity of the free software distribution system, which is
219 | implemented by public license practices. Many people have made
220 | generous contributions to the wide range of software distributed
221 | through that system in reliance on consistent application of that
222 | system; it is up to the author/donor to decide if he or she is willing
223 | to distribute software through any other system and a licensee cannot
224 | impose that choice.
225 |
226 | This section is intended to make thoroughly clear what is believed to
227 | be a consequence of the rest of this License.
228 |
229 | 8. If the distribution and/or use of the Program is restricted in
230 | certain countries either by patents or by copyrighted interfaces, the
231 | original copyright holder who places the Program under this License
232 | may add an explicit geographical distribution limitation excluding
233 | those countries, so that distribution is permitted only in or among
234 | countries not thus excluded. In such case, this License incorporates
235 | the limitation as if written in the body of this License.
236 |
237 | 9. The Free Software Foundation may publish revised and/or new versions
238 | of the General Public License from time to time. Such new versions will
239 | be similar in spirit to the present version, but may differ in detail to
240 | address new problems or concerns.
241 |
242 | Each version is given a distinguishing version number. If the Program
243 | specifies a version number of this License which applies to it and "any
244 | later version", you have the option of following the terms and conditions
245 | either of that version or of any later version published by the Free
246 | Software Foundation. If the Program does not specify a version number of
247 | this License, you may choose any version ever published by the Free Software
248 | Foundation.
249 |
250 | 10. If you wish to incorporate parts of the Program into other free
251 | programs whose distribution conditions are different, write to the author
252 | to ask for permission. For software which is copyrighted by the Free
253 | Software Foundation, write to the Free Software Foundation; we sometimes
254 | make exceptions for this. Our decision will be guided by the two goals
255 | of preserving the free status of all derivatives of our free software and
256 | of promoting the sharing and reuse of software generally.
257 |
258 | NO WARRANTY
259 |
260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
268 | REPAIR OR CORRECTION.
269 |
270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
278 | POSSIBILITY OF SUCH DAMAGES.
279 |
280 | END OF TERMS AND CONDITIONS
281 |
282 | How to Apply These Terms to Your New Programs
283 |
284 | If you develop a new program, and you want it to be of the greatest
285 | possible use to the public, the best way to achieve this is to make it
286 | free software which everyone can redistribute and change under these terms.
287 |
288 | To do so, attach the following notices to the program. It is safest
289 | to attach them to the start of each source file to most effectively
290 | convey the exclusion of warranty; and each file should have at least
291 | the "copyright" line and a pointer to where the full notice is found.
292 |
293 | {description}
294 | Copyright (C) {year} {fullname}
295 |
296 | This program is free software; you can redistribute it and/or modify
297 | it under the terms of the GNU General Public License as published by
298 | the Free Software Foundation; either version 2 of the License, or
299 | (at your option) any later version.
300 |
301 | This program is distributed in the hope that it will be useful,
302 | but WITHOUT ANY WARRANTY; without even the implied warranty of
303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
304 | GNU General Public License for more details.
305 |
306 | You should have received a copy of the GNU General Public License along
307 | with this program; if not, write to the Free Software Foundation, Inc.,
308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
309 |
310 | Also add information on how to contact you by electronic and paper mail.
311 |
312 | If the program is interactive, make it output a short notice like this
313 | when it starts in an interactive mode:
314 |
315 | Gnomovision version 69, Copyright (C) year name of author
316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
317 | This is free software, and you are welcome to redistribute it
318 | under certain conditions; type `show c' for details.
319 |
320 | The hypothetical commands `show w' and `show c' should show the appropriate
321 | parts of the General Public License. Of course, the commands you use may
322 | be called something other than `show w' and `show c'; they could even be
323 | mouse-clicks or menu items--whatever suits your program.
324 |
325 | You should also get your employer (if you work as a programmer) or your
326 | school, if any, to sign a "copyright disclaimer" for the program, if
327 | necessary. Here is a sample; alter the names:
328 |
329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program
330 | `Gnomovision' (which makes passes at compilers) written by James Hacker.
331 |
332 | {signature of Ty Coon}, 1 April 1989
333 | Ty Coon, President of Vice
334 |
335 | This General Public License does not permit incorporating your program into
336 | proprietary programs. If your program is a subroutine library, you may
337 | consider it more useful to permit linking proprietary applications with the
338 | library. If this is what you want to do, use the GNU Lesser General
339 | Public License instead of this License.
340 |
341 |
--------------------------------------------------------------------------------
/README.adoc:
--------------------------------------------------------------------------------
1 | = Shireframe
2 | :toc:
3 | :toc-placement: preamble
4 |
5 | Declarative wireframes for programmers, based on
6 | open web technologies.
7 |
8 | == Motivation
9 |
10 | Sometimes, you need to communicate to other people on what
11 | your software will do and how.
12 | The most efficient way is to create wireframes to show functionality and layouts.
13 | However, if you are a programmer, it is likely that writing code is easier for you
14 | than drawing boxes in an unfamiliar graphics editor.
15 |
16 | *Shireframe* allows you to create wireframes by writing HTML
17 | using your favorite IDE, preview results in your favorite browser,
18 | branch/diff/merge wireframes as code in your favorite VCS
19 | and do anything else you usually do with source code.
20 |
21 | Shireframe includes ready-made styling for sketchy look-and-feel,
22 | a number of reusable components, and bundled great libraries to simplify your life.
23 |
24 | Interactivity support comes _for free_ thanks to web technologies!
25 |
26 | == Example
27 |
28 | image::examples/doodle.jpg[]
29 |
30 | Live demo: http://rawgit.com/tsx/shireframe/master/examples/doodle.html
31 |
32 | Source:
33 |
34 | [source, html]
35 | ----
36 |
37 |
38 |
39 |
40 | Doodle
41 |
42 |
43 |
44 |
72 |
73 |
74 |
75 | ----
76 |
77 | == What's inside?
78 |
79 | Shireframe includes the following libraries:
80 |
81 | * AngularJS drives the HTML and simplifies interactivity,
82 | * jQuery handles DOM manipulation,
83 | * RequireJS loads modules and styles,
84 | * Bootstrap provides solid foundation for layout and a number
85 | of helpful utility classes,
86 | * Lodash is a great utility belt,
87 | * Google font "Kalam" which looks hand-written while supporting
88 | both normal and bold styles (a rare combination),
89 | * and FontAwesome, because it _is_ awesome indeed.
90 |
91 | You can use any features from these libraries, and also include and use any other JavaScript libraries you like.
92 |
93 | == Getting started
94 |
95 | . Create an HTML5 document and include a JS script.
96 | +
97 | [source, html]
98 |
99 |
100 | . And just start including your content into document body.
101 | Make sure to use some bundled goodness described below.
102 |
103 | . Open your HTML5 document in your favorite browser.
104 |
105 | . Profit!
106 |
107 | == More examples
108 |
109 | See the source code in `examples` folder
110 |
111 | Live demo: http://rawgit.com/tsx/shireframe/master/examples/kitter.html
112 |
113 | image::examples/kitter.jpg[]
114 |
115 | == Components
116 |
117 | Most components are actually AngularJS directives or special CSS styles.
118 |
119 | Here's an exhaustive list:
120 |
121 | === Settings
122 |
123 | When including shireframe-r.js, you can add attributes to the `
132 |
133 | === Tags
134 |
135 | NOTE: Make sure all closing elements match their opening counterparts.
136 | Remember that it doesn't work with self-closed tags like
137 | ``.footnote:[https://github.com/angular/angular.js/issues/1953]
138 |
139 | ==== `box`
140 |
141 | A `box` is just a div with a preset black border.
142 | You may use it as fake inputbox or whatever.
143 | Pipe symbol (`|`) may denote a cursor within such an inputbox.
144 |
145 | [source, html]
146 | Hello there!|
147 |
as an attribute
148 |
class is also ok
149 |
150 | ==== `row`, `col-*`, `col-offset-*`
151 |
152 | A `row`, `col-1` ... `col-12` are shorthands for Bootstrap's grid classes
153 | `row` and `col-xs-*`.
154 | It is shorter to read and write than `
`.
155 |
156 | [source, html]
157 |
158 | First column
159 | Second column
160 | Abusing B to make third column bold
161 |
162 |
163 | ==== `fa`, `glyphicon`
164 |
165 | Shorthands for FontAwesome and Glyphicon classes.
166 | They also turn all attributes into prefixed classes.
167 |
168 | [source, html]
169 |
170 |
171 |
172 |
173 | ==== `kitten`
174 |
175 | Inserts a random kitten photo from teh internet.
176 | Each next tag instance will have a different picture,
177 | but they persist across page reloads.
178 | Use it as a placeholder for images or user photos. Fun!
179 |
180 | [source, html]
181 |
182 |
183 |
184 | ==== `browser-chrome`
185 |
186 | Wrap your content in ` ... `
187 | to have a nice fake window border with a title, address bar and nav buttons.
188 | Of course, they are fake and don't react to clicks, but allow you to express
189 | your app environment ("my app works in a web browser").
190 |
191 | [source, html]
192 |
193 | Look, a kitty in my web browser:
194 |
195 |
196 | This has nothing to do with with Google Chrome.
197 | It's just any browser's UI is frequently called
198 | _chrome_.footnote:[http://www.nngroup.com/articles/browser-and-gui-chrome/]
199 |
200 | ==== `text-title`
201 |
202 | Shows the same thing as in your `` or _awesome_ default if there isn't any title.
203 | Used in browser-chrome and potentially many other places.
204 |
205 | [source, html]
206 | <text-title></text-title>
207 | <h1 text-title></h1>
208 |
209 | ==== `text-url`
210 |
211 | Like `text-title`, but transforms it to fake url like `http://awesome.com`.
212 |
213 | [source, html]
214 | <text-url></text-url>
215 | <a text-url></a>
216 |
217 | ==== `angry-comment`, `cheerful-comment`
218 |
219 | Inserts a comment which expresses dissatisfaction or satisfaction.
220 |
221 | [source, html]
222 | <cheerful-comment></cheerful-comment>
223 | <angry-comment></angry-comment>
224 | <p cheerful-comment></p>
225 |
226 | ==== `lorem-ipsum`
227 |
228 | Inserts a widely-known placeholder text of _N_ characters length.
229 |
230 | [source, html]
231 | <p lorem-ipsum="100"></p>
232 | <lorem-ipsum></lorem-ipsum>
233 |
234 | ==== Planned for future
235 |
236 | * [ ] `my-profile-photo` which is the same in every tag instance
237 | * [ ] `random-profile-photo` which is different in every tag instance
238 | * [ ] `random-logo` an abstract shape
239 | * [ ] `login-form` username-password (or email-password) form with a "login" button
240 | * [ ] `template-navbar` a ready navbar will include
241 | random-logo, title, searchbar,
242 | gear button (aka settings), my-profile-photo and a logout button
243 | * [ ] `template-footer` a ready footer will include a made-up
244 | copyright statement and a few made-up links
245 | * [ ] `ipad-chrome` with orientation parameter
246 | * [ ] `ipad-browser-chrome`
247 | * [ ] `iphone-chrome`
248 | * [ ] `iphone-browser-chrome`
249 | * [ ] `android-chrome`
250 | * [ ] `mac-native-app-chrome`
251 | * [ ] `windows-native-app-chrome`
252 | * [ ] `nonsense` random placeholder text that looks like
253 | syntactically correct English but has no meaning
254 | * [ ] `video-player`
255 | * [ ] `audio-player`
256 | * [ ] `random-pie-chart` based on d3.js and c3.js
257 | * [ ] `random-bar-chart`
258 | * [ ] `random-line-chart`
259 |
260 | and more... Contributions welcome!
261 |
262 | === CSS classes
263 |
264 | With one-time wireframes that will be thrown out soon,
265 | it is likely that you won't care about separating
266 | and reusing future-proof CSS rules.
267 | Instead, inline styles are the way to go.
268 |
269 | That's why I provide a number of helper
270 | classes for you to use along with Bootstrap's tools to perform common tasks.
271 |
272 | ==== `h*, .h*`
273 |
274 | Overrides Bootstrap's font-weight to 600
275 | which is supported by bundled handwriting font.
276 |
277 | ==== `vertical-margin`
278 |
279 | Adds 1em vertical space to the top and bottom of your element.
280 |
281 | [source, html]
282 | <row class="vertical-margin"></row>
283 |
284 | ==== `overflow-auto`
285 |
286 | An alias for `style="overflow: auto"`
287 |
288 | ==== `width-100`
289 |
290 | An alias for `style="width: 100%"`
291 |
292 | ==== `display-block`
293 |
294 | An alias for `style="display: block"`
295 |
296 | ==== `display-inline-block`
297 |
298 | An alias for `style="display: inline-block"`
299 |
300 | == Interactivity
301 |
302 | In the simplest form, you could create several `*.html` files,
303 | and link them together using `<a href="...">` links.
304 | You probably know that already :-)
305 |
306 | Another possibility is to use AngularJS directives
307 | that add behavior like `ng-click`.
308 | Refer to AngularJS docs for more info.
309 |
310 | Just remember that your wireframe is an ordinary HTML page
311 | and you can do anything you want with the page.
312 |
313 | == Data-driven
314 |
315 | TODO
316 |
317 | == Create your own reusable components / API
318 |
319 | You can refactor your templates to reusable components.
320 | Extract bits and pieces into separate html files and register
321 | them using `partials` attribute on shireframe `script` tag.
322 |
323 | [source, html]
324 | wireframe.html:
325 | <script src="http://rawgit.com/tsx/shireframe/master/shireframe-r.js" partials="my-partial another-partial"></script>
326 | <my-partial></my-partial>
327 | <another-partial>My content</another-partial>
328 |
329 | [source, html]
330 | my-partial.html:
331 | <b>Hey, I'm partial!</b>
332 |
333 |
334 | [source, html]
335 | another-partial.html:
336 | <i>Here's your content: <ng-transclude></ng-transclude></i>
337 |
338 | == Including other scripts & code
339 |
340 | TODO
341 |
342 | == Browser support
343 |
344 | Shireframe uses cutting-edge web technologies,
345 | so only evergreen browsers are supported.
346 | Safari, Chrome, Firefox are ok.
347 | Sorry, IE users.
348 |
349 | Also, SVG filter which is used to distort wireframe for "sketchy" look
350 | is completely broken on iOS,
351 | so you have to opt-out of filtering
352 | or use pre-rendered images to show wireframes on iPads and iPhones.
353 |
354 | == Render to PNG
355 |
356 | There's a script included in make-screenshot
357 | directory which will render a hi-res version of your wireframe.
358 |
359 | [source, shell]
360 | shireframe/make-screenshot/make-screenshot.sh http://wherever.your/wireframe/is.html render.jpg
361 |
362 | To make it work, you have to install PhantomJS 2.0
363 | (1.x branch won't work) and ImageMagick.footnote:[
364 | PhantomJS seems to ignore SVG filters,
365 | so ImageMagick is used instead to achieve the same effect]
366 |
367 | On Mac OS X with MacPorts, the following commands
368 | will bring in everything you need.
369 |
370 | [source]
371 | sudo port install phantomjs
372 | sudo port install ImageMagick
373 |
374 | == License
375 |
376 | This project is licensed under the terms of GNU GPLv2 (GNU General Public License version 2) or later.
377 |
378 | Shireframe is distributed in the hope that it will be useful,
379 | but WITHOUT ANY WARRANTY; without even the impliged warranty of
380 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
381 | GNU General Public License for more details.
382 |
383 | == Contributing
384 |
385 | Fork, hack, push and pull-request. Contributions welcome!
386 |
387 | Also, please help spreading the word and freeing your fellow
388 | colleague programmers from having to struggle with
389 | mouse-driven graphics editors.
390 |
391 | == Why the name?
392 |
393 | **W** in **w**ireframe looks like Cyrillic **Ш** (sh).
394 | That's it.
395 |
396 | == Author
397 |
398 | Vyacheslav Tverskoy <tsx@tsx.su>
399 |
400 | If you have any questions, feedback or just want to say thanks,
401 | ping me at Twitter http://twitter.com/tsxxst[@tsxxst]
402 |
--------------------------------------------------------------------------------
/browserChrome.html:
--------------------------------------------------------------------------------
1 | <div class="browser-chrome-container">
2 | <div class="browser-chrome-window">
3 | <div class="clearfix browser-chrome-bar">
4 | <div class="text-center text-title"></div>
5 | <div class="browser-chrome-toolbar">
6 | <glyphicon arrow-left></glyphicon>
7 | <glyphicon arrow-right></glyphicon>
8 | <glyphicon home></glyphicon>
9 | <box class="text-url"></box>
10 | </div>
11 | </div>
12 | <ng-transclude class="display-block browser-chrome-content overflow-auto"></ng-transclude>
13 | </div>
14 | </div>
15 |
--------------------------------------------------------------------------------
/dev-server.js:
--------------------------------------------------------------------------------
1 | var express = require('express');
2 | var cors = require('cors');
3 |
4 | var server = express();
5 |
6 | server.use(cors());
7 |
8 | server.use(express.static('.'));
9 |
10 | server.listen(+process.env.PORT || 8888);
11 |
12 | livereload = require('livereload');
13 | server = livereload.createServer();
14 | server.watch(__dirname);
15 |
--------------------------------------------------------------------------------
/examples/doodle.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html>
2 | <html>
3 | <head>
4 | <script src="http://rawgit.com/tsx/shireframe/master/shireframe-r.js"></script>
5 | <title>Doodle
6 |
7 |
8 |
9 |