Easel is a visual design tool built for the web. Since the web is viewed in a browser, we believe it should be built in one too.

Use Bootstrap to Create Production Ready HTML

Twitter Bootstrap is a powerful front-end framework for modern web applications. It has thousands of Github followers and a strong community that continues to refine it and push it forward. Now you can take advantage of Bootstrap directly within Easel.

As you can see, you can drag in a standard component, tweak its appearance, and then export the result. One of the best parts for developers is that Easel only exports the styles that you change! We’ve worked hard to keep your markup and styles as tidy as possible, and we’re proud of the result.

Try it Now

To get started, just open up the bootstrap demo. You’ll notice that we’ve expanded the sidebar so all of the new Bootstrap elements are now visible. You can click and drag any of the elements on the left into the document, just as before.

One difference is that the editor will now highlight any container with a blue outline if the currently selected item can be placed within it. To export your work, just select a specific element and right click or choose “Export All HTML/CSS” from the File menu. The zip file will contain your markup as well as all of the required bootstrap files to display your document.

Designing Responsively

Today’s web is diverse. There are a multitude of different devices, screen sizes, and resolutions. If it was ever practical to design at a single resolution, it’s no longer the case, which makes responsive frameworks, like Bootstrap, even more important. This is why we’ve added Bootstrap’s responsive containers to Easel.

If you’re familiar with Bootstrap, you already know it allows you to build sites responsively. If you haven’t played around with Bootstrap, it’s easy to learn but has some terminology and structure that you’ll need to understand. We’ll give you a brief overview here, but we encourage you to take a look at their detailed documentation.

The foundation of Bootstrap’s flexibility is its grid system. Instead of positioning absolutely, you position content by placing it within containers and then using either a fluid or fixed grid to position horizontally. Fluid grids stretch to fill all of their parent’s width, whereas fixed grids have columns of a fixed size.

Either type of grid has 12 columns, which allows you to size and position your content by those columns. For example, to position an element one column from the left with a width of two columns, you would assign the following CSS classes: “span2 offset1”. Don’t worry about the specific names, those classes are selectable options for each element in the Easel inspector.

Now that you understand how to position using a grid, you need to actually make one. You can create a row by assigning either “row” or “row-fluid” to an element that contains all of the elements in your desired row (you can create a row in the editor by simply dragging it into a container and placing elements within it). While using a grid might be a bit different than what you are used to, it’s actually quite nice since it gives you a simple and consistent way to position your content.

Once you’ve mastered containers and grids (and nesting them) to create complex layouts, the rest is a breeze. Bootstrap comes with many other assets including buttons, forms, image placeholders, and navigation elements. These can just be dragged into an existing container and positioned as described above. The best way to learn is by doing, so watch the video below and then get started with the demo!

Conclusion

We’ve been working on this feature for quite sometime, and we’re excited to be able to release it to you today. We’d love to hear how you’ve used it to create something awesome.

Comments