Skip to content

Instantly share code, notes, and snippets.

@rlbruderick

rlbruderick/dabblet.css

Created February 20, 2013 08:44
Show Gist options
  • Save rlbruderick/4994032 to your computer and use it in GitHub Desktop.
Save rlbruderick/4994032 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
background: #f06;
background: linear-gradient(35deg, #f26, yellow);
min-height: 10%;
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<body>
<div class="accordion">
<span id="tab1"></span>
<span id="tab2"></span>
<span id="tab3"></span>
<span id="tab4"></span>
<div class="tabs">
<dl class="tab1">
<dd>
<a href="#tab1">Tab #1</a>
<div><p>Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.</p></div>
</dd>
</dl>
<dl class="tab2">
<dd>
<a href="#tab2">Tab #2</a>
<div>
<p>
<iframe width="560" height="315" src="http://www.youtube.com/embed/8o_uw_zwdEs" frameborder="0" allowfullscreen></iframe>
</p>
</div>
</dd>
</dl>
<dl class="tab3">
<dd>
<a href="#tab3">Tab #3</a>
<div><p>CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.</p></div>
</dd>
</dl>
<dl class="tab4">
<dd>
<a href="#tab4">Tab #4</a>
<div><p><img src="images/icons.jpg" alt="" /></p></div>
</dd>
</dl>
</div>
</div>
</body>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment