I want to build a simple, static website using Bootstrap 3.2, including LESS. I also want to have a small number of pages rather than a single long running page. How hard can this be?
The answers to both questions were harder to find than I expected. There is a ridiculous (repetitive) amount of basic information on the use of Bootstrap Components & CSS and, to a lesser degree, the use and value of LESS. But I found sweet fa on how to get up and running in a useful dev setup. This post outlines my approach so it won’t be such a hurdle next time :-).
As part of tackling how to customise bootstrap, I ended up trawling through stacks of stuff. Rather than making the Colour my BootsrApp post really long, this post is my dumping ground for some of the more helpful links.
With the coming of spring, I feel the need to inject a touch of colour into my Application. I actually need to tackle the overall look and feel to sort out my preferred application interaction patterns, but some of the ‘feel’ components are looking particularly challenging. So I’m starting with the ‘look’ as my semi-productive way to delay the inevitable brain drain until next week…
My challenge: How do I customise the default styles provided by Twitter Bootstrap, without creating a maintenance nightmare?
The short answer always sounds so easy: create my own stylesheet to hold all my overrides.
The longer answer needs more than a ‘monkey see monkey do’ approach (when something invariably goes wrong, this monkey gets confused) so I had to dig a little deeper to try and better understand how it all integrates. For example learning that @import is not the same as requires_tree. For example, learning that things behave differently in Dev vs Prod because of the clever way the asset pipeline and sprockets handle compiling in different modes. And a whole lot more. . .
Like all things in software, there’s ways and there’s better ways! So here’s my longer answer… Continue reading
Implementing a datepicker – Simple ( not…!)
My RoR app is using twitter bootstrap for all my styles. Not only does this significantly reduce my need for extensive front end development, it also provides a responsive framework to enable the app to deploy to a range of devices.
The standard date field in the Twitter Bootstrap is a slightly clunky-looking set of fields for entering each component of the date (and additional fields for entering time):
I prefer a single field, and would also like to provide a date-picker option – it’s pretty standard to offer this and I prefer to see a future date in context of weeks and months. So I landed on the following, which displays the date picker when the field gets focus, but which also permits keyboard typing of the date:
So, with the goal set, it’s time to figure out how to actually implement this!