web development

All posts tagged web development

Bootstrap 3 Change Notes

blurred code

After spending the last two days working with Bootstrap 3 I wanted to jot down a few of the things I found in case I forget them tomorrow or to help anyone else running into similar issues.

Forms, Grid System, and Screen Resolutions

We have converted our forms from form-horizontal to the default Bootstrap form.  We think it looks better with the new update.

Old code:

New code:

Cleaned up a bit as we had that extra label tag on our old code which was unnecessary as Django adds the label tag correctly on render.  One of the biggest thing to notice is that the span4 tag changed to col-4.  Bootstrap is now responsive by design and mobile first which means that the col- tags are meant for display on a mobile device but are the default when no other tags are found.  This gives us the ability to make pages and forms that appear differently depending on screen resolution.  There are three tags for column spacing, col- for mobile devices, col-sm- for tablet screens, and col-lg- for desktops.  To use the various screen sizes just add on more tags.  The sizes will appear when viewed on different resolutions.  Making the above example take up the whole row on a mobile device and only a third of the screen on a desktop would change the code like so:

Easy enough right?  I thought so too!  Not all of us will have a mobile device or tablet ready to go to test our site on different resolutions.  You can always just resize your window to see what happens but that is annoying too.  Luckily, we found a great site that will take any URL and display the page at any screen resolution and has a lot of built-in resolutions for common devices called Screenfly.  This even works for pages hosted locally.

Modals

Modals had a lot of changes made to them which made us redo all of our current modals because they were all broken.  Example:

Old code:

New code:

A few things to note, the first of which is that the old code was using JavaScript to load in the contents of a page into the modal. Turns our Bootstrap did this already if you just provided the link in the href.  Now we know.  The hide class has been removed.  When the modal is opened Bootstrap adds the modal-open class to the body which stops scrolling on the page and limits it to the modal only.  Pretty awesome.  Make sure your JavaScript files are being loaded at the bottom of your HTML pages to ensure this works correctly.

One thing we have been trying to do is put all Save buttons on the right side of our pages and modals.  Using the Bootstrap pull-right class floats objects to the right.  The problem with this is the modal-content div will not grow with floated objects.  More specifically no outer div will grow with floated elements by default.  To get around this you simply need to add a bit of CSS.

This works perfectly for any modal with a floated right button at the bottom but if there isn’t anything floated at the very bottom of the modal this will add an extra 15px to the padding, which we don’t want. To fix that just make that CSS a bit more specific by using id’s on the modals you want to specifically fix.  I have made a jsFiddle which demonstrates exactly what I am talking about.

Closing

That’s it so far.  Most of that took a really long time to figure out.  Bootstrap dropped their typeahead JavaScript in favor of typeahead.js which I’m still trying to figure out fully.  I’ve got it to work but there are some really weird things happening that I think have to do with Bootstrap 3.  The biggest problem we are running into is that Bootstrap 3 is so new no one has written much about how to fix little problems like the ones we’ve had so far and other utilities haven’t updated to fully support it yet so we soldier on.

Let me know if you have any other tips or if you’ve had anything that has tripped you up so far.

EDIT – 8/1/13

Bootstrap dropped support for their own bootstrap-typeahead.js and has instead suggested typeahead.js by Twitter.  One of the biggest problems with that right now is typeahead.js does not support Bootstrap 3 and so the CSS is messed up.  Here is an example I wrote up quickly to demonstrate it and I have commented on their GitHub project page on the issue of Bootstrap 3 CSS problems..  They say they are aware of it and the CSS is on their TODO list.  Here’s to hoping it happens quickly!

Django Dynamic ModelForm Using Closure

At my job we are currently undergoing a total rewrite of their old web-based data entry system.  It’s written in Django and works pretty-alright we are just going to make it better.  When it was first written the company was small and very few tests were being done.  This caused the initial design to lack foresight into the growth of the project.  Another problem with this current system is that it was an almost direct port of their old Microsoft Access version they had been running before.  The company is international and a web based system is much better and easier for the employees to use but wasn’t designed with growth in mind.

With a better understanding of how the systemis being used and what the users wanted it to do we have been in the beginning phases of development for about three weeks now.  Parts of the site are ready to go live within a week but the major parts are left.

One obstacle that was brought up by one of the software engineers today was the idea of creating a custom generic form that could be reused in various ways throughout the site.  The trick was going to be with saving to a dynamic model.  Django has few great built-in ways of creating a form based on a model on our MySQL database.  The problem is there isn’t an easy way to pass it a model to base the form off of.  Theoretically, you should create a model form for each of your models regardless.  We felt like we could get more out of writing our own custom generic form though.

To accomplish this hurdle I came across closures.  I’d never heard of closures before and if you are in the mood the Wikipedia article does a fine job explaining it.  Essentially we were going to use a closure around our generic model form class to pass it any model we pleased.

Following this example from StackOverflow (another example) we came up with something like the following:

This worked out great.  We were able to instantly see the forms generated to our templates using this new way.  Unfortunately, we spent so long on this and just thinking about how to generate and save all of these forms that we went completely back to the drawing board with all of the models.  I’d rather have simple, easy-to-understand code than overly-generic, complex code.  I just found the whole idea of closures, which I believe are similar to lambda expressions which I have used before, very fascinating and we were able to use them, if even just for a moment, today in our daily tasks and creations.

-Eric