stacyk

<div class="primary">
  Resize me. Primary container.
</div>
<div class="secondary">
  I am a sidebar.
</div>

stacyk

<ol class="four">
	<li>This is list item one</li>
	<li>This is what I like to call list item number two</li>
	<li>I am totally the third list item on this page, at least for now</li>
	<li>Last, but not least, I am number four</li>
</ol>

stacyk

	<div lang="ru-RU">
			<h1>«Сколково Александром Галицким And some English Words</h1>
			<p>Some English words and then some not English: управляющий директор Фонда </p>
	</div>

	<div lang="en-En">
			<h1>«Сколково Александром Галицким And some English Words</h1>
			<p>Some English words and then some not English: управляющий директор Фонда </p>
	</div>

stacyk

<div class="primary">
  <h1></h1>
  <h2>Primary container.</h2>
</div>
<div class="secondary">
  <h1>I am a sidebar.</h1>
  <h2>Secondary container</h2>
</div>

stacyk

<ol class="four">
	<li>This is list item 1.</li>
	<li>This is step 2</li>
	<li>Right here, this is step three</li>
	<li>4 is more!</li>
</ol>

stacyk

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

@mixin font($fontstack) {
  $segoe: (
    light: "wf_segoe-ui_light",
    normal: "wf_segoe-ui_normal",
    semibold: "wf_segoe-ui_semibold",

stacyk

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// Bourbon (v4.0.2)
// Neat (v1.6.0)
// ----

@import "bourbon/bourbon";
@import "neat/neat";

stacyk

<h1>Breakpoint Sass</h1>
<h2>Even better inline media queries</h2>

<div class="foo"></div>
<div class="baz"></div>
<div class="bar"></div>

<p>Please resize me.</p>

stacyk

<div class="foo">
  <p>Please resize me.</p>
</div>
<div class="baz">
  <p>Please resize me.</p>
</div>

stacyk

<form role="search" method="get" class="search-form" action="http://msdn.wdslab.com/">
	<label for="search-field">
		<span class="screen-reader-text">Search for:</span>
		<input type="search" class="search-field" value="" name="s">
	</label>
	<input type="submit" class="search-submit" value="Search">
</form>