If you're a hard-core programmer (not into all the design-y stuff), or one of our amazing clients, you may not have noticed that Magento Enterprise Edition 1.14 and Magento Community Edition 1.9 have upgraded to a SASS/Compass framework for responsive websites. Sass is an extension of CSS that adds power and elegance to the basic language, while Compass is a framework that extends SASS; it brings with it a lot of CSS3 mixins and useful CSS stuff.

This has caused a bit a routine change for me. But while it was a short struggle, I'm certainly happy with the shift in productivity. The power of SASS and Compass is unquestionable - practically 1 step colour scheme changes, nested rules, variables, pre-made mixins, etc... And this system will only getter better with more use and familiarity.

For me, one of the strongest developments in this language is nested rules. It makes so much sense, one wonders why CSS wasn't naturally developed this way. Here's a quick, layman's terms, explanation:

Say you have 3 boxes with some styles on each one of them, and they are nested within each other. Here's a diagram to help you out with what I'm saying.

.box1 has a teal background, .box2 has a white border, and .box3 has some text in it. I usually wouldn't need to nest rules for a design this simple, but for the sake of keeping this extremely easy to understand, we'll pretend we have to. Here's what the CSS would look like:

/* Styles for box1 */
.box1 {
	background-color: #000;
}

/* Styles for box2 */
.box1 .box2 {
	border: 1px solid #fff;
}

/* Styles for box3 */
.box1 .box2 .box3 {
	color: #49c8f; 
	font-size: 14px; 
	font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
}

Notice that to apply style to .box3 I've had to precede it with .box1 and .box2? That's because to get to .box3, I have to tell the computer "hey, I want .box3. It's located inside of .box2, and .box2 is located inside .box1." Looking above, you can see how cumbersome this could get. Check out how the nesting works:

.box1 {
	background-color: #000;

	.box2 {
		border: 1px solid #fff;

		.box3 {
			color: #49c8f; 
			font-size: 14px; 
			font-family: 'Open Sans',  Helvetica, Arial, Sans-Serif;
		}
	}
}

You'll notice that .box3 is nested within .box2's curly brackets, which is similarly nested within .box1's curly brackets. Upon saving, this code will go through a compiler which will output that first set of CSS code I showed you. Pretty spiffy, right?

If you want to learn more, check out these resources:
Magento Responsive Web Design Developer's Guide
Sass
Compass

 
Jeff Yard, head of business development here at Collins Harper, recently sat down with Nextopia at the Magento Imagine trade show to discuss the watchit.ca project, and why Collins Harper recommends Nextopia to its clients. Check out the highlights of the discussion below!
 

Nextopia Partner & Customer

Success Story

Nextopia & Collins Harper Increase WatchIt.ca’s Monthly Sales by 20%

“We will continue to strongly recommend Nextopia to our clients.”

— Jeff Yard, Head of Business Development, Collins Harper

 
Collins Harper: An Introduction
Since 2009, Collins Harper has worked with a wide variety of Enterprise Edition and Community Edition Magento clients and has provided top-tier design and development to the likes of Watchit.ca, Pleasemum.com, and Silvergoldbull.com. Collins Harper has also developed 26 payment modules for 11 unique payment gateways and 14 logistics modules, which together power thousands of eCommerce businesses.

Why did Collins Harper Choose Nextopia?
Before working with Nextopia, Collins Harper had worked with several of Nextopia’s competitors; however, after meeting several sales reps at various industry events and communicating by phone and email with Nextopia’s team, Collins Harper was convinced. They came to find that Nextopia’s solutions, support, and customer service were the best in the industry. Jeff Yard, Head of Business Development at Collins Harper, stated: “We now know that this early impression of Nextopia was accurate, and we continue to be impressed with their dedication to their clients.”

How Nextopia Helps
Nextopia allows Collins Harper to offload complex functionality to Nextopia’s team of experts, which streamlines the development process and provides clients with a solution that would otherwise be unavailable. The strong relationship that exists between Nextopia and Collins Harper provides increased opportunities for both parties.
 

“The staff at Nextopia were a big part of the determination to work
with Nextopia. People are what makes up a business, and the people
at Nextopia are some of the best in the industry.”

— Jeff Yard, Head of Business Development, Collins Harper

 
Watchit.ca: A Practical Example
“We are extremely satisfied with out results since the installation of Nextopia.” - Watchit.ca

Watchit.ca loved that their search results were now very detailed and accurate. They also loved Nextopia’s merchandising capabilities, which called them to adapt their banners and displayed products for quick and easy promotional campaigns. Nextopia’s analytics suite made it easy for Watchit.ca to see which search terms were receiving the most hits, and which were receiving none; giving them new-found control over their inventory management. For example, Watchit.ca found that, “watch boxes are a highly searched term, [so] we were able to order in those items so as to best fulfil our customer’s needs and increase sales.”

A Strong Recommendation
Collins Harper strongly recommends Nextopia to their clients on a regular basis. Collins Harper has recommended all of Nextopia’s products to its clients, in particular Nextopia eCommerce Site Search Navigation, and Enhanced Autocomplete. Watchit.ca is just one example of a successful project between Nextopia and one of our valued Partners. With partners like Collins Harper, Nextopia continues to create lasting, mutually beneficial relationships with industry leaders all over the world.

“10 out of 10, top rate people!” - Jeff Yard, Head of Business Development
Collins Harper

Connect your store to Canada Post and get $100 in shipping!

Shipping is key to running a successful online store. Customers expect a seamless end-to-end online shopping experience and you need efficient and automated tools to fulfill orders.

A year ago, along with Magento and Canada Post, we introduced new extension for Canada Post; enabling you to do display live shipping rates, tracking information, automate shipping label printing and much more. You can learn more here.

Today we are excited to announce that we have teamed up with Magento and Canada Post to offer you $100 of shipping when you connect your store to Canada Post and enable these features.

To take advantage of this offer to receive $100 of shipping from Canada Post^TM, follow these easy steps outlined here.

Read the fine print for full rules and regulations.

GET CANADA POST CONNECTED

Canada PostTM is a Trademark of Canada Post Corporation Visa® is a registered Trademark of Visa