Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h1>This is a heading, level 1</h1>
​
    <nav>
        <ul class="responsive-nav">
            <li><a href="#">Lorem</a></li>
            <li><a href="#">Ipsum</a></li>
            <li><a href="#">Dolor</a></li>
            <li><a href="#">Sit Amet</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
​
    <p>This is a paragraph.</p>
    <h2>This is a heading, level 2</h2>
    <ul>
        <li>This is a list item</li>
        <li>This is the second item</li>
        <li>This is the fourth item</li>
    </ul>
    <p>Here’s some more text</p>
​
    <blockquote>
        <p>This is some sort of quote.</p>
    </blockquote>
​
    <section class="flow">
        <h2>Here’s another heading.</h2>
        <p>Here’s some text under that heading.</p>
        <ul>
            <li>This is a list item.</li>
            <li>Here’s another one.</li>
        </ul>
        <p>And again some text.</p>
        <blockquote>
            <p>Autem, unde, excepturi quibusdam voluptates dignissimos itaque a rerum possimus suscipit. Ad, molestias, reprehenderit autem sequi libero soluta dicta. Ratione, beatae, officiis!</p>
        </blockquote>
        <h3>Level 3 heading.</h3>
        <p>Some more text. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <p> Autem, unde, excepturi quibusdam voluptates dignissimos itaque a rerum possimus suscipit. Ad, molestias, reprehenderit autem sequi libero soluta dicta. Ratione, beatae, officiis!</p>
    </section>
</body>
</html>
 
:root {
            var-vertical-base: 1.375;
            var-lapsize: 25em;
        }
​
        .flow {
            var-flow-space: var(vertical-base);
            var-flow-liststyle: disc;
            background-color: #eee;
        }
​
        @media screen and (min-width: 25em) {
            :root {
                var-responsive-list: inline;
                var-screen-category: small-lap;
            }
        }
        @media screen and (min-width: 48em) {
            :root {
                var-screen-category: lap;
            }
        }
        @media screen and (min-width: 80em) {
            :root {
                var-screen-category: desk;
            }
        }
​
        ul, li {
            margin: 0;
            padding: 0;
            list-style: var(flow-liststyle, none);
        }
        ul {
            padding-left: calc(var(flow-space, 0) * 1rem);
        }
​
        .responsive-nav li {
            display: var(responsive-list, block);
        }
​
        p, ul, h1, h2, h3, h4, h5, blockquote, aside {
            margin: 0;
            margin-bottom: calc(var(flow-space, 0) * 1rem);
        }
        p, li {
            line-height: var(vertical-base);
        }
        blockquote {
            font-style: italic;
            padding: calc(var(flow-space, 0) * 1rem);
        }
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers