Bootply – Drag & Drop Bootstrap Editor
The world is going gadget crazy. From buying groceries to designing projects to making travel bookings, everything can be done with a few taps on your mobile device or tablet. No wonder web-apps and websites are “the thing”. But as users of web-apps and websites, do we pay attention to how intricately and closely they’re built? Do we ponder on how many hours of work, research, monitoring, and testing goes into building the perfect website or web-app that you and I can use to make our lives simpler each day? Not really.
Well, application developers really toil to build those sleek, responsive, marvels of technology that we call “apps” and are happy to use. How great it would be if someone did something really nice for those application developers? Something that would ease their workload and simplify the whole application building process? Actually, that’s exactly what the makers of BootPly have done. They’ve transformed the way web-apps are built by utilizing one of the most popular frontend frameworks, Bootstrap.
Sweet, isn’t it!
BootPly – The fun Bootstrap editor and builder
For those of you who are new to the word “Bootstrap”, it is a free and open-source frontend web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Although Bootstrap is gaining immense popularity owing to its features, there is a slight learning curve attached to it and beginners might find it a tad uphill.
But BootPly is what makes working with Bootstrap fun. It lets you play around with Bootstrap while allowing developers to leverage their code repository, snippets, examples, and templates. The platform offers Bootstrap developers a drag-and-drop visual editor which they can use to rapidly design and build web-apps. Moreover, it is integrated with other popular Bootstrap plugins, micro-libraries and frameworks like FontAwesome, Bootstrap Select, Angular JS, Isotope, Google Maps, and others.
Some of the best features of BootPly are:
- Facilitates hand-coding with a JavaScript HTML and CSS editor
- Includes a visual drag-and-drop interface builder for rapid prototyping
- Gives access to 1000’s of Bootstrap examples, free themes, templates and layouts
- Provides a searchable and shareable code repository
- Enables you to mingle with a reputation-based collaborative community
There’s nothing flashy about BootPly and that’s one of its strongest points. It’s simple, to-the-point, and efficient.
Using BootPly
There are a number of entry points into BootPly. We’ll give you a sneak peak into each one of them. Land on the tool’s homepage and you’ll find the following clickable options:
- Hand-coding
- Drag-and-drop
- Play Now
- A button at the bottom called “Get Started with BootPly Now”
- A link at the top to “Boot Bundle”
Hand-coding, Play Now, and “Get Started” redirect you to the same page – a screen with multiple panels to start coding. There are dedicated panels for JavaScript and CSS and one for the main code. You’ll find a preview panel at the bottom and helpful links in the left sidebar. Start writing code using the options to use Base CSS, Components, Icons, etc through various drop-downs. Once your code is ready, you can execute it using the “Run” button in the file menu. The result of the execution will be displayed within the Preview panel. You can also “Save” your code temporarily using the save button in the file menu but to save the script for good, you’ll need to Register.
To register, click on the “Login” button on the top-right corner of the screen. Provide required details and sign up. The tool doesn’t ask for any credit information at signing up time. At any point of time if you feel the working panels are too small to code comfortably, you can switch your viewing mode to ‘Full Screen’ using a button for the purpose given just below the CSS panel. Similarly, to view things as they would appear on a mobile / handheld, use the appropriate ‘Smartphone / Mobile device preview’ button.
You can code, execute, test, delete, re-code, correct, and repeat everything numerous times with BootPly. No strings attached. That’s why it’s called the Bootstrap playground. However, once your final code is ready and you wish to save it to your machine through a convenient “Download” button given below the CSS panel, you’ll need to purchase an Upgraded subscription of the tool.
Another important aspect to take note of is that to simply code, execute, and test you don’t need to login. However, to use BootPly’s drag-and-drop visual editor, you do. So in effect, to see the real power of the tool you must register.
Drag & drop #Bootstrap components with @BootPly bootply.com/ via @supermonitoring
The Ups and Downs
Needless to say, there are several plus points with the tool. And honestly, it was quite hard for us to find a fault with it. As a matter of fact, it makes app development using Bootstrap so much fun that even if there was a con, we’d probably ignore it.
Final Words
We loved BootPly! If you’re a web designer who invests hours of their time into application and website development, you should definitely check it out. You’ll be able to use most of the tool’s features for free which makes it all the more awesome.
