Getting up to speed with Bootstrap

sneakyimp

I must update a very very old website that has gobs of ghastly html. Nested tables and transparent GIFs and stuff. It's over ten years old and from the dark days of IE 5 and 6. Front-end guys that I respect (and my partner) have told me that Boostrap is the way to go if I want my site to be mobile-friendly and to work on desktop, tablet, and phone. If I am mistaken about this, read no further and disabuse me. Ideally, by providing some magical solution about how to make my site look great on screens giant and tiny.

I've been looking at the http://getbootstrap.com/getting-started/Getting Started page over there and I see references to installation tools/frameworks (composer, npm, Bower, autoprefixer, etc) and I also see reference to less and sass without any explanation of what these are or how they are related. I also see mentions of compilation being used without any hint as to whether compilation is required and whether I must also get acquainted with grunt too. I will of course be searching around to find more info, but I want to check myself before I wreck myself -- at least to maybe be sure it's worth getting into this.

Any bootstrap fans around here? Can someone give me a quick-and-dirty explanation of what magic it ostensibly contains and how its use impacts one's software development work? How about examples of its supposed elegance?

Derokorian

I use bootstrap. I do not use npm, bower, grunt, etc... I do however use requirejs so I'm not sure if this will make sense. But for the css all I have is:

    {ResourceManager>AddStyle(bootstrap.min)}
    {ResourceManager>AddStyle(bootstrap-theme.min)}

Which just turns into standard link tags to include those css files. My requirejs config file looks like the below, this just makes sure bootstrap and modernizer are included in the correct order:

require.config({
    baseUrl: '/scripts',
    paths: {
        'angularjs': 'lib/angular-1.4.2.min',
        'jquery': 'lib/jquery-1.11.1.min',
        'bootstrap': 'lib/bootstrap-3.3.4.min',
        'modernizr': 'lib/modernizr-2.6.2-respond-1.1.0.min'
    },
    shim: {
        'angularjs': {
            exports: 'angular',
            deps: [
                'jquery',
                'bootstrap'
            ]
        },
        'bootstrap': {
            deps: [
                'jquery',
                'modernizr'
            ]
        }
    }
});

Sorry, I'm not very good at explaining much more unless you have a specific question I can answer...

An example of its magic is the navigation, on a desktop you get links at the top on my site, on a phone you get a little menu icon that then brings up these options. Also, the fact that you can build the theme you want using their site, you can be sure all the colors match up well... bootstrap has severely reduced the time it takes for me get a site looking acceptable.

Bonesnap

I'm not intending to turn you away from Bootstrap but we used it in a couple sites and found it too restricting. We just do our reactive/responsive code custom. I guess it would really depend on the site you're revitalizing.

sneakyimp

Derokorian;11050671 wrote:
I use bootstrap. I do not use npm, bower, grunt, etc... I do however use requirejs so I'm not sure if this will make sense.

Encouraging that you don't use the installer tools. Am I correct in understanding that to use Bootstrap, it is sufficient to link the CSS and Javascript and nothing more? Or is there more to it than that?

Derokorian;11050671 wrote:
this just makes sure bootstrap and modernizer are included in the correct order

Any particular reason you need Bootstrap and Modernizr?

Derokorian;11050671 wrote:
Sorry, I'm not very good at explaining much more unless you have a specific question I can answer...

Is any compilation of Javascript necessary?

Aside from simply getting CSS and JS into your page, how is it controlled? I understand that simply assigning classes to certain page elements is how one begins to take advantage of it. Perhaps a common usage example that results in great benefits?

Derokorian;11050671 wrote:
An example of its magic is the navigation, on a desktop you get links at the top on my site, on a phone you get a little menu icon that then brings up these options. Also, the fact that you can build the theme you want using their site, you can be sure all the colors match up well... bootstrap has severely reduced the time it takes for me get a site looking acceptable.

OK this sounds brilliant. I've been agonizing a bit over extensive nested menus in my old site. I expect this is one of the first things I must reckon with.

Derokorian

sneakyimp;11050681 wrote:
Encouraging that you don't use the installer tools. Am I correct in understanding that to use Bootstrap, it is sufficient to link the CSS and Javascript and nothing more? Or is there more to it than that?

Yeah, that's it.

sneakyimp;11050681 wrote:
Any particular reason you need Bootstrap and Modernizr?

Just the build of bootstrap and related offerings I use. When you go to getbootstrap.com and click on customize you can check only the things you want. What I use included modernizr, that's about all I know. I know bootstrap + modernizr makes my site work well in multiple environments I don't think much beyond that. Smart guys did the work for me 😛

sneakyimp;11050681 wrote:
Is any compilation of Javascript necessary?

Necessary? Definitely not, but for a production website its good to minimize the size and number of requests requires - especially for mobile.

sneakyimp;11050681 wrote:
Aside from simply getting CSS and JS into your page, how is it controlled? I understand that simply assigning classes to certain page elements is how one begins to take advantage of it. Perhaps a common usage example that results in great benefits?

Use the css defined on getbootstrap.com/css for whatever you need from layout to buttons and in between. I used http://www.initializr.com/ and selected the bootstrap pre-configuration. It gave me a great starting point for using all the things together.

sneakyimp;11050681 wrote:
OK this sounds brilliant. I've been agonizing a bit over extensive nested menus in my old site. I expect this is one of the first things I must reckon with.

yeah building a good menu system is hard, but bootstrap can help -> start with http://getbootstrap.com/components/#nav and just read down. It should give you an idea what you can do for it. The hardest part with bootstrap is how much it offers - focus on using it to get the most out of something like your navigation, then make a form better.. don't try to figure out how to use it globally, its too much unless you have a splash page with no user interaction 😛

sneakyimp

Derokorian;11050687 wrote:
Yeah, that's it.

Nice.

Derokorian;11050687 wrote:
When you go to getbootstrap.com and click on customize you can check only the things you want.

I've been looking at this and continue to feel frustrated that this page is targetted for folks who clearly already have knowledge of the workings of bootstrap. It's sort of like going to some fancy restaurant where they don't bother to describe the menu items in English.

Derokorian;11050687 wrote:
Necessary? Definitely not, but for a production website its good to minimize the size and number of requests requires - especially for mobile.

Seems to me that minifying a JS file or CSS file might reduce its size as much as 60% or so (using Jquery as an example) and it's great to get down from the 250K file size of jquery 2.1.3, but I also worry about complicated client-side frameworks that seem to render very sluggishly. Like you have to wait for all the JS and CSS to load before the page starts to render and then if you re-orient your phone, you get this laggy and sluggish response.

Derokorian;11050687 wrote:
Use the css defined on getbootstrap.com/css for whatever you need from layout to buttons and in between. I used http://www.initializr.com/ and selected the bootstrap pre-configuration. It gave me a great starting point for using all the things together.

OK this looks like a good idea, but I am once again frustrated by the insider knowledge assumed:

generates templates based on HTML5 Boilerplate

Now I've also heard of boilerplate, but have no idea how this fits in with bootstrap, modernizr (etc. etc. etc.).

Also, what do you mean by 'use the CSS?' Is linking the CSS template not enough? Should I be assigning classes to my DIV and P and FORM tags? Is there any sort of primer about some of the most important CSS classes?

Derokorian;11050687 wrote:
yeah building a good menu system is hard, but bootstrap can help -> start with http://getbootstrap.com/components/#nav and just read down.

Thanks for this tip and link. I think specific examples are important at this early stage for me.