Bootstrap 3 Now in Jetstrap!

Posted August 20, 2013 by Max Lynch

jetstrap_bootstrap_love

Today we are incredibly excited to announce the release of Bootstrap 3 support in Jetstrap. (Antsy? Try it right now!)

Released only hours ago, Bootstrap 3 is a dramatic overhaul of Bootstrap 2, and comes with a lot of changes and improvements. We wrote an extensive blog post on how to prepare yourself for Bootstrap 3, and it’s worth a read if you aren’t familiar with Bootstrap 3.

To start using Bootstrap 3 in Jetstrap, all you have to do is create a new project, and select Bootstrap 3 from the framework dropdown. Any screen created in the project will then use Bootstrap 3 as the framework.

New Components: Panel and List Group

List Group and Panel Components

With the new Bootstrap 3 release comes support for two new components: Panel and List Group. We have added these components for all Bootstrap 3 projects and made them available in the component list. Just drag them into your design to start using them today!

Full HTML Editing

Full HTML Editing

With this release, we are also adding support for full HTML editing. This makes it easy to configure meta tags, tweak your subject line, or link in external Javascript libraries and services.

Now that there is a plethora of good Backend-as-a-Service offerings, it’s a snap to add powerful backend and logic to your Jetstrap screens, all without having to run your own servers!

Try Firebase to get a powerful real-time backend that works 100% in client-side Javascript, or Kinvey to build backend services in Javascript, all accessible through a simple client-side library.

Build with Bootstrap 3 Today

We are excited to release Bootstrap 3 support less than a day after its official release. We think it’s a great framework that has only gotten better. And with Jetstrap you’ll be building with Bootstrap 3 in no time.

Start building with Bootstrap 3!

 

Bootstrap 3 Grids Explained

Posted August 12, 2013 by Max Lynch

Update: on August 19th this post was updated to reflect the big changes made to Grids in Bootstrap 3 Final.

gridderp

Over the last week, I’ve spent a lot of time using Bootstrap 3 on a new website for one of our products, Codiqa (check out the site, that’s a heavily customized Bootstrap 3 design!). Along the way I’ve gotten plenty of time to explore the new grid system, and how to take full advantage of it.

The new grid system in Bootstrap 3 is more powerful, and also more complicated than it was in 2.x, so I wanted to invest some time to explore all the features of the grid and how to really make use of it.

Hopefully this post explains grids to newcomers to Bootstrap, or those upgrading from Bootstrap 2.x with little to no experience of the new grids!

Mobile First?

Mobile first has become a popular buzzword lately, and for good reason: many websites are receiving a growing amount of mobile traffic, and it’s expected that mobile traffic will eclipse large-format devices such as desktop and laptop computers in the near future. Everyone is starting to worry they are focusing on the wrong devices.

With this in mind, Bootstrap 3 took a different approach to 2.x: designing for mobile right from the start. Bootstrap 3 is mobile first in the sense that the code for Bootstrap now starts by targeting smaller screens, and then “expands” components and grids for larger screens. Bootstrap 2.x took the opposite approach.

In general, this doesn’t really mean much for you, as all components should work generally the same as they used to no matter the device. However, the Grid has seen some major changes because of this mobile-first strategy, and like mobile before, desktops are now special devices that must be specifically accounted for.

.col-*?

In Bootstrap 3, the .span* classes have been removed, and replaced with a combination of .col-* classes: .col-xs-*, .col-sm-*, .col-md-*, and.col-lg-*. Color me confused the first time I saw that!

These column classes, while numerous and confusing, actually make it incredibly easy to create complex grid layouts for a variety of different devices.

The xs classes target mobile devices, sm targets tablets, md targets laptops and smaller desktop screens, and lg targets large desktop screens.

The best way to think about the new grid classes is that they work from mobile up, rather than from desktop down. This means by default your grid will stack from mobile up until the grid class breakpoint you’ve used is reached.

For example, using .col-lg-4 means your grid will stay stacked on mobile, tablet, and small desktop screens. Only until the large desktop breakpoint is reached will the grid go horizontal.

As a nice side effect of the mobile-first approach, mobile devices get a grid that doesn’t have the cross-platform inconsistencies of media queries nor the performance hit (however minimal).

.col-md-* will most likely be the most common grid class used, but for the sake of the future mobile majority, don’t just replace your .span* classes with .col-md-*! You’ll leave mobile devices and tablets with the same stacked experience. You’re better than that!

