codingdesigner

A Pen by Mason Wendell

A Pen by Mason Wendell on CodePen.

License.

codingdesigner

<h1>Breakpoint</h1>
<ul>
  <li>media query shortcuts</li>
  <li>media query variables</li>
  <li>convert px to ems</li>
  <li>resolution conversion and prefixing</li>
  <li>no-query fallbacks (IE8!)</li>
  <li>media query context inspection (frameworks)</li>
</ul>

codingdesigner

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "breakpoint";

/* SURPRISE! This is broken in Breakpoint 2.0.7 */
@include breakpoint(max-width 350px, 500px 600px) {
      left: -0.75em;

codingdesigner

<div class="foo">
    <h2>Hello World</h2>
</div>

codingdesigner

<article class="module">
    <h1>Welcome</h1>
    <p>This is a simple example using a combination of both REM and EM to help dictate margin, padding, etc in EM values, based on a font-size set in REM for the parent containers.</p>
    <p>Use Rems when a font size change is needed on an element, but then use EMs for padding, margins and any children elements.</p>
    <p>Just set the font size in Rems, and then for any other measurements use EMs by doing (desired px value/element font-size in pixels + em).</p>
</article>

<article class="module">
    <h1>Example</h1>
    <p>I'm sure that it would be possible to use Sass in a better (and cooler) way to start controlling the sizing even moreso and really harness Sass's power. I'll be looking into it, as I play further with this technique.</p>

codingdesigner

// ---
// Sass (v3.2.9)
// ---


%h1 {
  font-size: 2rem;
  line-height: 1.75;
}
%h2 {

codingdesigner

// ---
// Sass (v3.2.9)
// ---


h1 {
  font-size: 2rem;
  line-height: 1.75;
}
h2 {

codingdesigner

// ---
// Sass (v3.2.9)
// ---


h1 {
  font-size: 2rem;
  line-height: 1.75;
}
h2 {

codingdesigner

// ---
// Sass (v3.2.9)
// ---


@mixin button-base {
  border-radius: 0.2em;
  border: {
    width: 1px;
    style: solid;

codingdesigner

// ---
// Sass (v3.2.9)
// ---


@mixin button-base {
  border-radius: 0.2em;
  border: {
    width: 1px;
    style: solid;