Contrast makes a difference: making bootstrap badges “pop”

We have an application which uses Bootstrap badges to display pertinent field based information in a search result display. We were looking at it and it just doesn’t seem to stand out as we had expected.

s1

Adding the following¬†simple CSS makes all the difference. The extra contrast between the white space and the gray background just needed a “pop”

.badge {
	border: 1px solid lightgray;
	border-radius: 5px;
}

s2

 

Advertisements

Using CSS3 border-radius to round a Bootstrap button

This is a really simple observation, but relevant to the side project I have started to work on for my wife (more to come later)

If we create a simple Bootstrap button

b1

<button type="button" class="btn btn-default">Single toggle</button>

It looks something like this in firebug

b2

Looking at the .btn style on the right we can see border-radius: 4px

Messing with this value can create a much more rounded button – if that is your desire

b3

This is border-radius: 20px – Cool ūüôā

 

Dynamically changing form labels into placeholders for mobile devices

When building a mobile interface with bootstrap, one design option is to use placeholders to signify the field label.

a1

This approach has many critics who questions the page accessibility, the fact that when you click into the field and start typing you lose the context, and so on. It is however an approach which is frequently¬†used. In this article I wanted to show how I made the PSC contest submission form go from “Labels” to “placeholders” using media queries.

Labels

Looking at the form normally we see labels and fields

a2

If we have Labels and placeholders together at the same time, the effect is not really all that pleasing to the eye

a3

As the screen size is reduced the bootstrap styling kicks in around the Galaxy Note 4 size

a4

But when we get to the phone size screen the labels are removed and the the placeholders are made visible.

a5

 

If you go the https://contest.psclistens.com site you can play with it yourself by resizing the page

How does that work then?

The labels are easy – they are hidden with a media query

@media screen and (max-width: 460px), screen and (max-device-width: 460px){
	label:not(.projectSponsor) {
		display: none !important;
	}
}

The placeholders are not so easy though. The first problem is that the “placeholder” attribute does not have a¬†CSS value to “display:none”. The second is that they are as yet not governed by a non-vendor prefixed style. Although you cannot hide the placeholders you can color them.

The code below is a media query which basically says that when the screen is above 768 pixels then the placeholders get a style color of white. I had to !important then to get it to override bootstrap properly. When the screen gets smaller the white override is lost and the bootstrap grey is seen.

	@media (min-width: 768px) {
		.form-control::-moz-placeholder {
		    color: white !important;
		    opacity: 1;
		}
		.form-control::-moz-placeholder {
		    color: white  !important;
		    opacity: 1;
		}
		*::-moz-placeholder {
		    color: white !important;
		}
		.::-webkit-input-placeholder {
		    color: white !important;
		    opacity: 1;
		}
		::-webkit-input-placeholder {
		    color: white  !important;
		    opacity: 1;
		}
		*::-webkit-input-placeholder {
		    color: white !important;
		}

	}

 

So the labels are hidden at 460 but the placeholder is displayed at 768 – so yes if you watch carefully as the screen is reduced you will see a screen size between the iPad and the phone where both are visible. This was done for effect so that you can see it happen.

Conclusion

Without going into the merits of whether or not this is an appropriate design method for displaying information to users, this served as a nice example of what is possible. This was all done within the context of an XPage.

Check it out –¬†https://contest.psclistens.com

One way to make a responsive XPages viewPanel

In this article I will demonstrate a method for hiding columns using CSS and making an XPages view Panel pseudo-responsive.

What is Responsive Design?

  1. Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

    http://whatis.techtarget.com/definition/responsive-design

Introduction

XPages¬†view panels out of the box are not “responsive”, in that they make no attempt to, and do not work well on a mobile device.

One solution demonstrated by Stewart Curry is to hide columns as the width of the browser decreases. Hiding the least significant, down to the most when the view space is smallest. This makes sense because you would not want to display 9 columns worth of data on a mobile device anyway.

Using the following CSS I was easily able to make an XPages view panel “work” at different resolutions by reducing the¬†number of displayed columns. (IE9 and above¬†http://caniuse.com/#search=nth-child)

<style>
	.xspDataTable {width: 75%}

	@media only screen and (max-width: 1000px) {
		.xspDataTable tr td:nth-child(2), .xspDataTable tr th:nth-child(2) { display:none; visibility:hidden; }
	}

	@media only screen and (max-width: 768px) {
		.xspDataTable tr td:nth-child(3), .xspDataTable tr th:nth-child(3) { display:none; visibility:hidden; }
	}

	@media only screen and (max-width: 480px) {
		.xspDataTable tr td:nth-child(1), .xspDataTable tr th:nth-child(1) { display:none; visibility:hidden; }
	}
</style>

How does it work?
The CSS media queries (IE9 and above) determine the CSS displayed depending on the width of the page (1000px, 768px and 480px in this case). At each stage I remove one column until I am left with just the detail as you can see below.


At > 1000px

a1

At > 768px

a2

At > 480px

a3

and below 480px

a4

Conclusion

This is not the only “method” for trying to achieve responsiveness out of tables, but definitely my favorite ūüôā

 

 

 

Conditional style loading in IE10+

I learned this recently when trying to load a conditional stylesheet into an XPage. IE9 worked but IE11 failed on me and I couldn’t see why. It was only a small change so I ended up putting it in the main stylesheet as a media query.

 

Apparently IE10 and above does not understand conditional HTML code like this

  <!--[if IE]>
    This content is ignored in IE10 and other browsers.
    In older versions of IE it renders as part of the page.
  <![endif]-->

http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx

So to load a style conditionally in IE11 you can do it like this

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  Add your IE10+ specific styles here
}

