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.

JQuery and Javascript

I’m been meaning to learn more about jQuery and JavaScript  but damn if I just don’t have the time. I have been coming across some rather interesting resources though, my favorite of which are videos. I love videos simply because you can see the series of steps, and you know it actually works (when I was learning 3D modeling, books were essentially the only options, and the publishers didn’t vet their content worth a damn).

Some cool things I’ve come across:

http://learn.appendto.com/

https://tutsplus.com/lesson/welcome-3/

No, these aren’t definitive materials for learning jQuery or learning JavaScript, but they are a pretty good way to get an idea of how they work, and how you can build a foundation.

 

The SEO effects of ::before and ::after

Ok, so a few weeks ago I posted a question on http://reddit.com/r/css about the possible SEO effects of ::after  psuedo-elements.  I decided to run a test, and here are the results.

After much searching I finally found a ‘Near English’ phrase that had zero Google results (it was a hell of a lot harder than I thought it would be).  ‘Staminified Dawg’ was my key.

I have a domain that I use for random css/php/js tests that was registered on March 23, 2012 and currently has a PageRank of 3 (how I have no idea).  So, I set up some ::before and ::after elements in the form of…

.petal:before {
content: "staminified dawg";
display: none
}
.petal:after {
content: "staminified dawg";
visibility: hidden
}

(The display and visibility were used separately to see if there was any effect from either scenario)

At the same time I linked a new page off the index.html and checked webmaster tools to see the index status.  All the other pages had been indexed.  3 weeks later… the page has been botted since, and the new page had been indexed. ‘staminified dawg’ still has 0 hits on google.

So what do we know?  Only that “staminified dawg” has yet to be indexed –we still don’t know if the {display: none} and {visibility: hidden} tags have had an effect.

The next step is to make the {content: “”} tags visible on the page and get something else indexed at the same time.  I guess we’ll get a little bit more of an answer then.

EDIT: well, ‘staminified dawg’ is no longer an un-findable term. Apparently this site indexes pretty well 😀

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.

Flexslider. Yup.

http://www.woothemes.com/flexslider/

See that link above? Yup. That’s pretty much the easiest slider to use these days.  It’s small, responsive, and damn easy to set up.  Adding non-image based content is quite easy, and if you know how to use a @media query then you won’t have a problem making fully responsive or fluid layouts with it.

Bonus:  It is touch responsive on tablets.

 

 

 

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.