Skip navigation

Monthly Archives: September 2014

My grade school days are kind of a blur at this point, which is probably a good thing. I don’t remember many of my teachers, classes, lessons, peers… I can’t tell if that’s just a bad memory or if so much of it simply had no lasting impact. In any case, there are a few things that do stand out, things said by my teachers which have stuck with me to this day. Here are the first three that come to mind:

“Anyone can make a face.”

I was in art classes throughout grade school. I probably shouldn’t have been. I could draw Sonic the Hedgehog and his friends, but that’s about it. None of the stuff they tried to teach us stuck with me, and I couldn’t care less about art history. I remember working with clay in middle school, making a number of pieces that were to be part of a collection. Some of those pieces were faces, or face-like. My art teacher (who is a cool guy and would probably be devastated to know this is the first thing I recall when I think of him) was giving us a mini-lecture about needing to really stretch our creativity and try new things. He picked up a ball of clay, poked three holes in it, and said “see, anyone can make a face.” It was clearly in reference to my rather pathetic project because, well, it looked exactly the same. What I don’t know is why I was singled out like that.

Art was already on life support for me. I think that did it in.

Years later, in high school (I kept taking art classes, probably just for the credits), I had a truly awful troll of an art teacher. One time, she looked at something I had been drawing — and yes, it was indeed bad — and uttered “ugh, Grossman… gross!” Thanks, you old sow. Thanks so much for that.

“Don’t slump!”

My first-grade homeroom teacher made it a point on one of the first days of class to pull us all together and teach us about slumping over in one’s chair. Or slouching. I don’t remember which word she used, but she gave a demonstration and asked “have you ever seen an old person sit in a chair like this?” at which point she crumpled like a doll. “You don’t want to end up like that! Make sure to always sit up straight, because it’s hard to fix this once the damage is done!” Right she was. Unfortunately, since I’m at a desktop computer so much… well, yeah.

“We’re all inventors.”

A total dark horse candidate for things I’d remember from way-back-when, but this made an impact. I wish I could recall who said it to us. The details and context escape me, but the idea was that you don’t have to be creating new technologies to call yourself an inventor. Even as dumpy little students, choosing how to carry our textbooks and binders was an act of creation; we were all inventing when we did that.

We invent when we come up with creative ways to solve little problems at work; when we decorate our homes; when we decide who we are and how we’re going to act. That is, perhaps, unless you don’t have an ounce of existentialism in your body and you simply allow your animal instincts to carry you from one thing to the next. Those people are great fun to deal with.

In closing, teachers: your words, even your off-handed little remarks, can have a profound impact on your students. Be very mindful of what you say around them.

Home Sweet Home

Home Sweet Home

I guess Sass happened a few years ago and I missed the memo. That’s bad news for me because since I didn’t hug it, and pet it, and squeeze it with such love as soon as it appeared, I missed the total-newb tutorial train. Everyone’s already supposed to know everything about it by now, so all the advanced Sass techniques and integrations assume you do. After all, how could you not? …unless you’ve been living under a rock. Which I have.

I get what Sass does and I know Foundation makes heavy use of it for customization. When I realized I wanted Foundation to render rows wider than 1000 pixels by default, I knew it was time to adopt Sass. I simply had no idea how to do it for my current setup, which is Visual Studio 2013 Update 3, Web Essentials 2013 for Update 3, and Foundation 5.

In my travels, I kept seeing mention of something called Compass (I have no idea what it is or why I would need it), but according to what I’ve been reading, Web Essentials recently supplanted much of that tool’s usefulness in Visual Studio. Fine with me: the less bloat, the better. Unfortunately, the web development community at large hasn’t really caught up with this turn of events, so tutorials for Compass are still all over the place like it’s the only option for this particular quest. And it’s not.

Without further ado, I will describe here the steps I followed in order to customize Foundation 5 via Sass in a new ASP.NET MVC 5 Web Application through Visual Studio 2013 Update 3 with Web Essentials 2013 for Update 3 installed.

  1. In Visual Studio, FILE → New → Project… → Installed → Templates → Visual C# → Web → ASP.NET Web Application → (name it whatever) → OK.
  2. MVC → OK.
  3. Right-click your new Web Application project in the Solution Explorer and select Manage NuGet Packages…
  4. Search for “foundation sass”. At the time of this writing, the most appropriate package was Zurb Foundation 5 (for Sites) Core Sass files. I guess you could alternatively do this in the Package Manager Console:
  5. Rename  /Content/Site.css to  /Content/Site.scss (CSS to SCSS) and replace its contents with the following, which puts a custom variable out there and then processes it against the core Foundation SCSS files to create a compiled CSS file:

    Let me briefly explain what’s going on here…

    • Line 4: If you don’t have this line, you can’t do stuff like rem-calc() in your customizations… which, as it turns out, is exactly what I need to widen the rows. This crucial little tidbit stole an hour of my life. It’s mentioned in the documentation, but it should just be there by default. I’ll explain the pathing in a sec.
    • Line 6: That’s me doing what I came here to do: I want Foundation to take advantage of wider screens. Instead of limiting itself to 1000 pixels, I want 1200 pixels. Much better. Also, super secret unobvious magic: order matters!
    • Lines 8-10: These three files are what actually build the Foundation CSS. Similar to what happened on line 4, we have to point Web Essentials to the files using paths. You’ll notice that the /sass/foundation/Site.scss file (which we didn’t use in this scenario) doesn’t have pathing because all those files are in the same directory. It’s also missing the ever-important line 4, which is just cruel if you’re trying to use it as an example. Ahem.
  6. Saving Site.scss generates Site.css.

    Saving Site.scss generates Site.css.

    As soon as you save your modified Site.scss, Web Essentials will compile Site.css and stick it under Site.scss.

  7. Run your project now and you’ll see that Foundation has been applied to the default ASP.NET hello world page. It’s not the best test in the world, but it’s quick and it shows it’s working. Change 1200 to 700 or something and refresh to see the effects.

 

The $row-width setting I modified is just one of the many things you can customize. Check /sass/foundation/_settings.scss for more options. The official Foundation documentation explains a few of them on a per-feature basis, too.

It’s not that this is terribly difficult… I just couldn’t find it explained the way I needed given my varying levels of proficiency with these tools. Hope this helps someone save a few hours and tears.