thanks to http://www.adaodesign.com/css-styles-for-ie10-and-ie11-only

Using jQuery to remove Dojo CSS from an XPage

I am currently working on a customer application which is oneuiv2.1 themed and I wanted to create a simple jQuery Mobile site. the dojo css was really messing up the styling and just for interest I wanted to see if I could programmatically remove the dojo css from the page client side

The application has the property checked to use runtime optimized JavaScript and CSS. This combines all the dojo css files nicely into one link.

do1

Using a jQuery selector I can get a handle on that <LINK> as follows

$('link[href*="dojo.css"]') //select all LINK objects where the href contains dojo.css

do2

Once I have that I can just remove the element from the DOM like this

$('link[href*="dojo.css"]').remove()

Unfortunately I cannot show you what this does my customer’s site to make it look all pretty and jQueryMobile like, but I can show you how it blows up a oneui site and you can take it from me this fixed my problem.

Just add the above code in a *SCRIPT* tag within your XPage and it will remove the dojo style before it is rendered to the end user – thus they will never know.

http://xpages.info/xpageshome.nsf/Demos.xsp

Before

do3

After

do4

 

Caveat

Yeah I realize this means the CSS file(s) are downloaded and then removed and I am sure there are more elegant ways to handle the issue server-side.

This was an exercise in learning that jQuery can be used to remove entire CSS DOM objects ūüôā

Decoupling your CSS from your JavaScript, a “well no duh” moment

This weekend I had one of those “oh DUH” moments which I have been struggling with for quite some time. How can I better structure my jQuery selectors and make the code more maintainable? I came across this excellent article – Decoupling your HTML CSS and JavaScript¬†and it all came into focus.

The problem

Using JavaScript selectors (dojo or jQuery) in XPages can be a problem because of the id naming scheme used by the JSP generator “id=”view:_id1:_id2:link5” and how this falls over in a selector. So an alternate to not having to mess with is attributes is to use class selectors $(‘.class’) which is actually much simpler and less troubling to get your head around.

When you are using class selectors for a DOM element which already has a class then awesome I don’t have to add any more classes. Using this bootstrap example there are multiple classes I can get a hold of to manipulate the dialog contents.

 <div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
			<button type="button" class="close modal-maxmin" aria-hidden="true">
				<i class="icon-external-link"> </i>
			</button>
			<button type="button" data-dismiss="modal" class="close" aria-hidden="true">
				<i class="icon-remove"> </i>
			</button>
          <h4 class="modal-title">modal-title</h4>
        </div>
        <div class="modal-body">
         modal-body : HERE GOES THE MESSAGE
        </div>
        <div class="modal-footer">
	        <div class="btn-group">
	          <button type="button" class="btn btn-default modal-cancel" data-dismiss="modal">CANCEL</button>
	          <button type="button" class="btn btn-primary modal-ok">OK</button>
	        </div>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

To add something to the body of the dialog I would do something like this

  $(".modal-body").html('Hi Marky')

The other problem

This example is very “coupled” code whereby my JavaScript selector is coupled to the real class file used by the HTML code. In reality what it means is that if I have to change the classname for some reason (hmm an example – oh I don’t know – going from Bootstrap2 to Bootstrap3 for example) then my JavaScript breaks down. While tightly coupled code is easy to follow, easy to create initially, it can be an absolute nightmare in the long run.

The epiphany moment

As I am reading Philip Walton’s article¬†¬†I am struck by the “oh well no duh” moment when he talks about using js-* as a naming convention for classes which only exist for JavaScript selection.

  • My personal recommendation is to use a prefix for all JavaScript hooks. I use¬†js-*. That way, when a developer sees such a class in the HTML source, she’ll know exactly where to look to discover its purpose.

Well no duh – brilliant idea!

In all senses this makes perfect sense:

  • The developer does not have to search through CSS files looking to see if you used the class as a selector as a real CSS marker
    • (well ok they changed something and the CSS broke, then they started to look for it)
  • It is immediately apparent from looking at the HTML that there is some dojo or jQuery selection/manipulation going to go on in this area because of the js-* class naming scheme
  • Within eclipse you can do a quick search and find out what is trying to manipulate this area before you go and ruin it

The new code

A very simple change to the modal-body but this then decouples my code form the bootstrap code – allowing me to make changes to the bootstrap classes int he future without breaking my JavaScript

 <div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
			<button type="button" class="close modal-maxmin" aria-hidden="true">
				<i class="icon-external-link"> </i>
			</button>
			<button type="button" data-dismiss="modal" class="close" aria-hidden="true">
				<i class="icon-remove"> </i>
			</button>
          <h4 class="modal-title">modal-title</h4>
        </div>
        <div class="modal-body js-modal-body"> <!-- js-modal-body change here -->
         modal-body : HERE GOES THE MESSAGE
        </div>
        <div class="modal-footer">
	        <div class="btn-group">
	          <button type="button" class="btn btn-default modal-cancel" data-dismiss="modal">CANCEL</button>
	          <button type="button" class="btn btn-primary modal-ok">OK</button>
	        </div>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

To add something to the body of the dialog I would now select the js-* class not the modal-body itself

  $(".js-modal-body").html('Hi Marky')

Comment

One of the things I love about my career is that it is an “always learning” experience for me. There are times like this where you think to yourself that is an awesome idea and you are very happy to learn it – and at the same time feel so stupid that you didn’t think of it yourself before ūüôā