Styling a Google Map

Google offers a very impressive map service.  Between JS and CSS, styling is usually very straightforward with tools like the Styling Wizard from Google: https://mapstyle.withgoogle.com/ However, some things can fall through the cracks.  Point of the matter – the arrow on the InfoWindow/Bubble/Box. Normally, the location bubble appears above the marker.  To change the placement…

Bootstrap navbar overflow strategy

Although it can be complicated markup, the Bootstrap navbar does have lots of features.  Unfortunately, the component does not handle menu overflow, as stated within a warning box on the official Bootstrap site. Generally, the content wraps decently except for when the navbar contains specific navbar-left and navbar-right elements.  When that happens, the navbar-right element appears…

Escaping LESS parameters

For example purposes, here is a LESS mixin that looks something like this: .make-blue( @selector ) { @(selector) { background: blue; } }   To call it, I originally did something like this: .make-blue( ‘div’ );   That produced output like this: ‘div’ { background: blue; }   Clearly, that is not precisely what I…

CSS-only shapes

I’ve come across a number of sites that touch on how to create triangles by using only CSS.  Most recently, I came across a site that acts as a nice reference for triangles and whole lot more:

https://css-tricks.com/examples/ShapesOfCSS/

CSS Cursors

I’ve seen a number of pages that explain what the different values for the CSS cursor attribute are.  All of these pages describe the cursors through text or in a manner that requires an inordinate amount of mouse movement and clicking. Fortunately, I came across a page that applies the various cursors on hover of specific…

Styling the WordPress Admin

The WordPress backend has a very specific look to it.  If you are looking to add a new page there, you’ll want to style it similarly.  It’s not very clear what is available, but after a lot of searching, I came across these links that help shine light on the topic:

CSS Performance

As I write the styling for a new site, I want to pay careful attention to too much CSS.  As a result, I did some searching on layout times and came across a list of CSS Selector types ordered from most efficient to least efficient.  Here they are: ID, e.g. #header Class, e.g. .promo Type, e.g. div Adjacent…

Using LESS in Eclipse

If you are trying to use LESS files in Eclipse, you will notice that those files are viewed as plain text – no indenting, no color-coding, no outlining, etc.  If you want to fix this up so that these LESS files behave like CSS files, do the following: Install XText (this is a pre-requisite for…

Awesome ways to display web icons

Great for visual indications, icons can add just enough interest to otherwise plain sites. Traditionally, Developers would use image files (like .gif, .jpg, or .png) to display in their markup.  The code for a button with some text and an icon might have looked something like this: <button> <img src=”path_to_my_icon/icon.png”> Click me! </button> Of course,…