For best results, combine the classes as necessary depending on the content, as shown in the next example:

A wild example appears!

codiqa_plan_big

The screenshot above is taken from another one of my company’s products, Codiqa. Codiqa is a visual development tool targeted at HTML5 native apps and websites.

For this example, we have a set of icons that quickly explain the features available in any paid plan of Codiqa. When using just .col-md-3 on each feature the layout works really well on desktop size screens. But when you shrink the window down, you get this!

preview

No thanks, just look at all that wasted space!

What we really want is to have a smaller grid of the feature icons on small devices. I decided moving from a 4 column layout to a 2 column layout on a small screen would be perfect. But how do we do this with Bootstrap grids?

When you look at the CSS used for the various grid classes, you’ll see that grid columns are just floated left with a percentage width of the size number divided by the number of columns. So a column with the class .col-lg-6 is just 6/12 = 50% of the width of the row (when the desktop breakpoint media query is active).

Since the desktop breakpoint media query won’t be active on the small display, we need to use .col-xs* instead, to maintain the grid columns (we could use .col-sm-* also, but I want the tablet and mobile devices to have the same dual column experience).

Adding .col-xs-6 to each .col-md-3 column, we get this, a grid that shows as 4 columns on large screens, and 2 on tablets and below:

codiqafeatures

Much nicer!

Nesting made Easier

One nice side effect of the 100% fluid grid on Bootstrap 3 is that nesting grids is now incredibly easy (if you used the fluid grid in Bootstrap 2.x, it’s the same experience).

With the old default grid in 2.x, you had to use smaller or equal grid column classes in sub-grids and columns, in order to add up to the column that this sub-grid was contained in. For example, if placing a grid inside of a grid column with the class .span9, your sub-columns would need to have sizes of 9 or less (since they were set to use pixel widths and would overflow if any bigger).

With the new grid (and the old fluid one), you just use the same grid column sizes, and think of percentages of the parent column. For example, .col-xs-6 inside of a .col-xs-6 is just 50% of that 50% column. Much more intuitive!

Offsets

Offsets are a useful feature for more specialized layouts (perfect for being or working with a pixel-perfect designer, like my co-founder Ben). They can be used to push columns over for more spacing, for example.

The .col-xs=* classes don’t support offsets, but they are easily replicated by using an empty cell.

To use offsets on large displays, use the .col-md-offset-* classes.

Grids, everywhere.

Once you start using the grid, you’ll find yourself using them everywhere to layout practically anything. They are a truly versatile tool and the sooner you start thinking in portals grids, the more effective you’ll be as a front-end designer or developer.

As a quick exercise, the next time you think you need to float a container for a layout, try using the grid instead. You’ll wonder how you ever got along without it.

If this post helped you, please leave a comment below or send me a tweet: http://twitter.com/maxlynch

Bootstrap 3 – How to Prepare Yourself

Posted July 27, 2013 by Max Lynch

On August 19th @mdo and @fat released the first final version of Bootstrap 3, ending a months-long development process aimed at making the hit framework even better.

With Bootstrap 3 out, I’ve received many questions from bootstrap developers and Jetstrap customers about whether it will work with v2, what the big changes are, and if it’s worth upgrading to.

I hope this post helps explain the new version of Bootstrap, and the most important changes and what you need to know to take advantage of them (check the v3 pull request for a complete list of changes):

Flat Design

The first thing you’ll probably notice with Bootstrap 3 is how flat the design is. This is following a fairly recent web-design trend in throwing out excessive gradients, shadows, and textures, and going for a simple, minimalist look.

Though the flat design in Bootstrap 3 isn’t a design statement, for many developers that are considering going Flat, the look has several important benefits.

First of all, it’s now easier than ever to customize Bootstrap to fit your brand. No more will you have to fiddle with various color stops on a background gradient, or try to remove animations on multiple stages of a button click.

Your websites will now look more modern, at least for as long as flat design reigns.

With the simpler design, I expect we’ll see less “bootstrappy” looking sites. This might be a pipe dream but I hope the flat design encourages web devs to tweak and fiddle with the default look.

At any rate, the new look breaks the monotony of the old 2.x look and feel that has become ubiquitous. But if you still yearn for a more gradienty time, you can still use an optional Bootstrap 2 theme.

Grids

Grids are the cornerstone of Bootstrap, and they’ve received a major overhaul in 3. For an in-depth review of the new Grids, see our recent Bootstrap 3 Grid article.

