Git Product home page Git Product logo

napkin's Introduction

Napkin

Summary

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.

High-Level Overview

Overview

Installation Instructions

Clone the repository

$ git clone git://github.com/mozilla/napkin.git

Install brew; instructions: https://github.com/mxcl/homebrew/wiki/installation. Next, use brew to get redis:

$ brew install redis

Run redis in the background

$ redis-server &

Install node by using brew or through the website http://nodejs.org/#download

$ cd napkin
$ cp local.json-dist local.json
$ npm install

Run napkin on http://localhost:3000:

$ node app.js

Run tests (optional):

$ make test

napkin's People

Contributors

karthikv avatar willkg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

napkin's Issues

HiRedis package fails

Node version: 7.0
NPM version: 3.10.8

I have tried upgrading Xcode tools, npm and node itself
as well as Redis package, but still get errors:

[email protected] preinstall: make || gmake
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] preinstall script 'make || gmake'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the hiredis package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! make || gmake
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs hiredis
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls hiredis
npm ERR! There is likely additional logging output above.

Changing column layout of a row deletes its contents

@morgamic just hit this snag:

Create a row with, say, three columns and put some content in.

Then change the layout of that row.

It'll delete the content of the entire row. Ouch.

We should probably warn, or disallow changing the layout if we can't reasonably salvage the content?

uses the Persona sign in button as a sign out button. This is confusing.

The offending article:

The Persona sign in button will be used across the web to mean exactly that: To sign in. Using it as a sign out button dilutes the Persona brand.

Not only this the Persona sign in button is naturally a call to action, and using a call to action for a sign out action is generally a bad idea.

Also the button (area where the sign in action is initiated) does not change significantly between signed in and signed out state. As such when I first used the site I signed in, and then signed out immediately afterwards because I assumed Persona had broken in some way.

This should be the user's gravatar/libravatar followed by their account.

Linking to other Screens

Hi there

I just tried napkin and wanted to build a little base structure of a site which includes a nav bar and links between pages. Now I can add screen links to a navigation and let a screen link to itself but not to another screen, I always get a note saying "Element's screen must correspond to a real screen.". At times I get the same message on the Screen link on the menu on the left and can't even drag the Screne link onto the page.

This napkin thing looks like an awesome tool. If it works, I'd love to try it a bit more and maybe actually use it.

Cheers

Edit: I tried on Linux w/ chromium-20 and firefox-15

Reduce max screen size of app to 960px

Reduce the screen width and let everything adjust accordingly. It's a bit too wide for most resolutions as not everyone is on a really wide screen (e.g. might be working on a laptop).

I'd probably think of moving the Github link to a non-conventional one (just in the side nav as a small link or something) so we don't have to worry about it blocking anything

Adding an element sometimes displays more than one

When adding a new paragraph element or heading, I sometimes see two appear. Once refreshing, only the last one appears (I edited both before refresh and noticed that it just took the text from the last one - might be a clue?)

please add LICENSE file

This repository doesn't specify under which license the code is distributed. Please add a LICENSE file.

If you tell me which one you want, I can do a pr.

Previously, we used BSD 3-clause. But I think the plan is now to do Apache 2 for Mozilla webdev projects.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.