9 ms·

Twitter Bootstrap Generator

247 points by bravolima 15y ago

Griever 15y ago
Excellent stuff! You may want to keep an eye out as Bootstrap 2 is probably going to come out any day now if the Issues tracker on Github is any indicator.
andrewhillman 15y ago
This is great. You should add a color picker to the text field boxes.
- j45 15y ago
  Cool idea, in addition to the color picker you might want to let it change the current page live via DOM manipulation so you can see what it will look like before you download it.
princeverma 15y ago
Great. If you can add customization of top bar, it would be awesome. Thanks for creating this tool.
cfontes 15y ago
Very nice, being able to see the CSS applied to some generic HTML before downloading would be cool too! Thanks for the nice work.
- tstegart 15y ago
  Definitely! And also maybe include the base HTML file.
clyfe 15y ago
SASS & LESS formats maybe?
Periodic 15y ago
After playing around with Bootstrap, I realized what a huge boon it was to my projects (programmer lacking in design skills). One thing I like about it is I don't have to pick colors. It does the border, button, text, and nav-bar colors for me. I don't trust myself to pick my own colors! I would really like a way to preview or be able to pick some other colors other people have made. Maybe you could expose a perma-link to a set of config options so they are easy to share. I'm also amazed at how often I spot it now. Seems like it's everywhere.
- pault 15y ago
  Agreed, I use it in all my projects now and it is a huge time saver. If nothing else, not having to futz around with form elements more than makes up for the added overhead.
- ineedtosleep 15y ago
  I second the entire comment -- well, excluding the programmer lacking design skills. As a developer with a decent amount of design skills, what I love is that their defaults are extremely easy to customise and extend where necessary. > I'm also amazed at how often I spot it now. Seems like it's everywhere. I also see it everywhere, which is the main impetus for me to come up with a completely customised version that reflects my design style. Hopefully more people do the same instead of just using it straight off of a clone.
  - pault 15y ago
    I suspect we will see a wave of "skins" released for it soon.
    - alabut 15y ago
      I'm creating a library of design patterns for BS, so ping me if you want to be included. EDIT: I'm sorry I don't have a signup list yet! Just email me at my HN username at gmail and I'll send out an alert that way.
keeptrying 15y ago
Awesome job!
mdda 15y ago
"No ending semi-colon is required." seems like a detail that could be handled behind the scenes.
pault 15y ago
This is nice, but why not just use the variables in variables.less? That's what they are there for.
peterhunt 15y ago
I would like a pre-set color palette option
bravolima 15y ago
just to clarify, I didn't create the generator. I saw it on the bootstrap google group: http://groups.google.com/group/twitter-bootstrap/browse_thread/thread/917d87806e1c96e0 http://groups.google.com/group/twitter-bootstrap/browse_thre... The author wrote it in one evening which makes it even more impressive.
rmason 15y ago
There's an entire ecosystem coalescing around Bootstrap and I love it. It's the framework for the coders who are design challenged. I know more and more people like me who are incorporating it in every project they build. In time it will raise the minimum level design bar for the entire web.
fourspace 15y ago
This is pretty cool. That said, a Bootstrap generator that generates LESS, which in turn generates CSS? Seems overengineered. Almost all of these variables are in variables.less anyway. I'd hope that anyone setting up Bootstrap has the skills to edit this one file. https://github.com/twitter/bootstrap/blob/master/lib/variables.less https://github.com/twitter/bootstrap/blob/master/lib/variabl...
- politician 15y ago
  Isn't that a bit like saying your refactoring IDE which generates some high-level language which in turn generates machine code is over-engineered?