The grid system is now a single fluid and mobile-first grid.

This means the grid now only uses percentage based widths instead of pixel-based widths. And now that it’s mobile-first, the grid starts stacked and scales “up” for larger screens.

In the past, Bootstrap was targeting a 940px width page, perfect for most desktop-oriented websites.

But mobile growth has only continued to explode, and more and more websites need great mobile experiences to take advantage of this growth.

With this in mind, Bootstrap 3 adds a set of classes that let you control grid behavior on all different devices. For example, you can configure your grid to not stack on small screens, or only expand into columns on large screens.

With that change, the span-* classes are gone, so old grids will not work with the new grid system.

The new grid system is powerful, and I expect it’s going to confuse a lot of people. Expect to spend a good amount of time in the grids section of the Bootstrap docs before you get the hang of it. I know I had to!

New Components and Usage

Bootstrap 3 now includes two new components: List Groups, and Panels.

I’m most excited about List Groups, which give you an iOS-looking list control. Perfect for grouping related items, and they make it easy to add annotations such as badges and form elements.

Along with new components, just about every component has received changes, either to their markup, required classes, or behavior.

The Modal, in particular, has received many important changes. For example, no longer should you apply the hide class, they are hidden by default. They also require new markup in certain cases. Be sure to take a look at the docs and cross-check with the complete changes list on the pull request.

IE7, We Hardly Knew Ye

With Bootstrap 3, support for Internet Explorer 7 has been removed from the project.

If you need IE7 support, consider trying out bootstrap-ie7, which is sure to be one of many community sponsored projects to improve older browser support in Bootstrap.

To make sure your Bootstrap 3 websites work well in older browsers, take a look at the Browser Compatibility guide in the official Bootstrap docs.

Migrating to Bootstrap 3

With all the changes introduced in Bootstrap 3, you can’t just link to the new stylesheets and javascript from an old v2.x project and expect it to work.

Grids are completely new, and must be upgraded. Many controls have new behavior or require new classes and markup.

I recommend big projects that already use Bootstrap 2.x to just stay on that version. While there are many important updates and improvements, upgrading a large project might not be worth the effort.

However, I think new projects should start to consider Bootstrap 3 as it moves through the Release Candidate phase and becomes more stable.

Right now Bootstrap 3 has bugs and isn’t 100% production ready. However, with the release of RC1, you can expect the API to stay relatively stable through to the official release.

ETA on Jetstrap Support of B3?

As of August 19th, Jetstrap now supports Bootstrap 3 in all new projects in Jetstrap.

We are excited about the new changes and we know they will only make this great framework even better.

And as always, feel free to leave a comment with any questions you might have. I am also learning about Bootstrap 3 so I can probably learn a thing or two from you!

Less Like Bootstrap – 5 Ways To Customize Your Designs

Posted July 15, 2013 by Jon Hainstock

This is a guest post by Jon Hainstock, co-founder of ZoomShift, easy to use online employee scheduling software. 

Hundreds of thousands of sites are using Bootstrap to jumpstart their web design and front-end development. For a lot of developers and designers, implementing Bootstrap is a no brainer. Some rely on Bootstrap for the responsive capabilities, while others simply like using the built-in elements.

Most of the sites that use Bootstrap do little to customize the look and feel–which, in my opinion, is too bad. I’m disappointed, because Bootstrap offers a great foundation that you can work with to prototype and design a completely custom site. It doesn’t take much to customize your design and give visitors a unique experience using Bootstrap’s elements.

In this post I’ll show you 5 easy ways you can avoid the standard ‘Boostrap look’ and create a custom design.

To use the examples below, create a new CSS file and link to it below the bootstrap.css file (found in the <head> of your page). Now any styles you add will override the default Bootstrap styles when targeting elements. I’m also including a zipped copy of the HTML and CSS from these examples a link below.

1. Create Custom Buttons

The default buttons are a dead giveaway that a site is using Bootstrap. You’ll notice in Bootstrap’s documentation that they create different colors for buttons using a btn-description naming convention. Instead of overriding these classes, create your own naming convention. Something like ‘btn-color’ works well. When it comes to customizing the color of your buttons, there is no better tool than Charlie Park’s ‘Beautiful Buttons for Bootstrap’ tool.

To go for the ‘flat’ look that is popular right now, simply add ‘background-image:none’ to your btn-color class to override the gradient. Once you have the perfect color, play around with padding, font-weight, letter-spacing and text transform properties to give your buttons their own look and feel.

