123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <header>

    <h1>CSS1K</h1>
    <nav>
        <h2>Select a design</h2>
        <ul>
            <li><a href="./">Default</a>
                <a href="https://twitter.com/jacobrask">Jacob Rask</a></li>
            <li><a href="#stripes">Stripes</a>
                <a href="http://vasilis.nl">Vasilis van Gemert</a></li>
            <li><a href="#notepad">Notepad</a>
                <a href="https://twitter.com/eworm_">Wout Mager</a></li>
            <li><a href="#gardenof3den">Garden of CSS-3Den</a>
                <a href="http://designfestival.com">Alex Walker</a></li>
            <li><a href="#bbubles">Bbubles</a>
                <a href="https://cssing.org.ua">akella & Genn</a></li>
            <li><a href="#swiss">Swiss</a>
                <a href="http://chrsl.net">Chris Lee</a></li>
            <li><a href="#turnaround">Turn around</a>
                <a href="http://www.basvandorst.nl">Bas van Dorst</a></li>
            <li><a href="#whirl">Whirl</a>
                <a href="https://twitter.com/iamvdo">Vincent De Oliveira</a></li>
            <li><a href="#bundler_inspired">BundlerInspired</a>
                <a href="https://github.com/PhilG">PhilG</a></li>
            <li><a href="#oldie">Oldie</a>
                <a href="http://pointlessone.org">Alexander Mankuta</a></li>
            <li><a href="#typhon">Typhon</a>
                <a href="http://eswat.ca">ESWAT</a></li>
            <li><a href="#cube">Cube</a>
                <a href="http://be.net/iurevych">Sergii Iurevych</a></li>
            <li><a href="#northern-lights">Northern Lights</a>
                <a href="http://potapoff.org">Igor «SkAZi» Potapov</a></li>
            <li><a href="#skewed">Skewed</a>
                <a href="https://twitter.com/sntxrrr">Paul Steffens</a></li>
            <li><a href="#moonlight">Moonlight</a>
                <a href="https://twitter.com/derSchepp">Christian "Schepp" Schaefer</a></li>
            <li><a href="#typewriter">Typewriter</a>
                <a href="http://thisbythem.com">Lance Alton Troxel</a></li>
            <li><a href="#oldschool">Old School</a>
                <a href="http://romanliutikov.com">Roman Liutikov</a></li>
            <li><a href="#butchery">Butchery</a>
                <a href="http://vibby.fr">Vibby</a></li>
            <li><a href="#m6tt">m6tt</a>
                <a href="http://m6tt.com">Matt Woodfield</a></li>
            <li><a href="#1024-bytes">1024-bytes</a>
                <a href="https://github.com/faisalman">Faisalman</a></li>
            <li><a href="#molokai">Molokai</a>
                <a href="http://designtomarkup.com">Kien Nguyen</a></li>
            <li><a href="#android">Android</a>
                <a href="http://agat.in">Aleksej Romanovskij</a></li>
            <li><a href="#bookshelf">Bookshelf</a>
                <a href="https://github.com/SelenIT">SelenIT</a></li>
            <li><a href="#geocities">GeoCities</a>
                <a href="https://github.com/asavartsov/">Alexey Savartsov</a></li>
            <li><a href="#imbatman">I'm Batman</a>
                <a href="./">Paul Reid</a></li>
            <li><a href="#ebhoren">Ebhoren</a>
                <a href="http://www.dominic-mercier.com">Dominic Mercier</a></li>
            <li><a href="#facetime">Facetime</a>
                <a href="https://twitter.com/bnijenhuis">Bernard Nijenhuis</a></li>
            <li><a href="#cloudy">Cloudy</a>
                <a href="https://twitter.com/putnik">Sergey Leschina</a></li>
            <li><a href="#greymatter">Grey Matter</a>
                <a href="http://pepelsbey.net">Vadim Makeev</a></li>
            <li><a href="#blue_square">Blue square</a>
                <a href="https://twitter.com/hsablonniere">Hubert Sablonnière</a></li>
            <li><a href="#helvetipink">HelvetiPink</a>
                <a href="http://billkeller.name">Bill Keller</a></li>
            <li><a href="#tangerine">Tangerine</a>
                <a href="https://twitter.com/TheBenCourt">Ben Court</a></li>
            <li><a href="#summersun">Summer Sun</a>
                <a href="https://twitter.com/tanya_peasgood">Tanya Peasgood</a></li>
            <li><a href="#lessismore">Less is More</a>
                <a href="https://twitter.com/rob_balfre">Rob Balfre</a></li>
            <li><a href="#inset">Inset</a>
                <a href="http://www.hachemuda.com">Guillermo Latorre</a></li>
            <li><a href="#legible">Legible</a>
                <a href="http://lumens.se">Reimund Trost</a></li>
            <li><a href="#greenlemon">Green Lemon</a>
                <a href="https://twitter.com/d_radunz">Dirk Radunz</a></li>
            <li><a href="#wired">Wired</a>
                <a href="http://www.digitalwaxworks.com">Brett DeWoody</a></li>
			<li><a href="#narcissist">Narcissist</a>
                <a href="http://jackiebalzer.com">Jackie Balzer</a></li>
            <li><a href="#juizstar">Juiz Star</a>
                <a href="http://www.creativejuiz.fr">Geoffrey Crofte</a></li>
            <li><a href="#wolfr">Wolfr</a>
                <a href="https://twitter.com/wolfr_">Johan Ronsse</a></li>
            <li><a href="#fortyeight1k">fortyeight1k</a>
                <a href="http://michael.haschke.biz">Michael Haschke</a></li>
            <li><a href="#columns">Columns</a>
                <a href="http://rmcreative.ru">Alexander Makarov</a></li>
            <li><a href="#trainspotting">Trainspotting</a>
                <a href="http://www.hboaventura.com">Henrique Boaventura</a></li>
            <li><a href="#ribbon">ribbon</a>
                <a href="http://oodavid.com">David King</a></li>
            <li><a href="#solarized">Solarized</a>
                <a href="https://twitter.com/heirenton">heirenton</a></li>
            <li><a href="#openwater">Open Water</a>
                <a href="https://github.com/gilmoreorless">Gilmore Davidson</a></li>
            <li><a href="#html5colors">HTML5 Colors</a>
                <a href="http://www.theweblife.com">Michael Garrett Jones</a></li>
            <li><a href="#heart_css">heart css</a>
                <a href="https://github.com/kjchoy">Choy Kum Jin</a></li>
            <li><a href="#sourcy">Sourcy</a>
                <a href="http://kizu.ru/en/">Roman Komarov</a></li>
            <li><a href="#terminal">Terminal</a>
                <a href="https://twitter.com/PanyaKor">Mikhail Korepanov</a></li>
            <li><a href="#goodnight_moon">Goodnight Moon</a>
                <a href="http://livingcode.org">Dethe Elza</a></li>
            <li><a href="#fancy">Fancy"</a>
                <a href="http://www.trustweb.it">Michele Cipriani</a></li>
            <li><a href="#textlevels">Text Levels</a>
                <a href="http://www.patrickmann.com">Patrick Mann</a></li>
            <li><a href="#yelo">Yelo</a>
                <a href="http://bartdebruin.nl">Bart de Bruin</a></li>
            <li><a href="#spartan">Spartan</a>
                <a href="http://trentm.com">Trent Mick</a></li>
            <li><a href="#paper">paper</a>
                <a href="http://daniel-rauber.de">Daniel Rauber</a></li>
            <li><a href="#lucuma">Lúcuma</a>
                <a href="https://twitter.com/germanmartinez">Germán Martínez</a></li>
            <li><a href="#freshsoda">Fresh Soda</a>
                <a href="http://jungundwillich.de">Jan Ortgies</a></li>
            <li><a href="#ev">Ev</a>
                <a href="http://evangeneer.net">Mathieu Rochette</a></li>
            <li><a href="#b4ya11y">B4y & A11y</a>
                <a href="https://twitter.com/etBen">Benoit Klein</a></li>
            <li><a href="#adaptype">Adaptype</a>
                <a href="http://vasilis.nl">Vasilis van Gemert</a></li>
            <li><a href="#bleubleu">BleuBleu</a>
                <a href="http://www.leightonrodney.com">Leighton Rodney</a></li>
            <li><a href="#simpl">Simpl</a>
                <a href="http://www.neofyt.com">Neofyt</a></li>
            <li><a href="#mitchiru">Mitchiru</a>
                <a href="http://banquo.de">Michael Fritz</a></li>
            <li><a href="#casoy">Casoy</a>
                <a href="https://twitter.com/robertboloc">Robert Boloc</a></li>
            <li><a href="#thesimpleswede">The Simple Swede</a>
                <a href="http://www.tobiasphoto.com">Tobias Akeblom</a></li>
            <li><a href="#photobox">PhotoBox</a>
                <a href="https://stinkyinkshop.co.uk">Stinkyink</a></li>
            <li><a href="#desktop">Desktop</a>
                <a href="http://webmolot.com">Webmolot</a></li>
			<li><a href="#monochrome">Monochrome</a>
                <a href="http://tamerayd.in">Tamer Aydin</a></li>
            <li><a href="#expandable">Expandable</a>
                <a href="https://twitter.com/curlybrace">Dennis Madvedovsky</a></li>
            <li><a href="#bluebrush">BlueBrush</a>
                <a href="https://twitter.com/jennyhao">Jenny Hao</a></li>
            <li><a href="#noticeboard">Notice Board</a>
                <a href="http://www.about.me/niharsawant">Nihar Sawant</a></li>
            <li><a href="#triangulate">Triangulate</a>
                <a href="http://jumplinkdesign.co.vu">Sebastien Paquet</a></li>
            <li><a href="#aapl">AAPL</a>
                <a href="https://twitter.com/joffreyjaffeux">Joffrey Jaffeux</a></li>
            <li><a href="#yollaw">Yollaw</a>
                <a href="http://franzose.in">Yan Ivanov</a></li>
            <li><a href="#stretchy">Stretchy</a>
                <a href="https://twitter.com/mistadikay">Denis Koltsov</a></li>
            <li><a href="#smile">smile</a>
                <a href="https://twitter.com/realmuecke">Michael Scharnagl</a></li>
            <li><a href="#toolbar">Toolbar</a>
                <a href="http://chervonny.ru/en/">Maxim Chervonny</a></li>
            <li><a href="#roundrect">Round Rect</a>
                <a href="https://www.bitstorm.org">Edwin Martin</a></li>
            <li><a href="#therhythm">The Rhythm</a>
                <a href="http://kizu.ru/en/">Roman Komarov</a></li>
            <li><a href="#simplebox">SimpleBox</a>
                <a href="http://raelmax.com">Rael Max</a></li>
           </ul>
    </nav>

