top | item 18821854

Bootstrap builder for busy developers

235 points| macinjosh | 7 years ago |bootstrapshuffle.com

50 comments

order
[+] jermaustin1|7 years ago|reply
This is kind of like Bootstrap Studio [1], which I use all the time. The only difference is that Bootstrap Studio is a bootstrap project IDE. It has components, but you can also edit the content, add your own HTML, export, hosted preview, local preview, its not a service, and ALSO has a lifetime price of only $60.

That said, I think the quality of your shuffle components are better than most of the components on Bootstrap Studio, so I bought it.

All I'd really like to see is the ability to edit content. If I'm doing a prototype for a client, I can't have everything saying Pied Piper or New Internet.

1: https://bootstrapstudio.io/

[+] commandlinefan|7 years ago|reply
Ah - well this explains why every web site has looked mostly identical for the past five or six years.
[+] redorb|7 years ago|reply
I'll second the recommendation for BoostStrapStudio .. It's a great starting point for very quick minimum viable products
[+] kemyd|7 years ago|reply
Hi! It’s author here. Thank you all for your kind words! To explain why you have to run a npm command to run the downloaded project: We are developing this tool in order to speed up the work of the programmers who, in my experience, prefer to implement the final modifications in their favourite IDEs anyway. The objective of Bootstrap Shuffle is to cut the time spent on the initial stages of a project while perfecting the details is moved to IDE. I have described the philosophy I followed in the process of creating this tool in this post: https://bootstrapshuffle.com/blog/2018/12/bootstrap-builder-...
[+] Phenix88be|7 years ago|reply
I understand why you did it that way. But not every one use NPM (I try to avoid it every time I can). If you are doing a Wordpress template your tool is usefull, but not NPM :).

Maybe it's possible to add a "download build" button.

[+] fabricexpert|7 years ago|reply
This is great! I think you're offering too much content for free and not enough features for the paid version - once I have built a basic page with your builder and exported it it's not too difficult to quickly tweak to implement most of your paid content.

I would also be more inclined to pay if you had multiple export options, e.g. pure html/css, different templating languages, scss, sass, react etc. Then I could see myself using this in every project going forward for sure. You could also expand into hosting directly and collecting leads.

I created a page, then clicked purchase and lost all my content, which was kind of annoying.

Setting up a bootstrap home page is surprisingly involved so this is really neat!

[+] kemyd|7 years ago|reply
Thank you! This is very valuable feedback (Not often you hear that you give too much for free ;))
[+] Phenix88be|7 years ago|reply
Look really great and easy to use, but all I want is an HTML + SASS/CSS file at the end, I don't really want to fire some NPM command to compile the HTML.
[+] kemyd|7 years ago|reply
From today you don't have to :) Compiled HTML/CSS files are located in the public/ directory
[+] botostrapp|7 years ago|reply
Great job! Other than the price, you did a wonderful job. The only hesitation is the price since I can get a theme from Themeforest for $18, this would be my second choice after that. I think if you lower the price a bit more, you will be able to net a lot more customers. Especially those buying bootstrap themes from Themeforest.
[+] ccleve|7 years ago|reply
Disagree. $60 is nothing if this tool saves me hours of time. The developers need to make sure they make enough money to keep the project going.

I like this project way better than Bootstrap Studio or any of the others I've tried.

Some suggestions:

1. As others have mentioned, HTML editing is pretty important. I'd like to see my actual content when picking a layout.

2. Would also like to see a theme picker, so I can cycle through combinations of colors/fonts/etc. and see what looks best. I know I can do that under Change Styles, but I haven't the artistic skills to pick individual values and have them look good.

3. Add a search box component.

4. I don't see a way to add a sidebar menu on the left and have a custom content area on the right. It would be nice to have some way to nest components. This is important because I would probably use this mostly for building admin interfaces and dashboards.

5. Someday, in the future, and maybe this is well beyond scope, I'd like to have Vue components so I could just hook them all together and they just work. I expect that that would be a massive undertaking, though.

#1 & #2 are pretty important. The rest -- I don't think they're critical to having a commercially successful project.

