Bootstrap builder for busy developers | Hacker News Reader

Bootstrap builder for busy developers

bootstrapshuffle.com

235 pointsmacinjosh50 comments

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/

Thanks! You can modify content in the sources right now. But, as I said in one of a previous comments, we're working on online editing too. It will be available in the next week ( https://bootstrapshuffle.com/projects/uploads/settings1.png https://bootstrapshuffle.com/projects/uploads/settings2.png )

I saw that once I downloaded it I had some files I could edit, but that is what I like about Bootstrap Studio, its all self contained. So I'm looking forward to that update next week!

You will send out an email/newsletter to let everyone know, right?

Absolutely!

Ah - well this explains why every web site has looked mostly identical for the past five or six years.

Every Bootstrap Website Ever - http://adventurega.me/bootstrap/

That was awesome, thank you.

I'll second the recommendation for BoostStrapStudio .. It's a great starting point for very quick minimum viable products

FWIW, https://pingendo.com seems best in the category

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-...

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.

I won't argue here :) We'll just add it after deployment of components' settings in the next week (see one of my comments below).

Can you offer an insight as to why? Of all of the project / language tools / package managers I use NPM seems to offer me the least amount problems. Easy to install, fast and 99% of the time 'just works'.

I actually use Node for writing tools way more than other options because of how drama-free NPM is.

As I said, if you are building a template for Wordpress, you don't really need NPM to do it (you can of course, but should you ?).

There is a lot of upside/downside to NPM/Node, largly covered by smart people on the internet. The real question is "is NPM the simple solution to do X ?". And sometimes the answer is just "no, because it's over engineering the stuff".

The more I work in web development, the more I think we forgot the KISS rule to fancy tools.

To be fair, in my experience, even with less technically savvy clients I'm seeing less and less interest in WordPress. I'm well aware that it's still very, very popular with a lot of people, but in terms of where the work and the money is I just can't see it.

I did WordPress based work a few years ago but I can't see any realistic way I could be doing that now and making any reasonable amount of money, because the reality is that just about anyone can do it, and if a company is going to pay a developer they'd rather pay them to develop something better suited to what they're doing.

Personally, I try to avoid 3rd party dependencies whenever possible. When I do add them, I do so carefully.

On the projects (such as Electron apps) where I'm forced to use NPM, it just feels icky to watch the thousands of sub-dependencies flowing in, crapping up my project.

So for a green-field project, which this thing seems to target, it would require installing NPM just for this thing. And then I'd need to figure out how to uninstall it cleanly without wrecking the project.

But give me a single .html and .css file that I can add to a new project and yeah, this seems cool.

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!

Thank you! This is very valuable feedback (Not often you hear that you give too much for free ;))

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.

From today you don't have to :) Compiled HTML/CSS files are located in the public/ directory

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.

+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

Is this kind of what you're looking for? https://bootstrap.build/app

God, this is like the best webpage in the internet. Thanks a lot!

use SASS/Less and rebuild the css.

I don't know what the problem is with that ?

Info:

https://getbootstrap.com/docs/4.0/getting-started/theming/

File to adjust ( variables): https://github.com/twbs/bootstrap/blob/v4.2.1/scss/_variable...

Because that is a huge pain in the ass to set up.

I think front-end devs forget this part, because they always tend to have a giant complicated built tooling setup in place, so adding one more little thing seems easy.

But the default is to have no tooling whatsoever, so the thing you're proposing that you "don't know what the problem is with" is a process that has a step one that lies several steps before even "install Node on my dev machine".

I've gone through all that (specifically to change a color in bootstrap), and even now that I have it set up and runnable, I'd still use the grandparent's proposed $10/month web service if it existed.

Edit to add: ...and now that a sibling comment has pointed out the existence of bootstrap.build, I'll be signing up for a paid account.

> because they always tend to have a giant complicated built tooling setup in place

I know people must have their own setups that they use in GitHub somewhere. I have some, but I don't do lots of web dev and they're a bit shit.

Does anyone have any "default toolchains" in GitHub that they use to start new projects? Including SASS, webpack, common polyfills, etc.?

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.

Thats a very big if. And lifetime usually means lifetime of the offer not your lifetime or even the lifetime of the product. They are usually well intentioned but ultimately still a scam.

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.

Great comment, thank you!

We are working on deployment of the first thing (content editing).

Theme picker (choosing one of possible design system, like Material, Fluent etc) is on our road map.

3 i 4 is about library, which is and will be developed.

And the last one, Vue, for now is the further future :)

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/

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.

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.

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.

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.

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?

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.

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.

Sure, I agree; I was concerned about the pricing because the features seemed pretty limited. Some "killer" features I would love to see are editable components and themes, both of which the developers seem to be working upon. I would definitely consider buying with some improvements.

Hi! We're working on it. It will be available in the next week. Check if it is something you're looking for: https://bootstrapshuffle.com/projects/uploads/settings1.png https://bootstrapshuffle.com/projects/uploads/settings2.png

It'd be cool if this could integrate with e.g. Pixabay/Unsplash to allow users to easily mock up pages using stock imagery.

This looks great! I was thinking more on the lines of writing and adding custom components by myself. It'd help in cases which require more nuance or components like sidebars or parallax divs which the current library is missing. This is just a passing thought though.

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".

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!

This is awesome, congrats! I will definitely try this for my next project

This is great. Very similar to Designmodo's Startup Framework which is what I've used to build Rezi - https://rezi.io

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.

Great!

My current job is removing bootstrap from a universal React codebase. What a pile of crap.. But yeah, it keeps me busy!

Reply on news.ycombinator.com