</header>


<article role="main">

    <header>
        <h2>The Beauty in <abbr>CSS</abbr> Design</h2>
        <p>A demonstration of what can be accomplished with only 1 <abbr title="Kibibyte">K</abbr> (<dfn title="1024 bytes">Kibibyte</dfn>) of <abbr>CSS</abbr>. Select any design from the list to load it into this page.</p>
    </header>

    <section>
        <h2>So What is This About?</h2>
        <p>Back in 2003 (that's 9 years ago!) <a href="http://mezzoblue.com">Dave Shea</a> launched the <a href="http://www.csszengarden.com"><cite><abbr>CSS</abbr> Zen Garden</cite></a>. It showcased what was possible with <abbr>CSS</abbr>-based designs, leading to an explosion in the use of CSS on the web. More recently, <a href="http://qfox.nl">Peter van der Zee</a> created <a href="http://js1k.com">JS1k</a>, a competition to build cool applications with no more than 1 <abbr>K</abbr> of JavaScript.</p>
        <p>A lot has happened since the Zen Garden days, and today you can do almost anything with only <abbr>CSS</abbr>. As <abbr>CSS</abbr> use is growing, so is the average <abbr>CSS</abbr> file size. Popular sites have in average <a href="http://httparchive.org/interesting.php#mostcss">27 <abbr>K</abbr> of <abbr>CSS</abbr></a>, but some use up to a megabyte of style sheets!</p>
        <p>Do we need that much? <b>CSS1K</b> invites you to show that web developers are more inventive than ever, and that limitations can sparkle creativity.</p>
    </section>

    <section>
        <h2>Participation</h2>
        <ol>
            <li>Submissions must consist of only <abbr>CSS</abbr>
            <li>Submissions may be up to 1 <abbr title="Kibibyte">K</abbr> (1024 bytes) minified
            <li>Vendor prefixes are <em>not</em> counted to the total number of bytes &ndash; submit your code unprefixed and we will add necesssary prefixes
            <li>Any external resources and images, including <code>data</code> <abbr>URI</abbr>'s, <code>@font-face</code> and <code>@import</code>'s, are forbidden
            <li>The page <a href="http://dowebsitesneedtolookexactlythesameineverybrowser.com">does not</a> have to look the same in every browser, but graceful degradation is encouraged
            <li>The submitted code is licensed under the <a href="https://www.opensource.org/licenses/mit-license.php">MIT License</a>
        </ol>
        <p>To participate, fork <a href="https://github.com/jacobrask/CSS1K/">CSS1K</a> at GitHub and send your submission as a pull request. You are free to update your style at any time by sending a new pull request. Please specify the name of the style, your own name, and a URL you want us to link to (such as your homepage). If you don't have a GitHub account, you can send in your submission via <a href="mailto:admin@css1k.com?subject=CSS1K Submission [Design name]">e-mail</a>.</p>
        <p>New entries and updates will be announced by <a href="https://twitter.com/CSS1K">@CSS1K on Twitter</a>.</p>
    </section>

</article>


<footer>

    <p>
        Licensed under the <a href="https://www.opensource.org/licenses/mit-license.php" rel="license">MIT license</a>.
        Hosted and managed at <a href="https://github.com/jacobrask/CSS1K">GitHub</a>.
    </p>

</footer>
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console