Here are a couple examples of buttons that can be created using these methods. These examples show the flexibility you have with just a few lines of code. Feel free to use the snippets as a starting point to create your own.

HTML for Bootstrap buttons

Geckoboard Buttons

Basecamp Buttons

ZoomShift Buttons

Stripe Buttons

2. Avoid The Standard Navbar

Similar to buttons, Bootstrap’s standard navbar can be completely restyled easily. Use inspiration from the web, and create your own custom header instead of relying on what Bootstrap includes right out of the box.

Here are a couple example snippets you can use to help you explore different header options.

The HTML for a standard Bootstrap Navbar

Simple Navbar Header Inspired by Simple.com

Colored Navbar Header Inspired by Harvest

3. Use Custom Fonts

Fonts add dimension and personality to your site just as much as color or layout. There are tons of free fonts that you can use to liven up your design. I prefer Google Web Fonts, but also would recommend Typekit for finding awesome web fonts if you can afford it.

Learn by copying font choices from sites that are designed well. 10 Great Google Font Combinations You Can Copy is a great place to start. You can also find out what fonts sites are using with this Google Chrome plugin. If you want to get nerdy and learn the theory, check out this article on font pairing. And if Helvetica is your thing, then by all means, continue to use Bootstrap’s default font and adjust font weights to keep things interesting.

Here are a couple of examples of sites that use custom fonts with their Bootstrap design.

4. Create Unique Layouts Using Offsets

Another way you can customize your Bootstrap design is by using offsets to create unique layouts. The general concept with offsets is to add whitespace to the left of a Bootstrap span. Play around with offsets to find some layouts that work well for you. At ZoomShift we use offsets to tighten up layouts where there is not a lot of content. Using offsets and a lot of vertical padding creates breathing rooms in your designs and can set it apart from the traditional layouts.

Here’s an example of the 3-2 layout on the ZoomShift homepage.

Here’s an example of nested columns in a closed two-column layout on the Desk pricing page.

5. Expand Your Icon Choices With Font Awesome

Icons can help you communicate big ideas and concepts quickly to your visitors. The default Bootstrap icons are great for most applications, however, there are times when you need more options. Font Awesome offers an expansive set of icons that you can use to improve your site’s feel.

Closing Thoughts

These are just a few of the ways you can create your own look and feel with Bootstrap. I’d love to see how you are using Bootstrap to come up with your own custom designs in the comments below!

Introducing Jetstrap for Bootstrap 1.0

Posted April 9, 2013 by Ben Sperry

Jetstrap 1.0

Today, we are super excited to announce the 1.0 release of Jetstrap, the interface builder for Twitter Bootstrap! It’s been a long time coming, with lots of late nights, hard work and a lot of love. We thank all of you for the great feedback and help finding and fixing bugs and making the tool much better.

In the past few months, Jetstrap has grown from a side project to a healthy product with over 80,000 users. The passion behind Bootstrap and the opportunity it unlocks for more people to be developers is immense. We are so excited to be a part of this wonderful community.

Check out these new Jetstrap features that make Bootstrap development faster and easier than ever:

Live HTML/CSS/JS code editing

editor

We integrated a new, beautifully designed code editor into the interface as an integral part of the creation process. Want to mess around with the HTML or link a custom JS hook to a button? Just slide click “Code” on the bottom bar and it slides up with everything you need. Never want to even look at the code? No problem. It also serves as the component breadcrumb manager. Grab your own snippets of code, paste them into the editor, and watch as they display live in the screen pane. Try it out with Bootsnipp!

New templates, Bootstrap components, and image uploading

templates

Check out the new Bootstrap starter templates. We threw in the Jumbotron, Narrow Marketing, Justified Navigation, and more. We also added the ability for you to upload your own images (finally!). We’ll host them for you, too! Aside from that, we added several new Bootstrap components like Checkboxes, Radio buttons, Form elements, and more.

Text editing like a pro

text editor

Text editing the way it should be. We upgraded and improved the way the text component works. It felt clunky having to make changes to text in a separate window. By focusing on the basics, we designed the text options to be simple and unobtrusive, however, we plan to add more customizations in the future. Expect to see some new fonts, sizing, and more!

New user interface and project dashboard

background panes

