Boostrapped BlogCFC

[Michael Evangelista]

In the spirit of I'm really gonna blog more, I took down the old web root and grabbed a new copy of blogcfc, then went through and wired bootstrap around it: http://www.miuaiga.com/ 

For now it is just the facts, ma'am. You have two columns, a collapsing menu, a system of anchor links and some smooth scrolling js.  The layout uses simple bootstrap panel markup. The css and js are in a /theme/ directory and the css is compiled with less, so you can do neat stuff like tacking bootstrap classes onto elements already in the blogcfc markup.

There's a search box that fits in different spots depending on the screen width, and a basic contact page with some minor markup changes to the default. 

Also I created a new twitter pod using MonkehTweets, quick n' easy.
http://www.miuaiga.com/#pod-monkehtweet 
and a system to scroll to any anchor in the URL (or on click from nav), leaving room for the top navbar

Before I get into styles and what-not, I'd like some help to break what's there so far.
It looks pretty good on my droid phone and all the screen widths i can create on my desktop, 

but I am sure there is some wonky stuff lurking. 

If it interests you at all please check it out on various devices and let me know what to fix.

Once I get it tuned up I'll gladly share.

[Charlie Arehart]

Thanks for sharing, Michael. I’ll be interested to hear how that goes, as I am myself running a very old deployment of BlogCFC and have been contemplating updating it. Cool to see your stream of thought as you go with your effort.

It looks nice on all my devices, but I note a couple of things:

- Desktop (Windows 7): on both Chrome, FF 24 and IE 10, if I shrink the window to about 2/3 the size of my laptop screen (13x7), I lose the right pod. It doesn’t move to the bottom; it just disappears.

- Mobile (Galaxy Note 2, Android 4.1.2, 5” diameter): on FF, Chrome, or Dolphin, I see no right pod at all, whether portrait or landscape, but I notice the top right nav icon which offers “latest, categories, comments” etc. as options, so I assume it’s designed not to show them on any mobile device (regardless of available screen real estate) unless you choose to see them.

- Tablet (Galaxy Tab 10”, Android 4.2.2): no right pod if in portrait mode, and no new top right nav icon as on the mobile phone to see options, though of course you also list them across the top of the page as a breadcrumb on all the devices, so not the end of the world. In fact, very interesting: the “latest” option appears first after “home” in that breadcrumb nav bar when in portrait mode, but not when in landscape (where I do see the right pod holding it).

Hope that’s helpful. Will look forward to that blog entry/series if you do it. :-)

/charlie

--
You received this message because you are subscribed to the Google Groups "BlogCFC" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blogcfc+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Michael Evangelista]

Very helpful Charlie. Thanks so much. 

I'm new to bootstrap, and trying to add BS classes to the blogcfc markup may not be the right approach.  
That said, as I understand it, this should work. 

The right column should drop below the main content and become full width on anything below the "md" screen size. But at no point should it disappear completely. The anchor links in the menu should always scroll the page to the latest entries, or latest comments, etc. Those right side pods should simply become lower content in a narrow single-column view. 

I found an extra </div> in the markup just now (since you posted, anyway) and that alone may have been the reason for the right col disappearing. Can you check it again with a force-refresh?

I guess I should be asking what the status is for BlogCFC in general. Is @boyzoid managing the project these days?  I pulled a fork from github but my own experiments have been messy, no commits as of yet. The right way to do this would probably be to go through all the presentation files and create bootstrap-based templates using the existing blogCFC logic, i.e. all new markup. I'm close, but it is a hybrid, not a clean start. If you and/or other legacy BlogCFC users have an interest in a new skin I'd be glad to pursue it, pull a branch and do a clean walk through the html/css front to back. On the other hand, I'm happy just to try and get my own blog looking ok.

Another general question, what are folks using to test their responsive sites on various devices? Other than a great excuse to buy a bunch of cool touch screen gizmos, I find myself somewhat in the dark in terms of a good way to see what my bootstrap sites look like in the real world. I was on a testing group for Adobe's browserlab , but that's gone away now. I used to have a browsercam account, but let that lapse a year or so ago. What's a good reliable option to see a site on multiple screen sizes and mobile OS?

[Michael Evangelista]

>>  In fact, very interesting: the “latest” option appears first after “home” in that breadcrumb nav bar when in portrait mode, but not when in landscape (where I do see the right pod holding it).

can you do screenshots on that device? 

[Michael Evangelista]

>>not when in landscape (where I do see the right pod holding it).

actually, that was intentional... if the 'latest' pod is visible at the top right, i removed it from the nav, since the scroll action was somewhat pointless.

I'm open to a more intuitive setup.

[Michael Evangelista]

>> , if I shrink the window to about 2/3 the size of my laptop screen (13x7), I lose the right pod. It doesn’t move to the bottom; it just disappears.

I found an unclosed <div> in the markup, seems to have fixed the few things I could see on my own devices - does it fix the above, so the right pods move to the bottom, rather than disappear? 

www.miuaiga.com 

thanks!

[Matt Quackenbush]

Using an S4 with Dolphin Browser, the right pod appears for me at the bottom.

[Charlie Arehart]

Michael, as for the below, I can confirm that on my laptop, the right pods do indeed now appear at the bottom if I make the browser window smaller.

As for your other questions, I can’t answer about the project. I still use a REALLY old version (5.0005), but again I was interested to see your efforts and results, and I do think others would appreciate if you shared it based on an update of the latest version. I hope some day to get there myself. :-)

Finally, as for browser testing tools, I list some here, http://www.cf411.com/pageappeartest, but most are focused more on browsers than on mobile devices (reasonably).

/charlie

[Michael Evangelista]

Thanks Matt, I'm checking out Dolphin browser, the connection w/ desktop Chrome looks really slick.

[Michael Evangelista]

Thanks Charlie, 

>> Michael, as for the below, I can confirm that on my laptop, the right pods do indeed now appear at the bottom if I make the browser window smaller.

Everything I've checked on so far seems ok too. 

>> others would appreciate if you shared it based on an update of the latest version. 

That should be easy to do. I'd want to run a file compare vs the original download, then clean things up a little, but the parts are all in place including LESS css.

>> Finally, as for browser testing tools, I list some here, http://www.cf411.com/pageappeartest, 

The Adobe Edge Inspect looks interesting, I'm checking it out now, thanks.

I also found Device Central on my list of Creative Suite Apps, it seems interesting but not sure how accurate, need to check both of these out.

[Michael Evangelista]

OT Follow up: Edge Inspect is slick!! 

http://www.miuaiga.com/index.cfm/2013/11/9/Adobe-Edge-Inspect-mobile-device-preview