Best Practices for using Bootstrap
I attended the "Making Peace With Twitter Bootstrap" presentation in html5dev con in early 2013.
Although not using Bootstrap at the time, I knew this would be useful at some stage. That "stage" has come.
Three key takeaways:
1. manage bloat by taking only what you need e.g. customizing your bootstrap download for your needs (avoiding bloat).
2. use your class names (see more below)
3. start the design with PSDs that are friendly to bootstrap.
Regarding #2, this is a great post referenced in the presentation which explains how to reduce your dependency on bootstrap :
- use the power of less to create your own classes combining bootstraps classes
- use bootstrap mixins to style grid rows and columns to avoid including "span", "row" and "offset" in your html (this is cool)
This comment is a good guide:
"In some cases this may be unnecessary; perhaps Twitter has already chosen the same name for a class that you would have used anyway. That's fine - go ahead and use it. The point isn't to go out of your way to avoid using Bootstrap's naming conventions, the point is to not have to use them or depend on them."
Re #3, this to me is really important, if the design follows boostrap cues then implementation will be easier.
Although not using Bootstrap at the time, I knew this would be useful at some stage. That "stage" has come.
Three key takeaways:
1. manage bloat by taking only what you need e.g. customizing your bootstrap download for your needs (avoiding bloat).
2. use your class names (see more below)
3. start the design with PSDs that are friendly to bootstrap.
Regarding #2, this is a great post referenced in the presentation which explains how to reduce your dependency on bootstrap :
- use the power of less to create your own classes combining bootstraps classes
- use bootstrap mixins to style grid rows and columns to avoid including "span", "row" and "offset" in your html (this is cool)
This comment is a good guide:
"In some cases this may be unnecessary; perhaps Twitter has already chosen the same name for a class that you would have used anyway. That's fine - go ahead and use it. The point isn't to go out of your way to avoid using Bootstrap's naming conventions, the point is to not have to use them or depend on them."
Re #3, this to me is really important, if the design follows boostrap cues then implementation will be easier.
Comments
Post a Comment