We also simplified the interface and added some beautiful scenic backgrounds for the dashboard, which look incredible on both regular and retina screens. On top of that, the actual editor has a fresh new look and feel. It’s a solid in foundation, yet flexible enough to accomodate different display sizes.

1.0: A focus on simplicity and Bootstrap

Jetstrap was built to help you create for the web more easily and efficiently, all with the awesome Twitter Bootstrap framework. Whether you’re mocking up a new landing page idea or simply want to get a better grasp of HTML5 and Bootstrap, Jetstrap makes it easy. Plus, you don’t ever have to code if you don’t want to!

With this release, we focused on elevating the simplicity of the tool to make it easier to use and more cohesive as a product. In order to do that, we had to throw out our old UI and reimagine it. The visual design, the code architecture, the entire experience of using the tool. It’s simpler, cleaner, faster, and more beautiful than ever. Trust me when I say, this isn’t like any other software tool you’ve tried.

Simple pricing, one plan

simple pricing

With this launch we are also rolling out our Introductory Pricing! In addition, we’re giving out a FREE Jetstrap t-shirt with every purchase during the month of April! It’s super simple: one plan, $8/mo billed annually or $20/month, month-to-month (there’s also a slimmed down Free plan). Pricing is really hard to get right, but we’ve listened to a ton feedback and feel like this is a great start. Existing users can keep using the original free version of Jetstrap for 60 days.

We are a customer funded company, which means there’s no VC’s or outside influencers pushing us towards an exit. Why? Because we love working on this stuff and plan to be around for a while. What does that mean for you? It means that as long as there are awesome customers supporting us, Jetstrap isn’t going anywhere, and neither are we. Learn more about us!

Now go forth, and build!

No seriously, try Jetstrap out now! We think you’re going to love it. And make sure to let us know what you think, too. Jetstrap is piloted by you as much as it is us. We are thrilled (and lucky) to be able to work on this amazing tool in this fantastic community. We’ll be continuing to develop and improve Jetstrap in the months and years to come. This is truly just the beginning, and we’re so thankful to have you along on the ride with us. Make sure to check back here often for more news and updates!

Sign up and get a free t-shirt!

Posted April 3, 2013 by Max Lynch

jetstrap tshirt

To celebrate our launch of Jetstrap 1.0, we are giving away a free Jetstrap t-shirt to anyone that signs up to a paid plan in April.

Just subscribe for a paid account, then we will send you an email asking for your size. Then, we will mail you an awesome shirt! It couldn’t be easier, really.

If you missed our recent launch announcement, check out what’s new with Jetstrap 1.0 and try it out today!

Building a Docs Site with Jekyll + GitHub Pages

Posted March 19, 2013 by Max Lynch

Today we are happy to announce the very first version of our Jetstrap Documentation site running on GitHub Pages using Jekyll as the site generator. If you don’t know about us, Jetstrap makes it super easy to build  Twitter Bootstrap interfaces and designs (try it, it’s free).

Since our tool has a lot of little features, we’ve had a lot of requests for better documentation and tutorials. I wanted to build something that was easy to maintain, “open” so others could collaborate and submit content, and fast. GitHub Pages is perfect for that.

Getting started with GitHub pages is always a bit of a pain. I forget how to push content to it, what URL to access the site with, how to set up a CNAME so we can use docs.jetstrap.com to access the site, what branch to use, etc.

Hopefully this tutorial gets you up and running fast on GitHub Pages.

Getting Started – Create the Repo

To start, we’ll need a normal github repo. If you are building a site for your user account, you should follow the yourname.github.com naming scheme for your repository. If you are creating a page for a project, you can use whatever naming scheme you want. I wanted this docs page to be a separate project, so I named mine jetstrap-docs.

Creating the repo is the same as any other: just visit https://github.com/new, pick your organization (or keep it as yourself), and create it.

Clone the repo locally, and check out a new branch called gh-pages or master if using user pages. You are now ready for the next step.

GitHub Pages Config

GitHub Pages for Projects works by hosting the gh-pages branch of your repo as a static site at the URL yourname.github.com/repo-name, or yourorganization.github.com/repo-name.

If you picked the User naming scheme, GitHub instead hosts the master branch of your repo at yourname.github.com.

If you want to set up a CNAME for a custom domain, it’s as easy as creating a CNAME file in your repository and putting in the CNAME you will use. For example, I put docs.jetstrap.com into our CNAME file and pushed it to the gh-pages branch.

