compass image

Anybody who’s built a website of any size knows how quickly CSS can get out of hand. Style sheets can grow bloated and lengthy, making it difficult to find things, introducing redundancy and producing an end product that makes code maintenance tedious. Let’s face it — CSS is not very well-designed.

Over the years, a number of solutions have cropped up that attempt to deal with these problems. One of the most popular is the CSS framework, COMPASS.

Below, we’ll give you a quick introduction to how COMPASS works, and some tips on how to make it work for you.


What is COMPASS?


COMPASS is an open source CSS authoring framework written in Ruby that attempts to fix a lot of the shortcomings of CSS. It also streamlines development by providing a number of utilities and tools to make writing your CSS files easier and faster.

Those features include:

  • Support for variables and mixins.
  • SASS-style nesting of CSS rules.
  • Helper functions for images, fonts, colors and more, including mathematical calculations.
  • Flexible tools for ensuring cross-browser compatibility and graceful fallback states.
  • Integration of a Blueprint module, including several default styles for rapid prototyping and styling commonly used elements.

With all that and dozens more tidbits to offer, COMPASS provides a robust authoring environment for CSS creation that automatically monitors your code as you write it, compiling it down to pure CSS for use on your site. So while the COMPASS gem is needed for authoring, your website needs no special software or libraries to display CSS written in COMPASS.


How Does COMPASS Work?


Now that we’ve gone over what COMPASS is and discussed a few of its features, let’s take a look at some of them in action. In this, we’ll use a few variables and a custom mixin, as well as an image helper and nesting to show how COMPASS makes it easy to reuse content throughout your CSS files.


$dark-accent:   #333;
$light-accent:  #eee;

@mixin default_fonts {
    font-family:    helvetica;
    font-size:      10pt;
    color:          $dark-accent;
}

#info_box {
    width:      400px;
    height:     300px;
    padding:    10pt;
    border:     1px solid $dark-accent;
    background: $light-accent;
    @include    default_fonts;

    input[type=button] {
        background:  image-url('button.png') top left repeat-x;
        color:       #fff;
        font-weight: bold;
        border:      none;
    }
}

Here you see that we’ve set up a couple of variables (dark and light accent) which we use in the mixin, in addition to the CSS rules for our info box.

Next, the mixin itself contains the rules for our default fonts. After that comes an example of how nesting works. The rules for our input button, in this example, only apply to those found within the info box.

Finally, the image URL helper here is used to generate the output for the background image, so we don’t have to type the full image path each time (path information is defined in a small config file that sits in the root directory of your project).

Now let’s take a look at the COMPASS-compiled output:


/* line 10, ../sass/demo.scss */
#info_box {
  width: 400px;
  height: 300px;
  padding: 10pt;
  border: 1px solid #333333;
  background: #eeeeee;
  font-family: helvetica;
  font-size: 10pt;
  color: #333333;
}
/* line 18, ../sass/demo.scss */
#info_box input[type=button] {
  background: url('/images/button.png') top left repeat-x;
  color: #fff;
  font-weight: bold;
  border: none;
}

As you can see, the mixins become included, variables substituted, image URLs generated, and inheritance is determined via the nesting. When generating the CSS, COMPASS also includes comments that clearly show us where each element is defined in its corresponding CSS file. If there’s an error at the time of generation, COMPASS will drop a helpful stack trace right into the CSS file where the error occurs.

At first glance, the original COMPASS code may look more verbose than the generated CSS output, but when you consider that those variables and mixins can be used throughout your entire project, you begin to see the advantages. COMPASS all but eliminates the need for adding presentational classes (e.g. “align-right” or “big-text”) without making you constantly repeat yourself. In addition, it’s feasible to completely change a color scheme for an entire project simply by updating a few variables and perhaps changing an image path or two.

This is only a small example of the power and flexibility COMPASS offers, but you can begin to see its amazing potential.


Where to Go From Here


If you’d like to learn more about COMPASS, you can check them out at compass-style.org. The documentation is particularly well done.

Keep in mind that COMPASS uses SASS and Blueprint, so you may want to read up on those as well.

You’ll also need a working installation of Ruby and RubyGems to install and use COMPASS.

Finally, we recommend taking a look at the Setup & Install Guide on the COMPASS website.


More About: coding, compass, CSS, dev & design, framework, web design, Web Development

For more Dev & Design coverage:

The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

Learning to code is something every tech-minded person should try at least once — and the wealth of online courses, many of which are free or surprisingly inexpensive, make learning about programming easier than ever.

