cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil earum maiores vitae libero ad soluta distinctio iure illum cupiditate illo aliquam quidem a enim perferendis velit consequatur natus quae molestias?</p>
<h2>Level 2 heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laboriosam assumenda natus alias quaerat impedit error dolorem consequatur vel aliquid esse maxime inventore et a sapiente tempora perferendis quidem deleniti.</p>
              @import "compass/css3";

// Config
$base-line-height:     24;
$base-font-size:       16;

$rhythm-unit:          $base-line-height;

$guide-color:          #FF6BA6;

// Return an em value based on the $base-font-size or contextual size. Thanks @ijy https://gist.github.com/ijy/1441967
@function em($target, $context: $base-font-size) {
   @if $target == 0 { @return 0 }
   @return $target / $context + 0em;

// Generate a baseline guide equal to the rhythm unit
@mixin baseline-guide {
	@include background-image(linear-gradient($guide-color 1px, transparent 1px));
	background-size: 100% em($rhythm-unit);

// Calculate an em font size based on the base font size or passed context. If $line-height is true, set a line height equal to a multiple of the rhythm unit. Thanks @csswizardry & @redclov3r: https://github.com/csswizardry/inuit.css/blob/7dbc892f8d298795e19aeb64d1369ae3271561d1/generic/_mixins.scss
@mixin font-size($font-size, $context: $base-font-size, $line-height: false){
    font-size: ($font-size)*1px; 
    font-size: ($font-size / $context)*1em;
    @if $line-height == true{
        line-height:ceil($font-size / $rhythm-unit) * ($rhythm-unit / $font-size);

// Simple reset to remove default margins
* {
  margin: 0;

// Apply the base font size, base line height, and baseline guide
html {
  	font-size: $base-font-size*1px;
  	line-height: $base-line-height/$base-font-size;
  	@include baseline-guide;

p {
  // Add margin bottom equal to 1 rhythm unit
  margin-bottom: em($rhythm-unit);

h2 {
  // Change the h2 font size and set the line height to match the rhythm
  @include font-size(32, $line-height: true);
  // Add margin bottom equal to 1 rhythm unit
  margin-bottom: em($rhythm-unit, 32);
Loading ..................