Skip to content

Commit

Permalink
copy tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
scottkellum committed Aug 3, 2013
1 parent bc69df7 commit 665aa46
Showing 1 changed file with 4 additions and 3 deletions.
7 changes: 4 additions & 3 deletions source/2013-07-25-meta-frameworking-with-compass.html.erb
Expand Up @@ -9,17 +9,17 @@ style: metaframeworking
---

<div class="lede">
<p>When talking about <a href="http://compass-style.org/">Compass</a> most people think of it as a mixin library. While Compass has a great mixin library, it is really a framework for building frameworks <em>with</em> a mixin library. While most people compare <a href="http://bourbon.io/">Bourbon</a> 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.</p>
<p>When talking about <a href="http://compass-style.org/">Compass</a> most people think of it as a mixin library. While Compass has a great mixin library, it is really a framework for building frameworks <em>with</em> a mixin library. People often compare <a href="http://bourbon.io/">Bourbon</a> 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.</p>
</div>

<div class="contain">
<div class="g8-2">

<p>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?</p>

<p>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 <a href="http://meyerweb.com/">Eric Meyer</a> and <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a> to handle it for me.</p>
<p>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 <a href="http://meyerweb.com/">Eric Meyer</a> and <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a> to handle it for me.</p>

<p>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 <a href="http://twitter.github.io/bootstrap/">Bootstrap</a> and <a href="http://foundation.zurb.com/">Foundation</a> 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 <a href="http://inuitcss.com/">inuitcss</a>. 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.</p>
<p>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 <a href="http://twitter.github.io/bootstrap/">Bootstrap</a> and <a href="http://foundation.zurb.com/">Foundation</a> 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 <a href="http://inuitcss.com/">inuitcss</a>. 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.</p>

<p>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?</p>
</div>
Expand Down Expand Up @@ -80,6 +80,7 @@ style: metaframeworking
<p>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 <a href="https://github.com/scottkellum/meta-frameworking/blob/master/compass-extension/my-extension.gemspec">gemspec</a> and the other is a <a href="https://github.com/scottkellum/meta-frameworking/blob/master/compass-extension/lib/my-extension.rb">simple ruby file</a> of the same name as your extension in a folder called <code>lib</code>. If you just drop these files in, all you have to do is run through changing <code>my-exteion</code> to the name of your extension and you are good to go. The last step is running <code>gem build my-extension.gemspec</code> and then <code>gem push my-extension-0.0.1.gem</code> and people can download and install that gem to use in their own projects. I also encourage you also maintain a <a href="https://github.com/scottkellum/meta-frameworking/blob/master/compass-extension/bower.json">Bower</a> version so people have the option to manage their Compass extension through Bowers package management tools.</p>

<p>Few, that may have been a lot to take in. To make things simpler I consolidated this into a <a href="https://github.com/scottkellum/meta-frameworking">meta-frameworking github repo</a> so you can get started with some working examples.</p>

</div>
</div>

Expand Down

0 comments on commit 665aa46

Please sign in to comment.