If you’re thinking of picking up C++, Ruby on Rails, Python or Java, these online options might be a good way to test the waters of programming before you fully invest your time and money in formal training or certifications. And if you’re a veteran programmer in need of resources for learning new languages, these sites might help you a bit, too.

One disadvantage of learning to code through an online platform is the lack of face-to-face interactions with an instructor. But don’t let that intimidate you — Google, Stack Overflow, and other online forums (even Twitter) are great ways to get help when your code won’t compile, you don’t understand a concept or you just get frustrated.

In the comments, let us know if you’ve found other great resources for learning about programming — or other sites for support and Q&A for newer developers.

UC Berkeley Webcast/Courses

The University of California at Berkeley has an extensive catalog of webcasts, including events and courses. The coursework is entirely free to access, and it includes video and audio webcasts of computer sciences classes from the current semester all the way back to 2003.

Mozilla’s School of Webcraft

Mozilla’s 100% free developer training site is all about teaching noobs and jedis alike how to code. If you want to get started coding with something like HTML or if you’re an experienced dev who wants to dive into Python, the School of Webcraft is something worth checking out. Several courses generally run simultaneously, and new classes are being drafted all the time.

Google Code University

From Google Code, we have the Code University, a free and fascinating resource. And of course, it has its own forums for learners to ask questions and get help. True beginners can also start out with the introductions and tutorials, which are designed with newer devs in mind.

MIT’s OpenCourseWare

If you’ve dreamed of studying computer science at one of the U.S.’s leading tech institutions, here’s your chance. MIT’s free and accessible courses are great for ambitious would-be coders. Check out the full list of courses for computer science, which include introductions to Java, Python, C++ and more.


Series Supported by Rackspace


rackspace

The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.


More Dev & Design Resources from Mashable:


Ruby on Rails: Scaling Your App for Rapid Growth
Should Your API Be Free or Pay-to-Play?
HOW TO: Get Devs to Use Your Company’s API
Should Your Company Offer an API?
10 Tools for Getting Web Design Feedback

Top image courtesy of iStockphoto user nullplus

More About: beginner, code, coding, developers, development, education, learning, programming, web development series

For more Dev & Design coverage:




As a class, developers have had a fantastic year in 2010.

We’ve made headlines, grabbed the limelight, been vilified and glorified beyond all reason and gotten paid pretty nicely along the way. And the bubble of consumer web apps just continues to swell, so there are no signs (yet) that 2011 will bring anything short of grandeur for the web and mobile development communities.

Looking ahead to what the coming year might hold, there are a few sure bets and a few speculations we’d like to offer. Some are, as noted, almost certainly bound to come true. Others are more along the lines of hopes and prayers than hard-and-fast predictions we’d stake money on.

With that in mind, here are 10 things we think the world of hacking will hold in 2011.


1. There Will Be a Need to Understand and Optimize for All Form Factors


Even the most brainless of “social media gurus” could tell you this one. With the surging popularity and newfound accessibility and affordability of smartphones — thanks in large part to the growth of the Android platform — we’ve had to optimize for the mobile web and learn about mobile applications a lot in the past year in particular.

Now, as tablets begin to creep into the market, we’re having to craft new experiences for those, as well. We’re constantly forced to consider form factor when creating new sites and apps. Will it run Flash? What about screen resolution? Font size?

Almost every developer worth his or her salt will have to become increasingly adept at developing for the myriad form factors set to dominate the gadget market in 2011.


2. There Will Be Breakout, Cross-Platform Mobile Development Tools


With all the mobile growth that’s been occurring, especially given the current state of the iOS/Android market shares, the time has never been riper for a great mobile framework, SDK or IDE to enter the arena.

Hopefully, sometime in 2011, we’ll see a new group of flexible and robust tools that can facilitate app development for any number of operating systems — including tablet-specific or forked OSes. We’re talking more than WYSIWYG, DIY app-builders and more than iPhone-to-Android porting tools; we want to see serious, mobile-centric power tools in 2011.


3. Investment in Cloud-Based, Collaborative Development Tools


We’ve seen some interesting starts in community-based, online coding. There are a few collaborative code editing apps, some of them with real-time capabilities.

We’re looking forward to seeing more and better apps for cloud-based, collaborative coding in 2011 — something like a better Wave, created specifically with hackers in mind. This will allow for better and faster work to be generated by an increasingly decentralized hacker community. It’ll also pave the way for improved on-the-job learning and open-source hacking.


4. WYSIWYG Tools Get Better and Grow


While WYSIWYG tools of the past — and, who are we kidding, the present — often lead to spaghetti code of the ugliest variety, we just keep seeing more and more of them.

