Jaime Quiroz

About Jaime Quiroz

Jaime's a front-end developer with a passion for graphic design and music.

SASS Maps != Source Maps

I’ve seen the phrase “Sass maps” thrown around  the web in recent months, and have made an assumption that people were talking about Source Maps. They both do sound alike, and in fact both these things were part of the same SASS update (3.3.0). It wouldn’t surprise me if there are others out there who’ve experienced this unfortunate confusion and are still in the dark about this.

I  attended SassConf and Sass Maps were quite a popular topic throughout the conference, with good reason–they’re in fact awesome.

So what is a Sass Map exactly?

A Sass map is like a Sass List, except instead of containing just values you have Keys AND Values.

If you are a javscript developer or have ever used js objects you could even think of Sass maps as ‘Sass objects’. Here is what a Sass Map looks like:

$map: (
	key1: value1,
	key2: value2,
	key3: value3
);

… and like a js object you can assign another ‘object’ (Sass Map) to a keys’ value like:

$map: (
	key1: (
		a: b,
		c: d
	),
	key2: value2,
	key3: value3
);

How is a Sass Map used?

Sass Maps are a great way to organize related CSS, they really lend themselves to looping and can help you write less repetitive code.

Retrieve a value from a Sass Map with ‘map-get()’ like this:

$links: (
	link: #900,
	hover: #333,
	visited: #000
);

a {
	color: map-get($links, link);
}

Simple enough, but what about when a keys’ value is a map?

$buttons: (
  search: (
    bg-color: #333,
    icon: "magnifier.svg"
  ),
  alert: (
    bg-color: red,
    icon: "triangle.png"
  ),
  success: (
    bg-color: green,
    icon: "checkmark.svg"
  )
);

@each $button, $buttonProps in $buttons {

	.button-#{ $button } {
		background-color: map-get( $buttonProps , bg-color );
		background-image: url( images/#{map-get($buttonProps, icon)} );
	}

}

… the output:

.button-search {
  background-color: #333;
  background-image: url(images/magnifier.svg);
}

.button-alert {
  background-color: red;
  background-image: url(images/triangle.png);
}

.button-success {
  background-color: green;
  background-image: url(images/checkmark.svg);
}

Let’s look at this bit:

	@each $button, $buttonProps in $buttons

Those 3 variables contain:

$button = the top level key names ( search, alert and success )

$buttonProps = the map of each key ( background-color: … , background-image: … )

$buttons = the main map we are getting our values from

You can use as many maps in a map as you want, although things can start getting kinda messy with map-get():

$map:(
  a: (
    b: (
      c: (
        key: red
      )
    )
  )
);

@each $x, $props in $map {

	.red {
	    color: map-get( map-get( map-get( $props, b ) , c ) , key );
	}

}

That seems like an unlikely scenario, but it is possible if you do have a use for it.

Sass Maps can be very useful things if used correctly – how you want to leverage them is up to whatever works best for you and your team.

Read more about Sass Maps.

If you actually have been using Sass Maps in your project please share in the comments below, we’d love to know your use cases!

Flexible Layout Color with CSS3 Gradients

Sometimes designers will get imaginative and create what I call an “infinite sidebar”. This is when you have a column of content on a webpage with a background color that extends to the edge of your screen (while still maintaining a fixed width for the wrapping element of the pages content – for centering purposes).

This sort of thing may initially seem like it wouldn’t really work but thankfully implementing this on a web layout is simple thanks to CSS gradients.

CSS gradients can be a headache to keep up with – the syntax is not the same across the board for browsers. We at matrix use Compass to make our lives easier. The relevant SASS that generates the gradient in this example:

.wrap {
	@include background(linear-gradient(left, #FFF 50%, #2980b9 50%));
}

The basic idea is you have two columns, one white and one blue. To create the illusion of an “infinite sidebar” a CSS gradient (left half white – right half blue) is applied to a “wrap” element, which the layout elements are contained within.

The color stop of the CSS gradient is hidden by an “inner” element (the container with a fixed or max-width). The “inner” element has a white background color, is centered on the page and is positioned on top of the wrap element.

Flexible Layout Color - demo image 1

If you then apply the same color from the gradient to the second column within the “inner” element you’ll have the “infinite sidebar” effect:

Flexible Layout Color - demo image 2

Of course the best way to understand what’s going on is to inspect the demo I’ve set up and then try it for your self!

This also gracefully degrades in browsers that don’t support CSS gradients (check it out on IE9 or less – it looks like a standard sidebar with a background color)

View the demo here.

What’s your favorite CSS design trick?

Building a Responsive Navigation: Big navigation on small screens

UI problem solving on mobile devices can be quite a challenge when it comes to navigation. A simple Google search for “Responsive navigation” will yield countless possible navigation formats that web developers have used so far.

We’ve recently taken on some responsive projects where we had to make some fairly large navigation work on mobile devices as well. One site in particular is The Catholic Health Association of the United States: http://www.chausa.org.

A long vertical navigation accessible through scrolling is what we aimed to accomplish in this case, allowing the user to navigate to just about any page on the site right from the home page.

Taking this a step forward, I’ve set up a demo of how this concept can work with an expanding navigation.

The main thing about approaching this setup is using a fixed navigation behind the content with an overflow-y: scroll rule. No third party JavaScript plugins required (other than jQuery) to add or remove some classes and handle the toggle of the sub menus.

The scrollbar itself is hidden by the overlapping content that’s pushed off to the right.

By toggling a class on the body, the content gets pushed aside to reveal the hidden navigation. The content doesn’t fully leave the page but remains somewhat visible for two reasons:

  1. It slightly overlaps the navigation behind the content and will hide the unwanted scrollbar from view
  2. it serves as a trigger to pull the content back into full view when clicked on

Since we are dealing with big navigation in this example, the content is fixed on the screen and does not scroll along with the navigation. Doing it this way makes it less distracting for the user. It also ensures that it stays in view in the event that the navigation becomes longer than the page itself.

No JavaScript is involved in the sliding of the content away from view, it’s just a simple CSS transition on the ‘Left’ property of the content container.

The +/- button is used to reveal additional sub menus in the navigation. This treatment gives the user two options on a given item with sub menu. They can:

  • click on the text to go to its landing page, or
  • click its expand button to see additional options within that section.

 

Have you worked on a big project optimized for mobile? Please share if you have!

Easier HTML with Haml and Sinatra

I have been doing professional web development for about 3 years now and HTML tables are still not getting any easier to look at (especially poorly formatted ones).

With modern text editors our markup is mostly written for us and in the case of certain content management systems (CMS) we hardly  need to write any HTML at all anymore.

Nevertheless as a web developer it is almost entirely impossible to forget about writing some markup.

I came across Haml and Sinatra about 2 years ago, through my interest in the Ruby language. Though I cannot say that I’ve gone on to create amazing web apps with these tools yet, I have found myself coming back to Haml again and again to rapidly flesh out some HTML when needed.

Maybe this post should have been called “writing HTML tables sucks” ‘cause that’s really why I find myself switching over to Haml on occasion.

My Sinatra Setup

Required items:

First of all this is a super basic example and more than anything it is just a quick development tool. It’s a tool that gets used often and for that reason it should be completely painless and easy to get to.

Step one: This app needs a home, I use a local directory called ‘Sinatra’.

In there lives one ruby file and two directories each with just one file (the public directory is where you place files such as CSS, Images and Javascript – for this setup it is optional as I only use the app to generate some HTML):

/Sinatra

– app.rb

– /public (optional)

– – style.css (optional)

– /views

– – index.haml

The app is instructed what to display on what page in the app.rb file. The root page is set to display the index.haml view (a view is a template file in Ruby). Once the Sinatra and Haml gems are installed the app.rb is set up something like this:

require 'rubygems'
require 'sinatra'

get '/' do
	haml :index
end

Initialization of the app is done through the command line, first by navigating to the project and then running:

ruby app.rb

If all is good, the command line will say this:

Sinatra/1.4.2 has taken the stage on 4567 for development with backup from Mongrel

Now the app is viewable on http://localhost:4567/

All that’s left to do is write some Haml inside the views/index.haml file. No need to restart the app for changes in views/ or public/ just refresh the browser.

Protip: Because I use this so frequently and I always have a Terminal window (mac command line) open it made sense to create a command alias which will change my current location to the app’s directory. From there I am able to open the app in my text editor and initialize the app as well.

This has helped me a lot in the past and continues to be an useful little tool. Haml is just easier on the eyes and easier to write than HTML in my opinion.

Gradient Buttons in IE9

Not a lot of people are totally aware of using CSS box-shadows to create gradient-like effects for browsers like IE9. While box-shadows are NOT a replacement for gradients, they do offer us an alternative to produce some nice effects with standards compliant code.

Small UI elements like buttons and navigation items are a great place to use this technique. Just be mindful that abusing chained box-shadows or using box-shadows on large elements can slow your page down.

No vendor prefixes are needed for IE9 although Android and older versions of mobile iOS require -webkit- to render box-shadows. We are using Sass so Compass will take care of the prefixes for us.

Beyond just being a cool trick this technique will also help keep our CSS light in comparison with the CSS needed when using actual gradients.

HTML

<button>Look mom no gradient filter in ie9!</button>

Sass w/ Compass

//import compass css3 mixins
@import compass/css3

//color scheme
$linkColor: #00aae8

button
	border: none
	padding: 10px
	background: $linkColor
	color: #FFF
	font-weight: bold
	cursor: pointer
	border: 1px solid darken($linkColor, 15%)
	border-radius: 10px

	+box-shadow(inset 0 -20px 30px -10px darken($linkColor,20%))

	&:hover
		+box-shadow(inset 0 -20px 30px -10px darken($linkColor,15%))

	&:active
		+box-shadow(inset 0 20px 30px -10px darken($linkColor,5%))

Click here for the demo.