A grid-based layout design tool and code generator.
JavaScript HTML CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
browser
public
server
tests
.editorconfig
.eslintrc
.gitignore
Procfile
README.md
bower.json
gulpfile.js
package.json
seed.js

README.md

LayoutLasso

Designing a webpage layout can be a tedious process - you know where you want elements to appear on the page but coding them into place can be time-consuming. And changing your mind and moving an element can mean lining up those < div >’s all over again. That’s where LayoutLasso comes in.

LayoutLasso is a web app that makes designing beautiful layouts easy through a visual editor and code generator. The graphical user interface allows the user to add elements to the canvas, edit their size and styling, and move them into any position on the page. Elements will snap into place with the drag and drop interface and can be infinitely nested. LayoutLasso provides a variety of commonly used web components and an in-app editor for developers to customize their elements. Custom CSS styling can be applied to one or more elements with the click of a button. Completed designs can be exported as HTML and CSS files that harness the power of the Bootstrap grid system to produce the completely customized webpage.

--

Use it now

http://layoutlasso.com

Tech used

MongoDB. Express.js. Angular.js. Node.js. HTML. CSS. jQuery. gridstack.js. Bootstrap. Ace editor. Browserify. Passport. Heroku.

This project was generated with the Fullstack Academy Generator

Build & development

Run npm start to build and preview the app on http://localhost:1337/