Words about stuff, and things related to stuff

Bootstrap Screen Size indicator

Working with Bootstrap's default system of 4 screen size ranges, I wanted a way to know, quickly and visually, which size BS is reporting on each page view.

Here's a quick snippet which will create 4 divs, each visible only to the Bootstrap screen size currently in use.

view plain print about
2        <cfloop list="xs,sm,md,lg" index="i">
3            <span class="visible-#i#">#i#</span>
4        </cfloop>
5    </div>

As you resize your browser window, the value changes. Simple.

Dynamic Bootstrap Layout on any markup with make-column and make-row via LESS

If you've spent any time working with bootstrap templates, or the new Bootstrap grid system in BS3, you've probably seen markup with the col-x grid classes, for example a two column layout:

view plain print about
1<div class="container">
2<div class="row">
3<div id="primary" class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
5<div id="sidebar" class="col-lg-3 col-md-3 col-sm-4 col-xs-12">

This will result in a two column layout on large screens, with the proportions shifting for "sm" or small screens, and stacked columns on "xs" or extra-small screens.

While amazingly simple to use once you get the hang of it, maintaining this code is messy and can be both a visual and mathematical challenge when working in a multi-column layout.


Reviving an old BlogCFC blog

If you've been blogging for any length of time in the ColdFusion / CFML community, you're familiar with and probably using BlogCFC, as is this old blog. I've been intending to be more active blogging for a while now, and the recent CF Summit has me all the more eager to get back to writing in this space. 

Lately I've been working a lot with Bootstrap and jQuery, so I decided to give my blog a new skin.


Bootstrap 3 Examples and Demos

With the first Release Candidate of Bootstrap 3 available, I've been looking for templates, examples, sample code, or any other source from which I can absorb information and visual ideas for creating website projects based on this new version of the Bootstrap framework. 

It makes sense that there aren't any full-blown commercial templates out there yet, but I'm surprised by how few sites have grabbed onto the chance to at least show off what they know about the new version.

So far, here are a few I've found to be useful:


Bootstrap 3.0

This is an exciting time to be a Bootstrap developer. Finally, a css layout framework that makes sense! With the new release of Bootstrap 3 there are a number of important and timely changes in the works. 

First and foremost is the new "Mobile First!" approach, which means the core principle of the Bootstrap grid has been adjusted. There are no longer separate files for bootstrap and bootstrap-responsive styles, instead the responsive grid is baked into the core. 

A few other notes from my first foray into BS3: 

_ variable names have moved from camelCase to hyphenated-lower-case syntax. This means some good ol' find and replace exercises if you're planning to upgrade a previous bootstrap project

_ the grid system no longer uses 'span' classes, bringing in 'col' instead. This means more f&r within your markup, and perhaps an overall change to the way your pages are set up, as there are also new patterns for definining columns based on device size. Good examples here: http://getbootstrap.com/css/ 

_ there are not very many Bootstrap 3 templates available yet (as of this writing, BS3 is still in Release Candidate stage). While there are still bugs being worked out and some adjustments being made by the dev team, we can expect the file structure to stay the same. This would be a great opportunity to create new Bootstrap 3 templates.

_ the documentation has been moved outside the project, which makes sense and keeps things cleaner for developers.

_ the basic download includes minified css and jss files, while the full source code includes directories "assets", "less" and "js", dropping the former "images" folder with the glyphicons .png files.

See the comments in this pull request at https://github.com/twbs/bootstrap/pull/6342 for a walk-through of all that has been added or changed in Bootstrap 3. 

I have a few new projects in the works using Mura CMS , which has a very nice starter template based on Boostrap 2. I'm currently exploring my options for updating the default Mura bundle, or diving right into Bootstrap 3 using basic BS example pages.

This article http://bootply.com/bootstrap-3-migration-guide has a good explanation and comprehensive lists of find and replace commands for bringing a BS2 site into BS3. Considering all of the changes involved, upgrading Bootstrap 2 sites may become a source for new projects!

Recent Comments

Importing Events Calendar Data into Mura CMS
Jon said: Hi Michael, Thanks for this post - similarly looking to import data from excel spreadsheet into mur... [More]

New TinyMCE lets you paste as plain text automatically
PRR said: I am using tinyMCE 4.2.3 and configured as suggested in this post but when i try pasting in editor i... [More]

Searching and collecting Mura CMS content by Extended Attribute Value with feed.addParam()
Armando Faes said: After a few hours of head banging - finally thanks to this - Once more THANK YOU! [More]

CF Gallery Creator & jQuery Slider Gallery !New and Improved!
Jan Willis said: Okay, I realized that you are calling my root as the Site - not the wwwroot. So, I moved the JS, CS... [More]

CF Gallery Creator & jQuery Slider Gallery !New and Improved!
Michael Evangelista said: @Jan, it has been a long time (6+ years) so my memory of the details is vague, but I think the image... [More]