[+] INTPenis|7 years ago|reply
It is a lifetime license though. I'm yet another budding web developer and I could imagine paying 60USD for a lifetime license if I'm sure the tool will stick around and continue to be developed.
[+] reustle|7 years ago|reply
+1 I've often wanted to change one or two default values in bootstrap, such as the primary color, but can't be bothered to pull it locally and rebuild it. I'm not aware of any sites that do this for me, would happily pay $5 or $10 once for a web tool where I could make these changes (just list all build variables) and save configs
[+] projectramo|7 years ago|reply
Is anyone familiar with the difference between this and all the other bootstrap editors out there?

bootply.com, brix.io, pinegrow.com, layitout

(And of course the ones that are no longer with us: jetstrap and divshot)

edit: Actually, there are apparently a lot more I didn't know about: https://cssauthor.com/bootstrap-editors/

[+] NicoJuicy|7 years ago|reply
This is based on some things of codecanyon. Tried to do it also, but had some problems with the new bootstrap version and components. The export component i also wanted to link to a github and/or something else ( don't remember it exactly).

They also seem to have left out the "edit html" component, that was available in it.

I wanted an "import and export" feature or something to sync the projects. That was the most useful addition to the project.

Didn't finish it, it looks like they did a better integration ( it's 90% the same though), but they left some features out, which probably made it a lot easier.

I hated the structure of the html components with a screenshot in it. When updating the components it was a lot of "manual" hassle ( you can see the *.png files in the components.js link included below)

Edit: Found the original - https://codecanyon.net/item/sitebuilder-lite-dragdrop-site-b... This project has a changed layout ( bootstrap based) but the components work exactly the same way. Eg. https://bootstrapshuffle.com/components/js/components.js?v=a... is loading all the preconfigured html components per section ( footer, header, navigation, ...). I do think it was called elements.json though.

When i tried the project, i bought an update of the bootstrap v3 or v4 elements. But there were some issues with it ( wrong files and mismatched components) - I think it was > 1 year ago.

At least, i would have integrated angular for the builder. But they seem to have used the default/bought builder.js script and put a pricing page in front of it. This seems a doable project for 1 developer for < 2 weeks.

[+] vark90|7 years ago|reply
Man I wish I knew about this when I started my last pet project. Just finished the first major milestone, huge part of which was to create a basic bootstrap interface. This would've saved me a lot of time and effort, I'm really bad at markup and UI/UX.
[+] sylvain_|7 years ago|reply
This is really a great tool! I really see using it, first to prototype quickly (wireframing) and then to customize it when I want to produce the real content. I'm on a Rails stack so any way to produce HTML or SLIM would be a great addition.
[+] ramon|7 years ago|reply
Also wanted to point out that I liked that you have the built process into your project that is what most people look for and you already have that solved so it's great I think it's perfect the way it's.
[+] kumarm|7 years ago|reply
Looks great. Why not add call to action for apps (Download for iPhone and Android Buttons) to make it easy to build Mobile App Landing Pages?
[+] mogambo1|7 years ago|reply
This looks great although the pricing is a little too steep. Also it'd be great if I had the ability to add custom elements to the page.
[+] dbg31415|7 years ago|reply
It's similar in price to Jetstrap, and Jetstrap went under. I think $6 / month or $60 / forever seems fair -- and honestly I'd be worried it's not enough money.

When I use a tool for work, I want them to charge enough to stay in business so they can 1) continue to exist (and I don't have to look for a replacement), and 2) continue to make improvements.

I can think of a hundred tools that were cheap, but died or got stagnant or let bugs fester because they couldn't afford to hire devs.

[+] ramon|7 years ago|reply
If you give people access to the project to download it people will feel safer to pay for the lifetime license. I don't think anyone would actually go on and make their own based on yours but it gives them the safety of "even if the site goes down I can put it backup and running somewhere else and keep on using it".
[+] CianG|7 years ago|reply
This is fantastic! As a prominent backend developer and someone who loves working on side projects, but hasn't got a design side for frontend development I can see myself using this for all of my own projects going forward!
[+] ksahin|7 years ago|reply
This is awesome, congrats! I will definitely try this for my next project
[+] jacob_rezi|7 years ago|reply
This is great. Very similar to Designmodo's Startup Framework which is what I've used to build Rezi - https://rezi.io
[+] AbuAssar|7 years ago|reply
very nice, reminds me of those wordpress templates with built-in customizers.

just one concern is that I want to download the source html file not the pug template one.

[+] bespoken|7 years ago|reply
My current job is removing bootstrap from a universal React codebase. What a pile of crap.. But yeah, it keeps me busy!