jsavimbi 15y ago
I've found Bootstrap to be best employed as a basic framework for what I would call working applications where the user is required to perform many repetitive tasks on the application throughout their work day. It lends itself very well for dashboards, admin consoles, backoffice and reporting tools, etc. And Twitter, of course. I would use the most very basic scaffolding (containers, rows and spans) for a marketing site, but it's also extremely helpful for producing working wireframes. To whit, over the past two weeks I completely redid a support application using Bootstrap and my output CSS totals ~250 lines, whereas before it was somewhere around ~2600 when it was all said and done. My current .js file has two functions in it. I think we've found a winner here. Another benefit is that a developer not well-versed in the front-end is easily able to build a basic, functioning front-end to an app with small learning curve, and I'm going to assume that they'll be able to work on an app that already has it. Or so I hope, because after twelve years, I'm a little sick and tired of writing said code.
pgroves 15y ago
I don't get it. What does this tool accomplish that isn't accomplished by putting the collected color definitions in a second style sheet and "cascading" it with the standard bootstrap.css? (I'm really asking not being sarcastic.)
- tlack 15y ago
  A lot of people can't/don't use LESS, which means that a lot of precompiled rules have to be overriden in a tiresome way. For instance if you change the grid sizes you have to adjust a couple different CSS attributes. This tool generates everything in a precomputed easy to digest manner.
vessenes 15y ago
Source Code would be nice. I wish to hack it a bit.
sjp3 15y ago
Using Rails and Twitter Bootstrap? Check out this extraction I put together from a personal project that makes it super easy to generate Bootstrap-style forms: https://github.com/potenza/form-bootstrap https://github.com/potenza/form-bootstrap
nicpottier 15y ago
What? No top bar customization? That is the biggest giveaway for Bootstrap and the easiest way to differentiate your site. Once you add that then you'll have something super useful. I've customized the top bar color for a few different sites and it is a bit painful. (there was an open bug about making it easier, haven't checked it lately though)
radagaisus 15y ago
a nice addition would be a disable button. For example, I never use the grids. Otherwise, great work!
sdoowpilihp 15y ago
A huge benefit to this tool would be instant change feedback. Specifically, given that this site uses bootstrap, it would be nice to see the changes you put in to the various input fields change the css settings for the editor itself.
latchkey 15y ago
If you can afford to be working with a bit of a moving target, don't waste your time with the current version of BS. The 2.0-wip branch is vastly more improved.
josscrowcroft 15y ago
This is awesome! But I want to be able to save my preferences on it, either by permalinking them (useful-ish) OR in localStorage (better) or both (whoa yeah party) So it could have a 'save to localStorage' button, then a list of your previous saved configurations in a side panel? Excellent work!
- josscrowcroft 15y ago
  Also - is the bootstrap generator on github?
njn 15y ago
why
sopooneo 15y ago
I am really not trying to stir a pot here. I am truly looking to learn. But the whole idea of bootstrap seems to go against other stuff I used to read about how to use css. I understood that your markup should be semantic and detached from you layout and style as much as possible. But when you use the bootstrap grid to arrange your page, you are absolutely mixing content and layout. For me, I always thought actually fully separating markup and layout/styling was a pipe dream, and unless you're going to absolutely fill your page with id's and classes (a la zen garden) and spend enormous time tweaking things, then a major overhaul will require changing markup anyway, so why bother? But that seemed to fly in the face of advice I was reading. But using a grid seems to fly in the face of that old advice too. So what's the deal? Do people no longer think markup and styling/layout should be separated? Or was I just misinterpreting what I read in the past?
- cstejerean 15y ago
  It's still a good idea to separate markup and styling. In the interest of getting things that look decent out the door quickly it's often necessary to postpone ideological purity. If your idea proves successful then over time you will need to evolve away from bootstrap anyway, and you can get cleaner markup and style along the way. If your idea proves unsuccessful, good thing you didn't waste too much time on a pure semantic markup.
- mmahemoff 15y ago
  Right - grids are basically table-based layout with credibility. Still, the clue is in the name. "Bootstrap" your app, then faff it into pure web standards over time, should the app prove popular. Less time wasted on an app you don't know will fly.
simonhamp 15y ago
Great work Martin! Such a simple tool that makes Bootstrap more available to everyone - not just those of blessed with Less skills ;) If you do build anything using Bootstrap, please feel free to submit to Built With Bootstrap: http://builtwithbootstrap.com/submit http://builtwithbootstrap.com/submit

247 points by bravolima 15y ago

Excellent stuff! You may want to keep an eye out as Bootstrap 2 is probably going to come out any day now if the Issues tracker on Github is any indicator.

andrewhillman 15y ago

This is great. You should add a color picker to the text field boxes.

j45 15y ago
Cool idea, in addition to the color picker you might want to let it change the current page live via DOM manipulation so you can see what it will look like before you download it.

princeverma 15y ago

Great. If you can add customization of top bar, it would be awesome. Thanks for creating this tool.

cfontes 15y ago

Very nice, being able to see the CSS applied to some generic HTML before downloading would be cool too! Thanks for the nice work.

tstegart 15y ago
Definitely! And also maybe include the base HTML file.

clyfe 15y ago

SASS & LESS formats maybe?

Periodic 15y ago

After playing around with Bootstrap, I realized what a huge boon it was to my projects (programmer lacking in design skills). One thing I like about it is I don't have to pick colors. It does the border, button, text, and nav-bar colors for me. I don't trust myself to pick my own colors! I would really like a way to preview or be able to pick some other colors other people have made. Maybe you could expose a perma-link to a set of config options so they are easy to share. I'm also amazed at how often I spot it now. Seems like it's everywhere.

pault 15y ago
Agreed, I use it in all my projects now and it is a huge time saver. If nothing else, not having to futz around with form elements more than makes up for the added overhead.
ineedtosleep 15y ago
I second the entire comment -- well, excluding the programmer lacking design skills. As a developer with a decent amount of design skills, what I love is that their defaults are extremely easy to customise and extend where necessary. > I'm also amazed at how often I spot it now. Seems like it's everywhere. I also see it everywhere, which is the main impetus for me to come up with a completely customised version that reflects my design style. Hopefully more people do the same instead of just using it straight off of a clone.
- pault 15y ago
  I suspect we will see a wave of "skins" released for it soon.
  - alabut 15y ago
    I'm creating a library of design patterns for BS, so ping me if you want to be included. EDIT: I'm sorry I don't have a signup list yet! Just email me at my HN username at gmail and I'll send out an alert that way.

keeptrying 15y ago

Awesome job!

mdda 15y ago

"No ending semi-colon is required." seems like a detail that could be handled behind the scenes.

pault 15y ago

This is nice, but why not just use the variables in variables.less? That's what they are there for.

peterhunt 15y ago

I would like a pre-set color palette option

bravolima 15y ago

just to clarify, I didn't create the generator. I saw it on the bootstrap google group: http://groups.google.com/group/twitter-bootstrap/browse_thread/thread/917d87806e1c96e0 http://groups.google.com/group/twitter-bootstrap/browse_thre... The author wrote it in one evening which makes it even more impressive.

rmason 15y ago

There's an entire ecosystem coalescing around Bootstrap and I love it. It's the framework for the coders who are design challenged. I know more and more people like me who are incorporating it in every project they build. In time it will raise the minimum level design bar for the entire web.

fourspace 15y ago

This is pretty cool. That said, a Bootstrap generator that generates LESS, which in turn generates CSS? Seems overengineered. Almost all of these variables are in variables.less anyway. I'd hope that anyone setting up Bootstrap has the skills to edit this one file. https://github.com/twitter/bootstrap/blob/master/lib/variables.less https://github.com/twitter/bootstrap/blob/master/lib/variabl...

politician 15y ago
Isn't that a bit like saying your refactoring IDE which generates some high-level language which in turn generates machine code is over-engineered?

jsavimbi 15y ago

I've found Bootstrap to be best employed as a basic framework for what I would call working applications where the user is required to perform many repetitive tasks on the application throughout their work day. It lends itself very well for dashboards, admin consoles, backoffice and reporting tools, etc. And Twitter, of course. I would use the most very basic scaffolding (containers, rows and spans) for a marketing site, but it's also extremely helpful for producing working wireframes. To whit, over the past two weeks I completely redid a support application using Bootstrap and my output CSS totals ~250 lines, whereas before it was somewhere around ~2600 when it was all said and done. My current .js file has two functions in it. I think we've found a winner here. Another benefit is that a developer not well-versed in the front-end is easily able to build a basic, functioning front-end to an app with small learning curve, and I'm going to assume that they'll be able to work on an app that already has it. Or so I hope, because after twelve years, I'm a little sick and tired of writing said code.

pgroves 15y ago

I don't get it. What does this tool accomplish that isn't accomplished by putting the collected color definitions in a second style sheet and "cascading" it with the standard bootstrap.css? (I'm really asking not being sarcastic.)

tlack 15y ago
A lot of people can't/don't use LESS, which means that a lot of precompiled rules have to be overriden in a tiresome way. For instance if you change the grid sizes you have to adjust a couple different CSS attributes. This tool generates everything in a precomputed easy to digest manner.

vessenes 15y ago

Source Code would be nice. I wish to hack it a bit.

sjp3 15y ago

Using Rails and Twitter Bootstrap? Check out this extraction I put together from a personal project that makes it super easy to generate Bootstrap-style forms: https://github.com/potenza/form-bootstrap https://github.com/potenza/form-bootstrap

nicpottier 15y ago

What? No top bar customization? That is the biggest giveaway for Bootstrap and the easiest way to differentiate your site. Once you add that then you'll have something super useful. I've customized the top bar color for a few different sites and it is a bit painful. (there was an open bug about making it easier, haven't checked it lately though)

radagaisus 15y ago

a nice addition would be a disable button. For example, I never use the grids. Otherwise, great work!

sdoowpilihp 15y ago

A huge benefit to this tool would be instant change feedback. Specifically, given that this site uses bootstrap, it would be nice to see the changes you put in to the various input fields change the css settings for the editor itself.

latchkey 15y ago

If you can afford to be working with a bit of a moving target, don't waste your time with the current version of BS. The 2.0-wip branch is vastly more improved.

josscrowcroft 15y ago

This is awesome! But I want to be able to save my preferences on it, either by permalinking them (useful-ish) OR in localStorage (better) or both (whoa yeah party) So it could have a 'save to localStorage' button, then a list of your previous saved configurations in a side panel? Excellent work!

josscrowcroft 15y ago
Also - is the bootstrap generator on github?

njn 15y ago

why

sopooneo 15y ago

I am really not trying to stir a pot here. I am truly looking to learn. But the whole idea of bootstrap seems to go against other stuff I used to read about how to use css. I understood that your markup should be semantic and detached from you layout and style as much as possible. But when you use the bootstrap grid to arrange your page, you are absolutely mixing content and layout. For me, I always thought actually fully separating markup and layout/styling was a pipe dream, and unless you're going to absolutely fill your page with id's and classes (a la zen garden) and spend enormous time tweaking things, then a major overhaul will require changing markup anyway, so why bother? But that seemed to fly in the face of advice I was reading. But using a grid seems to fly in the face of that old advice too. So what's the deal? Do people no longer think markup and styling/layout should be separated? Or was I just misinterpreting what I read in the past?

cstejerean 15y ago
It's still a good idea to separate markup and styling. In the interest of getting things that look decent out the door quickly it's often necessary to postpone ideological purity. If your idea proves successful then over time you will need to evolve away from bootstrap anyway, and you can get cleaner markup and style along the way. If your idea proves unsuccessful, good thing you didn't waste too much time on a pure semantic markup.
mmahemoff 15y ago
Right - grids are basically table-based layout with credibility. Still, the clue is in the name. "Bootstrap" your app, then faff it into pure web standards over time, should the app prove popular. Less time wasted on an app you don't know will fly.

simonhamp 15y ago

Great work Martin! Such a simple tool that makes Bootstrap more available to everyone - not just those of blessed with Less skills ;) If you do build anything using Bootstrap, please feel free to submit to Built With Bootstrap: http://builtwithbootstrap.com/submit http://builtwithbootstrap.com/submit