This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Merge pull request #86 from karthikv/master

Add informative content and images to front page.
  • Loading branch information...
Jennifer Fong
Jennifer Fong committed Sep 7, 2012
2 parents 3cd6621 + fcc2848 commit adda6d80d77e7617bb3261d48fdf0faf725f8326
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
View
Binary file not shown.
@@ -18,34 +18,6 @@ require(['jquery', 'lib/bootstrap.min', 'https://browserid.org/include.js'], fun
}
});
});
-
- // add faded overlay on top of sidebar and main content area
- $('<div/>').css({
- position: 'absolute',
- top: 70,
- left: 0,
- // outerWidth/outerHeight = width/height with padding/border
- width: $sidebar.outerWidth(),
- height: $sidebar.outerHeight() - 70,
- backgroundColor: 'rgba(0, 0, 0, 0.4)'
- }).appendTo('body');
-
- $('<div/>').css({
- position: 'absolute',
- top: 0,
- left: $sidebar.outerWidth(),
- // outerWidth/outerHeight = width/height with padding/border
- width: $body.outerWidth() - $sidebar.outerWidth(),
- height: $sidebar.outerHeight(),
- backgroundColor: 'rgba(0, 0, 0, 0.4)'
- }).appendTo('body');
-
- $loginForm.children('a').popover({
- title: 'Ready to prototype?',
- content: 'Sign in with Persona to get started.',
- trigger: 'manual',
- placement: 'bottom'
- }).popover('show');
});
});
@@ -698,6 +698,12 @@ input[type="submit"].btn::-moz-focus-inner {
.icon-inbox {
background-position: -168px -24px;
}
+.icon-eye-open {
+ background-position: -96px -120px;
+}
+.icon-play {
+ background-position: -264px -72px;
+}
.tooltip {
position: absolute;
z-index: 1020;

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -24,6 +24,7 @@ box-sizing()
body, input
font 13px/1.5 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif
+ color #222
body
background-color #eee
@@ -92,6 +93,78 @@ a.btn, a.btn:hover, a.btn:active, a.btn:focus
#index #main, #example #main
min-width 1100px
+#example #main
+ font-size 14px
+ line-height 1.75
+
+#example #content h2
+ border-bottom 1px dotted #bbb
+ margin-bottom 10px
+
+#example [class^="span"]
+ margin-bottom 10px
+
+#example p
+ margin-bottom 15px
+ font-size 14px
+ color #222
+
+#example ol
+ margin-left 40px
+
+#example li
+ margin-bottom 20px
+ font-size 25px
+ color #bbb
+
+#example h3
+ font-size 18px
+ line-height 27px
+ color #222
+
+#example h3 i
+ margin-top 6px
+ margin-left 6px
+
+#example img
+ margin-bottom 30px
+
+#example #sidebar p
+ color #ddd
+
+#example #sidebar p a
+ color lighten(#84a3d6, 20%)
+ border-bottom 1px dotted
+
+#example #sidebar p a:hover
+ border-bottom-style solid
+
+#example iframe
+ position fixed
+ bottom 20px
+
+#example #star
+ left 150px
+
+img#summary-img
+ border-bottom 1px solid #aaa
+ margin 20px 0 30px
+ box-shadow(0 15px 15px -15px #999\, 0 -20px 20px -20px #999)
+
+.features img
+ display block
+ margin 30px auto
+ padding 5px
+ background #ccc
+ border 1px solid #bbb
+ border-radius(5px)
+
+#layout-img
+ margin-top 65px
+
+#export-img
+ margin-top 70px
+
#sidebar
position relative
background url(/images/texture.jpg) repeat
@@ -133,7 +206,7 @@ header a
#star
position absolute
bottom 20px
- left 110px
+ left 105px
#sidebar form
margin 10px 0
View
@@ -6,16 +6,7 @@
| * Continuous task |
======================
-Backbone Refactor
-/ Keyboard shorcuts
-/ Changes when layout additions kick in (public/javascripts/views/element.js)
-/ Comment out navigation form configuration
-/ Templates from text/ejs -> text/template
-/ undelegateEvents to remove view? what about contextualEvents and routeEvents?
-/ Assess wait: true
-
------------------------
-
+- Fix export
- Optimize requests
- Add link on sharing page for visibility
- Sign in button styles on FF
@@ -26,6 +17,16 @@ Backbone Refactor
* Make sure routes contain delete req.session.sharedId if they are not for shared pages
* For all forms on the page, make sure their field ids are by default in the usedIds hash
+Backbone Refactor
+/ Keyboard shorcuts
+/ Changes when layout additions kick in (public/javascripts/views/element.js)
+/ Comment out navigation form configuration
+/ Templates from text/ejs -> text/template
+/ undelegateEvents to remove view? what about contextualEvents and routeEvents?
+/ Assess wait: true
+
+-----------------------
+
/ Change layout object to just row and col
/ Sort projects by ID on client side
/ Add callback to function documentation comments
View
@@ -3,124 +3,96 @@ extend layout
block styles
link(rel='stylesheet', href='/stylesheets/bootstrap-responsive-project.min.css')
+block github
+ // relocate github buttons to end of sidebar; see below
+
block sidebar
- h2 Projects
- !=partial('forms/add-project')
-
- ul#projects
- li
- a(href='#edit-project') Persona.org
- i.icon-pencil.icon-white
- i.icon-chevron-right
- li
- a(href='#edit-project') Mortar
- i.icon-pencil.icon-white
- i.icon-chevron-right
- li
- a(href='#edit-project') Firefox Mobile
- i.icon-pencil.icon-white
- i.icon-chevron-right
- li
- a(href='#edit-project') Firefox Desktop
- i.icon-pencil.icon-white
- i.icon-chevron-right
- li.active
- a(href='#edit-project') Boot2Gecko
- i.icon-pencil.icon-white
- i.icon-chevron-right
- li
- a(href='#edit-project') OpenBadges
- i.icon-pencil.icon-white
- i.icon-chevron-right
- li
- a(href='#edit-project') Mozilla Popcorn
- i.icon-pencil.icon-white
- i.icon-chevron-right
- li
- a(href='#edit-project') WebFWD
- i.icon-pencil.icon-white
- i.icon-chevron-right
+ h2 Get Started
+ p If you're ready to start using Napkin, simply sign in via
+ a(href='https://login.persona.org/') Persona
+ | using the button above.
-block content
- !=partial('forms/add-screen')
+ iframe#fork(src='http://ghbtns.com/github-btn.html?user=mozilla&repo=napkin&type=fork&count=true&size=large',
+ allowtransparency='true', frameborder='0', scrolling='0', width='126px', height='30px')
- .row
- .span3.screen
- h4 Home
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
- .span3.screen
- h4 About
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
- .span3.screen
- h4 Contact
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
- .span3.screen
- h4 Gallery
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
+ iframe#star(src='http://ghbtns.com/github-btn.html?user=mozilla&repo=napkin&type=watch&count=true&size=large',
+ allowtransparency='true', frameborder='0', scrolling='0', width='126px', height='30px')
+block content
.row
- .span3.screen
- h4 Portfolio
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
- .span3.screen
- h4 My Account
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
- .span3.screen
- h4 Log In
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
- .span3.screen
- h4 Log Out
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
+ .span12
+ h2 Summary
+
+ p Napkin is a rapid web prototyping tool meant for users who want to make functional, revisionable mockups that can easily be shared and exported to baseline front and back-end code.
+
+ img#summary-img(src='/images/summary.png', alt='Summary')
+
+ h2 Features
+ .row.features
+ .span6
+ h3 Interface
+ p When you begin prototyping, you'll be presented with a layout builder, allowing you to select the ideal grid for your mockup.
+
+ p You'll then use a simple drag-and-drop interface to add components and elements to your prototypes, both of which can be customized, rearranged, and deleted with ease.
+
+ img#layout-img(src='/images/layout-builder.png', alt='Layout Builder')
+
+ .span6
+ h3 Interaction
+ p Unlike other tools, Napkin is largely focused on interactions. Rather than creating a prototype and telling others where a certain link leads to or that some page requires authentication, you can directly show them. The elements that you can add to a page have these interactions built in, and you can see them in action when you preview your prototype.
+
+ img(src='/images/interaction.png', alt='Interaction')
+
+ .row.features
+ .span6
+ h3 Export to Code
+ p When you're done working, you can export a whole project to a node.js standalone express application as a baseline starting point for development. All the interactions that you specified for your mockup will be baked in, saving you time.
+
+ img#export-img(src='/images/export-to-code.png', alt='Export to Code')
+
+ .span6
+ h3 Responsiveness
+ p Because you prototype is grid-based, you won't need to worry about tablets and smartphones. Napkin will automatically add responsiveness to your mockup, making it render well on these smaller-screen devices. You can simply resize your browser when prototyping to view this responsiveness live!
+
+ img(src='/images/responsiveness.png', alt='Responsiveness')
+
+ h2 How it Works
+ ol
+ li
+ h3 Create a project
+ i.icon.icon-eye-open
+ p For each potential application/site you have in mind, create a project.
+
+ li
+ h3 Add screens
+ i.icon.icon-plus-sign
+ p Each project contains multiple screens, which represent pages or different views.
+
+ li
+ h3 Start prototyping with components and elements
+ i.icon.icon-pencil
+ p After selecting a layout for a screen, you can add components&mdash;articles, forms, navigation, etc.&mdash;and their corresponding elements&mdash;headings, paragraphs, input boxes, links&mdash;as a means of wireframing the pages you would eventually like to create.
+
+ li
+ h3 Bump it up with interactions
+ i.icon.icon-play
+ p But wireframes are not limited to interaction at the inter-screen level. Through links and form submissions, they can also have intra-screen connections. For example, a contact form on one screen could submit to a thank you page represented by another screen. In this way, you are able to create a more complete mockup that not only mimics the final product's aesthetics, but also its interactions.
+
+ li
+ h3 Share with friends
+ i.icon.icon-globe
+ p Want some feedback? You can share a screen with your friends using a simple link.
+
+ li
+ h3 Export when done
+ i.icon.icon-inbox
+ p Once the site is complete, you can run the project as a demo or export it to a standalone node.js express application.
+
+ h2 Get Started
+ p Ready to get started? Sign in using the
+ a(href='#sidebar') button at the top of the sidebar
+ | .
- .row
- .span3.screen
- h4 Dashboard
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
- .span3.screen
- h4 Admin
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
- .span3.screen
- h4 Pricing
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
- .span3.screen
- h4 Purchase
- a(href='#edit-screen')
- i.icon-pencil
- a(href='#view-screen')
- img(src='/images/220x220.gif', alt='Screen placeholder')
block scripts
script(src='/javascripts/lib/require-jquery.min.js', data-main='/javascripts/scripts/example.js');

0 comments on commit adda6d8

Please sign in to comment.