Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<ul class='link-list'>
	<li>
		<a href='https://codepen.io/sheriffderek/pen/PjoqPm' target='code'>→ code editor view</a>
	</li>
	<li>
		<a href='https://s.codepen.io/sheriffderek/debug/PjoqPm' target='debug'>→ for testing in browser</a>
	</li>
</ul>



<article>

	<h1>Modular type styles: loud-voice()</h1>

	<p>standard-type() modular type styles... shown here with Stylus, consectetur adipisicing elit. Veniam repellendus laborum molestiae similique necessitatibus at eos dolore hic nihil suscipit aspernatur aperiam tempore rerum deleniti expedita laudantium, iste delectus veritatis.</p>
	
	<h2>Sub heading with strong-voice()</h2>

	<p><strong>standard-type() (strong)</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam repellendus laborum molestiae similique necessitatibus at <em>example of 'emphasis' or italic </em>nihil suscipit aspernatur aperiam tempore rerum deleniti expedita laudantium, iste delectus veritatis.</p>
	
	<p>Want to learn all about CSS and Stylus? <a href='https://www.codementor.io/sheriffderek' target='codementor'>https://www.codementor.io/sheriffderek</a></p>
	
</article>


<div class='example-box'>
	<span><!-- hi --></span>
</div>
              
            
!

CSS

              
                
//// $reset
a
	color: inherit

//// $color
$black = #111
$white = #fff

$gray = lighten($black, 50%)
$gray-light = lighten($gray, 20%)
$gray-dark = darken($gray, 20%)

$color = #FF6E40 // change me...
$color-light = lighten($color, 40%)
$color-dark = darken($color, 20%)

//// $space
$pad = .6rem // universal padding unit

//// $break-points
$break-point-1 = '(min-width: 500px)'
$break-point-2 = '(min-width: 900px)'

//// $type patterns
standard-type()
	font-size: 15px
	line-height: 1.4
	strong
		font-weight: bold
	em
		font-style: italic
	@media $break-point-1
		font-size: 16px

strong-voice()
	font-size: 22px
	font-weight: bold
	line-height: 1.2
	@media $break-point-1
		font-size: 24px

loud-voice()
	font-size: 30px
	line-height: 1.2
	@media $break-point-1
		font-size: 34px
	@media $break-point-2
		font-size: 40px

//// $style
body
	padding: $pad

// $article
article
	padding: $pad*2 0
	p
		standard-type()
		max-width: 740px // people don't like to read long lines
		color: $gray
		&:not(:first-of-type) // all but the first
			margin-top: $pad*2
		a
			color: $color-dark
		+ h2
			margin-top: $pad*4
	h1
		loud-voice()
		color: $color
		+ p // any paragraph following an h1
			margin-top: $pad*2 // redunant here - but for example
	h2
		strong-voice()

















/* just for fun */
.example-box // I don't know what this box has to do with anything... maybe to show the media query change?
	width: 200px
	height: 200px
	background: $color
	padding: $pad
	color: $white
	span
		opacity: .7
		&:after
			content: 'Default styles → "cascade" top-down'
	@media $break-point-1
		background: $color-dark
		span
			&:after
				content: 'After $break-point-1'
	@media $break-point-2
		background: $color-light
		span
			&:after
				content: 'After $break-point-2'

* 
	transition: .2s
              
            
!

JS

              
                
              
            
!
999px

Console