From 665aa46fc0ba4480a2bf723cc3afe8f6558260e4 Mon Sep 17 00:00:00 2001 From: Scott Kellum Date: Sat, 3 Aug 2013 11:54:15 -0400 Subject: [PATCH] copy tweaks --- source/2013-07-25-meta-frameworking-with-compass.html.erb | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/source/2013-07-25-meta-frameworking-with-compass.html.erb b/source/2013-07-25-meta-frameworking-with-compass.html.erb index ccb4e9c..09ee204 100644 --- a/source/2013-07-25-meta-frameworking-with-compass.html.erb +++ b/source/2013-07-25-meta-frameworking-with-compass.html.erb @@ -9,7 +9,7 @@ style: metaframeworking ---
-

When talking about Compass most people think of it as a mixin library. While Compass has a great mixin library, it is really a framework for building frameworks with a mixin library. While most people compare Bourbon with Compass they are two different things. You can install Bourbon with Compass, you can’t install Compass with Bourbon. In this article I’m not going to go deep into either of these mixin libraries. Instead, I am going to do a deep dive into the frameworking capabilities of Compass, show you how to create your own personal framework, and how to share that framework or tool as a Compass extension.

+

When talking about Compass most people think of it as a mixin library. While Compass has a great mixin library, it is really a framework for building frameworks with a mixin library. People often compare Bourbon with Compass but they are two different things. You can install Bourbon with Compass, you can’t install Compass with Bourbon. In this article I’m not going to go deep into either of these mixin libraries. Instead, I am going to do a deep dive into the frameworking capabilities of Compass, show you how to create your own personal framework, and how to share that framework or tool as a Compass extension.

@@ -17,9 +17,9 @@ style: metaframeworking

Before going into the technical side of things, lets talk about retaining knowledge. As people who work on the web there are so many places we learn and draw inspiration from. There are so many great blog posts, design books, and ideas in our industry today. With all this great stuff it’s hard to trust our brains to remember it all. Even if we can remember the CSS or design technique how are we supposed to remember exactly how to implement the more complicated techniques without going back and looking them up?

-

Lets take a look at storing this information in frameworks. Frameworks are libraries of knowledge with the advantage that they can be shared and implemented easily. When I share my framework with my team or with the world they immediately have access to all the tools and techniques I know. As others add to this framework I immediately have access to information they know. This makes a framework an ideal place to store information. Because this is knowledge compiled by an individual or a group frameworks also have a voice and option as to how things should be done weather it is how classes are named or where common breakpoints fall many of these solutions are from the perspective of those that make them. Take a look at resets for example; resets are one of the most basic components web developers work with and they are usually the first thing loaded in most frameworks. Now think about the research that goes into making resets with all the various browsers and elements available. Getting everything styled consistently in a good reset is incredibly difficult because someone needs to cross check all these subtle variations. Resets, unlike normalize, make assumptions about how you the developer want page margins and other styles to look. The research part is the kind of work I really don’t want to do to make everything consistent and will gladly trust people like Eric Meyer and Nicolas Gallagher to handle it for me.

+

Lets take a look at storing this information in frameworks. Frameworks are libraries of knowledge with the advantage that they can be shared and implemented easily. When I share my framework with my team or with the world they immediately have access to all the tools and techniques I know. As others add to this framework I immediately have access to information they know. This makes a framework an ideal place to keep information that I have learned and build on it. Frameworks also store the implementation allowing its users to immediately apply a technique by adding a class or mixin. Take a look at resets for example; resets are one of the most basic components web developers work with and they are usually the first thing loaded in most frameworks. Now think about the research that goes into making resets with all the various browsers and elements available. Getting everything styled consistently in a good reset is incredibly difficult because someone needs to cross check all these subtle variations. Resets, unlike normalize, make assumptions about how you the developer want page margins and other styles to look. The research part is the kind of work I really don’t want to do to make everything consistent and will gladly trust people like Eric Meyer and Nicolas Gallagher to handle it for me.

-

Weather it’s a reset, grid, or form styles, these small components are often bundled into larger frameworks of knowledge. Recently we are seeing massive frameworks like Bootstrap and Foundation which solve just about every problem ever as well as smaller frameworks made to solve more basic problems and leave the rest to us like inuitcss. These are all fantastic libraries of information to draw on and they suit the needs of there creators exceedingly well. However these frameworks have a point of view and makes assumptions on both design and implementation that might not work best for you. The larger the framework, the more assumptions are made. For example, just about every large framework uses a 12 column grid. 12 column grids are great and work for most people because they can be easily subdivided into nice even units. While this may work great for most people, if my design required a 10 column grid then a 12 column grid would not work very well for my needs.

+

Whether it’s a reset, grid, or form styles, these small components are often bundled into larger frameworks of knowledge. Recently we are seeing massive frameworks like Bootstrap and Foundation which solve just about every problem ever as well as smaller frameworks made to solve more basic problems and leave the rest to us like inuitcss. These are all fantastic libraries of information to draw on and they suit the needs of their creators exceedingly well. However these frameworks have a point of view and make assumptions on both design and implementation that might not work best for you. The larger the framework, the more assumptions are made. For example, just about every large framework uses a 12 column grid. 12 column grids are great and work for most people because they can be easily subdivided into nice even units. While this may work great for most people, if my design required a 10 column grid then a 12 column grid would not work very well for my needs.

So the question arises, how can I execute on my unique project goals and implementation while not having to start everything from scratch? How can I build on information and assume knowledge from others without buying into all of their ideas? Maybe you like the structure of one framework but the grids in another, how do you win at all the things without compromise?

@@ -80,6 +80,7 @@ style: metaframeworking

So now that you have made your awesome framework of one button I am sure you want to share it with the world so they can see how great it is. All you have to do now is add two files to your project, one is a gemspec and the other is a simple ruby file of the same name as your extension in a folder called lib. If you just drop these files in, all you have to do is run through changing my-exteion to the name of your extension and you are good to go. The last step is running gem build my-extension.gemspec and then gem push my-extension-0.0.1.gem and people can download and install that gem to use in their own projects. I also encourage you also maintain a Bower version so people have the option to manage their Compass extension through Bowers package management tools.

Few, that may have been a lot to take in. To make things simpler I consolidated this into a meta-frameworking github repo so you can get started with some working examples.

+