Laur IVAN

Real Sticky Footer with Material Angular

Posted by in Software

I needed to set up a sticky footer as part of my Angular and Material Design experiment. You would not believe how many resource I could find (some of them listed below)! Unfortunately, most of them had a problem; blank page looked fine (header and footer in the right places), but the page populated through angular would not refresh the footer’s position, it remaining at the bottom of the page. Not nice. The solution I found that works is the one from Ryan Fait which I’ll paste in below for…read more

Multiple Navigation Bars in Header with Flexbox

Posted by in Software

I’ve got a requirement to build a site header with three components: Brand (company logo…) – left Menu – center Shortcuts (settings, search) – right The result should be looking like this: Now, with Bootstrap is really easy to get the brand (and the menu) justified to the left and the shortcuts justified to the right. However, it is surprisingly difficult to get the layout above due to several reasons: The collapsible structure separates the brand from the rest, resulting in a 2-level nesting (i.e. the two navbar lists are…read more

Opinionated List of Bootstrap Resources

Posted by in Software

Once in a while I need to write up HTML and CSS to put some pages out; usually in front of a Django site. To make things easier, I’ve been using bootstrap and ended up collecting a bunch of relevant links. Here they are… Easy design bootstrappingdesign.com – A design course to DIY (free) bootstrapdesigner.com – online interactive designer (free) Designmodo Startup framework – A modular framework to build your own site (commercial) PS: I’ll be building this list with new links as I find them. If you have any…read more

Decent image loader widget in django

Posted by in Software

I’m working on a website where I need to be able to load an image. The default widget is abysmal; it has a url to the current image, a checkbox and a file loader input element. Even styled, it looks pretty bad. So, I’ve taken upon myself to prettify it and get from this: to this: To accomplish the transformation, we need: Crispy forms – just because my app uses it and it gives nice bootstrap-based formatting Floppy forms – because it allow us to customise widgets markusslima’s bootstrap-filestyle –…read more