Then, set up your DNS host to be a CNAME from your desired site to the root of your organization or project. This part is confusing, but in our example, we made a CNAME from docs.jetstrap.com to driftyco.github.com. Imagine GitHub looks at your repos and checks for the CNAME entry to display the proper repo matching that CNAME in your user/org account.

We use DNSimple for our DNS host which is super fast. I could test that the CNAME worked almost immediately.

What is with all the damn CNAME’s!?

Jekyll

Now that you have you repository set up, it’s time to create an initial structure for Jekyll.

If you haven’t used Jekyll before, it’s a static-site generator that builds a static version of your site with dynamic features. For example, you can create a base layout that all pages inherit from to reduce duplicated code. This means you get incredibly fast load times since it’s all static content, but you can take advantage of a lot of dynamic “backend” templating features you are used to in other languages.

To setup our initial Jekyll config, we create a _config.yml file. Check out ours for reference. The most important field in there is the permalink field, which specifies what URLs will be used to access content. I haven’t dug into the other possible values, so you might want to tweak some of them.

Next, make a directory called _layouts. This will store our base template layout so all pages can have the same look and feel. Inside of that folder, create a file called default.html and add your base HTML to it (see ours). The most important value in this template is the {{content}} directive, which will include the content from any page that inherits this page.

Next, create an index.html file that inherits from this layout. It’s as easy as adding a header with some meta data:

In this example we’ve also added a variable called “title” which we can access in our layout template to update the <title> tag in our HTML by adding the {{page.title}} directive, but this isn’t necessary.

Test it!

Testing with Jekyll is simple. First, if you haven’t installed it yet, follow the installation instructions or just do gem install jekyll from the command line.

Jekyll lets you run a local server and test your site out. To do that, run jekyll --server --auto. This will build your site, watch for changes, and start a server that is accessible at http://localhost:4000/. Feel free to make tweaks to your site and Jekyll will see the update and rebuild the site.

Hello, World

When you are ready to show the world all your hard work, just push to github and you are done!

You can now visit your site by accessing the CNAME you set, or by visiting yourname.github.com/repo-name, or yourorganization.github.com/repo-name.

Jekyll is really great, and hosting on GitHub  is pretty much the best of every kind of world. Fast, convenient, cheap, and collaborative.

What about you? Any luck setting up Jekyll for a static site? Need help with anything?

Beta 2.0 – Projects, Screen Linking, New UI, and 2.3.0

Posted February 15, 2013 by Max Lynch

We’ve been busy over at Drifty (makers of Jetstrap). We have a ton of ideas for Jetstrap, and our beta is truly the beginning of where we are headed. We are so excited to have you along for the ride.

Since we launched, we’ve had a ton of requests for being able to link between screens (or “pages”) in Jetstrap. The idea is you put together a set of screens, and then navigate between them to demonstrate a user experience in realtime.

Not only that, but our developers wanted to be able to group screens based on a project. You might have a project for the client down the street, and another for your own website. It’s nice to keep them separate.

Today we are excited to announce both screen linking and  project/screen grouping support. Now, to link between screens, it’s as simple as setting “Link to” to the desired target screen from a button. It’s easy to test the navigation by toggling “test mode” and clicking the button!

Screen Shot 2013-02-15 at 12.54.55 PM

Project Support

Along with screen linking, we are happy to announce the release of a new dashboard. Now all of your projects and each screen are happily grouped and accessible from the dashboard. You can even download a zipfile for each project, or just a single screen:

Screen Shot 2013-02-15 at 12.25.33 PM

Each project can contain any screens and can be exported in full (download all of the screens for a given project). Any screen links still Just Work in the exported code.

Interface Updates

We’ve also updated the interface of our builder to make it easier to navigate and use:

Screen Shot 2013-02-15 at 12.20.35 PM

We wanted to make it easy to visualize the components you would use, so we made some nice pictures for them and added a search function to quickly find the component you need. We also added a sidebar for quick screen navigation.

Among other changes, we recently updated Jetstrap to use Twitter Bootstrap 2.3.0, so you’re all up to date without having to do a thing. We also fixed a TON of bugs, tweaked the way you edit the content of a component, improved our grid support, added more shortcuts and copy/paste functionality.

We know that a lot of our users are using Jetstrap to learn Bootstrap. To that end, we want to make it easier and easier to build and learn at the same time. Going forward, that dream is going to guide our future product development.

Next on our list of things is getting rid of the social account login/signup (lesson learned), UI tweaks, HTML editing, Javascript stuff, and then some completely new ideas that you probably won’t expect!