We’re going out on a limb and predicting (or hoping) that WYSIWYG and split-screen (WYSIWYG and code) developer tools become more sophisticated. Whether they get better or not, they’re definitely going to continue to proliferate, especially for the novice coder and the DIY non-coder markets. Still, we’re being told the code on the other side of the GUIs is getting better all the time.

Who knows? 2011 could be the year WYSIWYGs stop sucking.


5. We’ll Keep Building “Touchable,” App-like UIs


Facebook Mobile Privacy

All that stuff we said earlier about form factors kind of applies here, too, but in reverse. Your sites will have to look better on mobile devices and tablets, yes; but also, they’ll continue to natively look and feel more like mobile and tablet apps.

Some folks, a couple of Mashable staffers included, aren’t happy about the app-itization of the entire Internet. Call us old-fashioned, but we like our websites to be websites and our mobile apps to be mobile apps.

The average consumer, however, seems to delight in the shiny, touchable, magazine-like interfaces taking over the iPad and similar devices. Expect to be asked to make more and more app-like sites in 2011.


6. There Will Be a Higher Standard for Web and Mobile Security


The past year has been a bit of a horror show when it comes to web security. There have been a handful of high-profile hacks that exposed user data to the world; there was also much confusion on the user’s side of the screen as to how security works on a personal level.

We predict — nay, we dream — that in 2011, developers of consumer-facing apps will be extra careful with things like data encryption, user privacy controls and other security issues.


7. Third-Party App Development Will Plateau


Building a Facebook app or a Twitter app was all the rage in 2009, but something shifted in 2010, right around the time of Twitter’s Chirp developer conference: Developers found out that building on someone else’s platform was a good way to set yourself up for failure, especially when the platform decides to shift direction, change its APIs, acquire a competitor, or simply change its terms of use.

We predict that developing these kinds of apps will plateau and even taper off in 2011. The web is glutted with third-party social media tools; many devs are beginning to realize there’s more money and more interesting challenges elsewhere. In the end, social networks will be more interesting to advertisers large and small than to independent and third-party developers.


8. Ruby Will Get Some Cool Optimizations and Tools


We’ve seen lots of cool tricks and optimization tweaks around Python and PHP; 2011, however, will be the year for better Ruby tools.

The Ruby language is becoming extremely popular in developing consumer-facing web apps, and we’re sure to see some big-name companies release open-source tools and even improvements to the Ruby core — think along the lines of what Facebook did last year with HipHop or Google’s Unladen Swallow project.


9. NoSQL Technologies Will Stake Their Ground


We’ve seen and heard interesting things from the NoSQL corners of the web this year… and by “interesting,” we don’t necessarily mean “good.”

NoSQL technologies have had some high-profile hiccups this year (remember that MongoDB/Foursquare disaster?), but we’ve been assured that what doesn’t kill NoSQL only makes it stronger and more stable.

That being said, we’re not predicting the demise of MySQL any time soon. As one astute Twitter friend wrote, “Relational databases have their place, as do NoSQL solutions. To blindly choose one over the other is shortsighted.”


10. Open-Source Software Will See Unprecedented Growth


Open-sourcing interesting or unused tech is a trend we like to see from companies like Google and Facebook. In fact, we hope to see even more open-source contributions from proprietary software giants in 2011.

It’s not just the big players who are writing great open-source code. We know a lot of web startups are working on internal tools that’ll also be open-sourced in 2011. There are more youngsters (and not-so-youngsters) joining the ranks of hackers every year; many of them are being encouraged by sites like this one to make valuable contributions to the open-source community.

We predict more awesome open-source software than ever in 2011. Will it be a victory by Stallman‘s standards? Probably not, as it won’t be exclusive of proprietary software creation, sale and licensing. But the trend toward more FOSS is a good one, and one that we’ll continue to report on in the year to come.


What Are Your Predictions?


In the comments, let us know your predictions for what 2011 may bring to the world of web and mobile development. And if you disagree with our predictions, let us know. They’re only educated guesses, after all; join the conversation.


More Dev & Design Resources from Mashable:


HOW TO: Make the Most of TextMate
Hacker Web Design: Words of Wisdom for Building Great Apps
5 Better Ways to Read “Hacker News”
A Beginner’s Guide to Integrated Development Environments
10 Chrome Web Apps to Check Out

Image courtesy of iStockphoto, loops7

More About: app development, coding, developers, development, hack, hacking, List, Lists, predictions, predictions-2011, web design, Web Development

For more Dev & Design coverage: