Get SASS running on Windows

I have had some bad luck using SASS on Windows.  Sure, I tried  Scout and all that, but the workflow just kinda… didn’t work for me. So, here we go with a pretty damn simple method that works damn well.

Note: This is for static HTML pages on a hard drive being viewed in your browser.

1. Download Ruby for Windows

2. Install with default settings, selecting only ‘Add ruby executables to your path’

3. Open a command prompt and type just this:  

gem install sass

4. Make a new directory wherever you want to make a new html/css project.

5. Open CMD (the command line window)

6. Go to the directory where you have your css (D:\project\css or whatever)

7. Make ruby+sass watch a css file by typing this:

sass --watch style.scss:style.css

8. That’s about it.

Of course you can edit that last command with whatever file names you like, just make sure the command is fomatted the same, with the double hyphens.

Taa daa!

Setting up Emmet in Sublime Text

I recently (finally) decided to try adding an extension to Sublime Text.  I wanted to try Emmet, the successor to Zen Coding.

So, I launched Sublime Text, and followed the directions…  which are pretty sparse.

With Package Control:
Run “Package Control: Install Package” command, find and install Emmet plugin.
Restart ST editor (if required)

So.. here it is, damn simply if you haven’t done this before:

1. Open Sublime Text
2. Go Menu > View > Console
3. Copy and paste this line into the console

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

4. Hit ‘Enter’
5. Close and restart Sublime Text
6. Go Menu > Preferences > Package Control
7. Scroll through the list to find ‘Package Control: Install Package’
8. Type ’emmet’ into the search field.
9. Install Emmet
10. Close and restart Sublime Text

And… Done. play around with it using the Emmet Cheat Sheet.  It’s pretty damn handy.

Remember image maps, and how they kinda sucked?

I was thinking about images maps some time ago and how they might be useful today. Might. Kinda… Ok, not really.

Anyway, I got to thinking that it would be pretty easy to get them going in a ‘static’ size format, since you could just have a div with a background image, and then come containers inside as links for the different zones. Building it would suck hard (depending on how complex you wanted to get), but it would probably be a ton more portable that the old “cut+slice a table” in Photoshop 5.5 routine.

So… that’s not too difficult, just tedious.

But what if you wanted the linked-out image to have a variable size? You know, all responsive like? To have an image, that would scale to fill a <div>, while maintaining it and its contained links height to width ratio? That would be interesting indeed.

Let’s break it up into parts. Ok, so we can make an image (let’s say 523px by 323px) into a cleanly scaling element by doing a..

img {
width: 100%;
max-width: 523px;
}

(giving us this)

the-farm

Sho’nuff, that makes an image that will expand to fill a < div >, but won’t exceed its native pixel size. If you don’t define a height for one side of an image, then the browser will scale it proportionally by default. Sweet. But how does that help us? Are we going to chart out a bunch of mini-div’s on top of an image using fixed positioning? No, that would be quite useless.

So let’s make us a <div> that scales in much the same way. How hard can it be? All we have to do is have…

div {
width: 100%;
max-width: 523px;
height: ???
}

That’s not quite right, since if we assign a pixel value, it will be a set figure that won’t scale. We can’t do a percentage because it will measure the containing <div>. Not cool. So what can we use as a ‘local mechanic’ on the <div>? Well, we might try and use ‘padding-top’, but then again thee is no defined height…. so 50% of what?

The trick here is to use an :after psuedo-class on our div, while declaring that the <div:after> is a block element. We will declare that the < div > will be a self collapsing container, and then assign a local, relative measurement of an aspect ratio. The aspect ratio is the height of the image divided by the width. In our case, by doing 323/523=0.617591, or, 61.7591%. When we stick that 61.7591% into the :after psuedo-class’s padding-top, we get a box with the exact same ratio of height to width, because the bottom is being pushed down by the correct percentage of the width. No pixels required.

div {
width: 100%;
max-width: 523px;
position: relative;
background: #333;
}
div:after{
padding-top: 61.75%;
display: block;
content: "";
}

which gives us a div like so:

Exciting, eh? What makes it interesting is that if you adjust your browser size, the box will follow your lead, and resize appropriately while maintaining the same ratio of width v. height. Of course, seeing that this <div>’s contents happens to be padding….

We gotta get some empty space in there to fill it up.  Luckily, that’s pretty damn easy.  We just have to define the position of the asides of a contained div, but isn’t affected by the paddings buffer, and throw in our background image so that it covers the entire div…

section {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(http://www.cssjs.net/wp-content/uploads/2013/01/the-farm.jpg);
overflow:hidden;
background-size: cover;
background-repeat: no-repeat;
}

And there we go. We have a fully flexible, empty div ready to be filled up with transparent, linked content.
Like this.

Super Snazzy Fullscreen Version Here

 

CSS + Math = Almost here with calc()

One thing I just can’t wait for is the emergence of using simple math inside of CSS without needing to use jQuery or LESS/SCSS. No Surprise, Internet Explorer is the big holdup. Luckily, IE9 supports calc(), so I think I am only one version away from being able to implement is as a regular inclusion. Google has started to push the trend of only supporting the current and last version of any browser, and I know there’s a ton of people pushing for the same.

Using something like

div {width: calc(100% - 25px;)}

would just be nice to have.  Sure, it’s a simple subtraction kinda deal that could easily be gotten around with margin/padding/etc… but the sweetness is being able to do a other things like multipliers and dividers.

A simple, Flexible, column setup for non-uniform sizes?

one {width: calc(100% / 2;)}
two {width: calc(100% / 3;)}
three {width: calc(100% / 4;)}
four {width: calc(100% / 5;)}
five {width: calc(100% / 6;)}

You can just let the browser do the math for you (it will figure out it’s own preference on sub-pixel divisions).

Of course, browser prefixes will be needed for some time to come, but that’s true of anything interesting.

Precisely positioned body background images. Ain’t gonna ‘appen.

I was just asked how to precisely position a body background image.  Really, it’s not gonna happen.  So… I figured stacking elements is going to be the next best thing.

Basically: Pin a < div > to all 4 walls of the browser window, and then position a containing div where you want, with the background image of your choice. then set that container all behind your actual page content.

Masonry using CSS only

IE need not apply –no surprise there. I’ve seen some jquery plugins that will allow IE CSS columns, but haven’t had time to screw with them. One day Microsoft will release a real browser. Really.

http://www.udlx.co/10/

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam cursus consequat ligula.
  • Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam viverra, erat sed tempus pellentesque, dolor lacus semper ante, at aliquet augue tortor id diam
  • Mauris at purus in ligula semper porta
  • Nullam facilisis tincidunt libero, in vestibulum sem blandit non
  • Nunc tincidunt euismod quam sit amet congue
  • Vestibulum fermentum tincidunt dui, non fringilla ante iaculis et.
  • Donec in nisl nulla, in adipiscing lorem
  • Nullam ac dolor odio, eget porta dui.
  • Sed id massa vitae ante pulvinar varius. Sed porta vehicula ipsum a faucibus.
  • Nullam vel lectus sapien, non facilisis ipsum
  • Nunc non tincidunt leo
  • Nunc tincidunt sodales lorem et adipiscing

 

* {
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;   
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Tahoma, Arial;
font-weight: 300;
font-size: 16.5px;
border: 0;
zoom: 1;
text-decoration:none;
vertical-align: baseline;	
}
article {
width: 100%;
max-width: 800px;
background: #ddd;
margin: 0 auto;
padding: 10px;
overflow:hidden
}
ul {
list-style: none;
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
@media all and (max-width: 700px) {
ul {
list-style: none;
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}	
}
@media all and (max-width: 450px) {
ul {
list-style: none;
-moz-column-count: 1;
-moz-column-gap: 20px;
-webkit-column-count:1;
-webkit-column-gap: 20px;
column-count: 1;
column-gap: 10px;
clear: both;
}	
}
li {
padding: 10px;
margin: 10px 0;
background: #999;
border: 1px dotted #666
}

Psuedo-classes upon psuedo-classes

Just for fun i decided to test adding psuedo classes to psuedo classes after the question came up in the #css chat room. Oddly, the order of the psuedo classes doesn’t seem to matter (at least in this case).

So… http://udlx.co/11. Yup, it works.

section {
width: 100px;
height: 100px;
background: rgba(186, 218, 85, .5);
border-radius: 50px;
position:fixed;
top: 30%;
left: 10%;
margin-left: -50px; 
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
section:hover {
margin-top: -5%
}
section:before {
content: "";
background: rgba(0,0,0,.1);
position: absolute;
top: 25%;
left: 25%;
right: 25%;
bottom: 25%;
}
section:hover:before {
content: "";
background: rgba(0,0,0,.2);
position: absolute;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
}
section:after {
content: "";
background: rgba(0,0,0,.1);
position: absolute;
height: 140px;
width: 140px;
top:-20px;
left: -20px;
z-index: -1;
}
section:after:hover {
content: "";
background: rgba(0,0,0,.2);
-moz-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1.5) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}