What do you think about the new changes? Has Jetstrap been helpful to you so far? Any crazy ideas or suggestions?

20,000 users in a week – HN Front Page Stats

Posted October 2, 2012 by Max Lynch

Last week, we launched the beta of Jetstrap, the interface-builder for Twitter Bootstrap, on Hacker News. The post was #1 on HN for an entire day, and on the front page for two days.

We had a pretty amazing few days on and after the post. We gained 20,000 new users in less than a week, had an outpouring of support, and found tons of bugs and quirks to fix. The interest surrounding Bootstrap is simply insane, and the growing ecosystem ensures that Bootstrap will be the leading front-end framework for a long time.

Part of our goal with Jetstrap is to be very transparent. Our company Drift Hack (also the creators of Codiqa for jQuery Mobile) is 100% bootstrapped, and we want to learn from more experienced founders and inspire others to build sustainable businesses. The only way to do that is to be open and honest about our progress.

In the interest of transparency, here is the raw data of how the week since our Hacker News debut has gone, starting with our total users per day over the last month (Jetstrap entered public alpha at the beginning of September):

Our total users per day

Notice the huge spike on 9/26? That is the Hacker News effect.

And here is a graph of our page visits for the month. We had a huge jump on the 26th of September and since then our daily visits have gone up as we’ve gotten residual coverage from around the world and people are spreading the word:

 

Daily Visits for the month of September

Handling the Load

Being at the top of Hacker News can draw a ton of traffic to your site. It sucks when you are getting great coverage and your site goes down. We recently moved all of our services to Heroku, and we are getting an insane bang for our buck.

Consider this: we’ve handled 25,000 users on a completely free Heroku package: 1 web dyno and a shared database. While we’ve recently migrated to the $50/mo PostgreSQL add-on, we’ve only had to do that now that we know Jetstrap is something people find useful.

During the two days we were on the front page, we didn’t have a single slow down or disruption in service, and were able to validate our product on a solid platform for $0.

Testing our Assumptions

One of the big benefits of the launch was we were able to test some of our ideas and get immediate feedback. The biggest of which was whether Jetstrap was a tool anyone needed and would pay for. We are happy to say that answer is “yes.” We’ve been absolutely blown away by the response of our users that have seen an immediate productivity increase with Jetstrap, or are now able to tackle more complex Bootstrap projects thanks to Jetstrap. They love what we’ve built.

Another great piece of feedback was on our price point. We were initially thinking we’d price the beta at $10/mo, but we didn’t think very hard about this. Patrick McKenzie told us pretty bluntly that this was insanely underpriced. Now we are thinking more in the $20-$30/mo range (any feedback on this?). Pricing is one of the absolute hardest things to get right, and we are glad we didn’t just rush into it without asking for help.

Finally, we tested whether an OAuth based login scheme would be more effective than a custom login requirement. While I don’t have data here, I think it was a huge success and I’m glad we started with social auth rather than yet-another-custom-login. That being said, despite the frictionless signup flow, there are those still who refuse to log in with 3rd party accounts. It’s a difficult balance.

Next Steps

We’ve got a big list of bugs and issues to address, and we realize our interface needs some work. Our plan is to fix the big issues, make the interface “tighter” and easier to use, and then start charging.  We’ve got a ton of crazy ideas for Jetstrap, and we know you’ll love them.

If you are interested in following our company, please follow us on twitter or subscribe to our blog feed. We’d also love to connect with other founders and help each other out.

Jetstrap is hiring a Coder Intern

Posted September 26, 2012 by Max Lynch

We’ve had a crazy week with a great response to our recent beta launch of Jetstrap, the fastest way to build Twitter Bootstrap interfaces. We are so excited about the potential of Jetstrap to help revolutionize the way websites get made in 2012 and beyond, and we want you to help make that dream a reality.

We are looking for a sharp programmer looking for an internship. As a Jetstrap intern you’ll experience

  • Shipping real code several times a day
  • A fast-paced programming environment focused on iteration speed and experimentation
  • Customer interaction and “growth-hacking”. Help find ways to really scale up our products.
  • A super laid back atmosphere with a team that hates following the rules.

If you are interested, please send us an email with something cool you’ve built or something you are proud of. We want self-starters who love building software and are eager to learn. This is a paid internship with a very flexible schedule and a lot of respect for your life outside of work (we  don’t care much for the 9-5).