Gathering detailed insights and metrics for kartoncss
Gathering detailed insights and metrics for kartoncss
Installations
npm install kartoncssDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
22.13.1
NPM Version
10.9.1
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
1.1.5
Package Id
kartoncss@1.1.5
Unpacked Size
53.69 kB
Size
11.85 kB
File Count
10
NPM Version
10.9.1
Node Version
22.13.1
Published on
Jul 10, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
1
Karton CSS
A lightweight, classless CSS framework inspired by cardboard-style design and Sakura CSS.
Designed to work beautifully with the KartonJS web component framework.
CDN Usage
Include Karton CSS in your HTML via CDN:
1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kartoncss/karton.css" type="text/css">
Or minified:
1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kartoncss/karton.min.css" type="text/css">
Features
Classless styling: write semantic HTML without needing extra classes.
Warm, organic tones with a cardboard-inspired aesthetic.
Responsive typography and layouts optimized for readability.
Styles for common HTML elements: headings, paragraphs, lists, tables, code, forms, alerts, modals, media, and more.
Accessible modal and alert styles included.
Works great standalone or with the Karton web component framework.
Example
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Karton CSS</title> 6 <link rel="icon" type="image/svg+xml" href="karton-element.svg" /> 7 <link href='karton.css' id="karton-css" rel='stylesheet' type='text/css'> 8 </head> 9 <body> 10 <span id="top"><span> 11 12 <!-- semantic --> 13 <header> 14 <h1>Karton CSS Showcase</h1> 15 <!-- navigation --> 16 <nav> 17 <a href="#glossary">Glossary</a> 18 <a href="#media">Media</a> 19 <a href="#form">Contact</a> 20 <a href="#paragraphs">Paragraphs</a> 21 <a href="#form-elements">Form Elements</a> 22 <a href="#an-h3-header">List</a> 23 </nav> 24 </header> 25 26 <main> 27 <article id="glossary"> 28 <h2>Glossary</h2> 29 <dl> 30 <dt>Karton</dt> 31 <dd>A lightweight web component framework inspired by cardboard-style design.</dd> 32 33 <dt>Unboxed</dt> 34 <dd>A special render mode for Karton components when activated via URL.</dd> 35 36 <dt>State</dt> 37 <dd>An internal reactive data storage mechanism.</dd> 38 </dl> 39 </article> 40 41 <aside> 42 <h3>Did You Know?</h3> 43 <p>Karton uses URL-based routing to switch between render modes.</p> 44 </aside> 45 46 <article id="media"> 47 <h2>Media Examples</h2> 48 <!-- media --> 49 <section> 50 <h2>Video Demo</h2> 51 <div class="media-wrapper"> 52 <iframe 53 src="https://www.youtube.com/embed/dQw4w9WgXcQ" 54 title="Demo Video" 55 frameborder="0" 56 allowfullscreen></iframe> 57 </div> 58 59 <h2>Sample Video</h2> 60 <video controls> 61 <source src="sample-video.mp4" type="video/mp4" /> 62 Your browser does not support the video tag. 63 </video> 64 </section> 65 </article> 66 67 <section id="form"> 68 <h2>Contact Form</h2> 69 <form> 70 <label for="email">Email (required):</label> 71 <input type="email" id="email" name="email" required placeholder="you@example.com" /> 72 73 <label for="age">Age (18+):</label> 74 <input type="number" id="age" name="age" min="18" required /> 75 76 <label for="bio">Short Bio:</label> 77 <textarea id="bio" name="bio" rows="4" placeholder="Tell us about yourself..."></textarea> 78 79 <button type="submit">Submit</button> 80 </form> 81 </section> 82 </main> 83 84 <!-- alerts --> 85 <div class="alert alert-info">This is an info message.</div> 86 <div class="alert alert-warning">Warning! Something needs your attention.</div> 87 <div class="alert alert-error">Error! Something needs your attention badly.</div> 88 89 <!-- modal --> 90 <button id="openDialogBtn">Open Dialog</button> 91 92 <dialog id="myDialog" role="dialog" aria-modal="true" aria-labelledby="dialogTitle"> 93 <button class="close" aria-label="Close dialog">×</button> 94 <h2 id="dialogTitle">Modal Title</h2> 95 <p>This is the modal content.</p> 96 <p>This is the modal content.</p> 97 <p>This is the modal content.</p> 98 <p>This is the modal content.</p> 99 <p>This is the modal content.</p> 100 <p>This is the modal content.</p> 101 <p>This is the modal content.</p> 102 </dialog> 103 104 <script> 105 const dialog = document.getElementById('myDialog'); 106 const openBtn = document.getElementById('openDialogBtn'); 107 const closeBtn = dialog.querySelector('button.close'); 108 109 openBtn.addEventListener('click', () => { 110 dialog.showModal(); 111 }); 112 113 closeBtn.addEventListener('click', () => { 114 dialog.close(); 115 }); 116 117 // Optional: Close dialog on pressing Escape key 118 dialog.addEventListener('keydown', (event) => { 119 if (event.key === 'Escape') { 120 dialog.close(); 121 } 122 }); 123 </script> 124 125 <!-- sakura test --> 126 <div id="paragraphs"> 127 <p>Paragraphs look like this. Font size along with line height and maximum width are optimized for reading.</p> 128 129 <p><em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists look like:</p> 130 <ul> 131 <li>this one</li> 132 <li>that one</li> 133 <li>the other one</li> 134 </ul> 135 136 <p><strong>Here's a block quote</strong>:</p> 137 <blockquote> 138 <p>Man surprised me most about humanity. Because he sacrifices his health in order to make money. Then he sacrifices money to recuperate his health. And then he is so anxious about the future that he does not enjoy the present; the result being that he does not live in the present or the future; he lives as if he is never going to die, and then dies having never really lived. -James J Lachard</p> 139 </blockquote> 140 141 <h2 id="an-h2-header">An h2 header</h2> 142 <p><strong>Some code blocks</strong></p> 143 <pre><code>define foobar() { 144 print "Welcome to flavor country!"; 145 }</code></pre> 146 <div class="sourceCode"> 147 <pre class="sourceCode python"><code class="sourceCode python"><span class="im">import</span> time 148 <span class="co"># Quick, count to ten!</span> 149 <span class="cf">for</span> i <span class="op">in</span> <span class="bu">range</span>(<span class="dv">10</span>): 150 <span class="co"># (but not *too* quick)</span> 151 time.sleep(<span class="fl">0.5</span>) 152 <span class="bu">print</span> i</code></pre> 153 </div> 154 155 <h3 id="an-h3-header">An h3 header</h3> 156 <p>A nested list:</p> 157 <ol style="list-style-type: decimal"> 158 <li> 159 <p>First, get these ingredients:</p> 160 <ul> 161 <li>carrots</li> 162 <li>celery</li> 163 <li>lentils</li> 164 </ul> 165 </li> 166 <li> 167 <p>Boil some water.</p> 168 </li> 169 <li> 170 <p>Dump everything in the pot and follow this algorithm:</p> 171 <pre><code>find wooden spoon 172 uncover pot 173 stir 174 cover pot 175 balance wooden spoon precariously on pot handle 176 wait 10 minutes 177 goto first step (or shut off burner when done)</code></pre> 178 <p>Do not bump wooden spoon or it will fall.</p> 179 </li> 180 </ol> 181 182 <h1 id="header-level-1">Header level 1</h1> 183 <h2 id="header-level-2">Header level 2</h2> 184 <h3 id="header-level-3">Header level 3</h3> 185 <h4 id="header-level-4">Header level 4</h4> 186 <h5 id="header-level-5">Header level 5</h5> 187 <h6 id="header-level-6">Header level 6</h6> 188 189 <p>A horizontal line:</p> 190 <hr> 191 192 <p>Here's a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local doc</a>, and to a <a href="#an-h2-header">section heading in the current doc</a>. Here's a footnote <a href="#fn1" id="fnref1"><sup>1</sup></a>.</p> 193 <p>Tables can look like this:</p> 194 195 <table> 196 <caption> 197 Shoes, their sizes, and what they're made of 198 </caption> 199 <thead> 200 <tr > 201 <th align="left">size</th> 202 <th align="left">material</th> 203 <th align="left">color</th> 204 </tr> 205 </thead> 206 <tbody> 207 <tr > 208 <td align="left">9</td> 209 <td align="left">leather</td> 210 <td align="left">brown</td> 211 </tr> 212 <tr > 213 <td align="left">10</td> 214 <td align="left">hemp canvas</td> 215 <td align="left">natural</td> 216 </tr> 217 <tr > 218 <td align="left">11</td> 219 <td align="left">glass</td> 220 <td align="left">transparent</td> 221 </tr> 222 </tbody> 223 </table> 224 <p>Multi-line tables:</p> 225 <table style="width:46%;"> 226 <colgroup> 227 <col width="13%"> 228 <col width="31%"> 229 </colgroup> 230 <thead> 231 <tr> 232 <th align="left">keyword</th> 233 <th align="left">text</th> 234 </tr> 235 </thead> 236 <tbody> 237 <tr> 238 <td align="left">red</td> 239 <td align="left">Sunsets, apples, and other red or reddish things.</td> 240 </tr> 241 <tr> 242 <td align="left">green</td> 243 <td align="left">Leaves, grass, frogs and other things it's not easy being.</td> 244 </tr> 245 </tbody> 246 </table> 247 248 <p>A horizontal rule follows.</p> 249 <hr> 250 <p>Images are responsive by default:</p> 251 <div> 252 <img alt="example image" src="sakura.png" title="An exemplary image"> 253 <p>example image</p> 254 </div> 255 256 <hr> 257 258 <h1 id="form-elements">Form Elements</h1> 259 <form> 260 <div id="forms__input"> 261 <h3>Input fields</h3> 262 <p><label for="input__text">Text Input</label> <input id="input__text" placeholder="Text Input" type="text"></p> 263 <p><label for="input__password">Password</label> <input id="input__password" placeholder="Type your Password" type="password"></p> 264 <p><label for="input__webaddress">Web Address</label> <input id="input__webaddress" placeholder="http://yoursite.com" type="url"></p> 265 <p><label for="input__emailaddress">Email Address</label> <input id="input__emailaddress" placeholder="name@email.com" type="email"></p> 266 <p><label for="input__phone">Phone Number</label> <input id="input__phone" placeholder="(999) 999-9999" type="tel"></p> 267 <p><label for="input__search">Search</label> <input id="input__search" placeholder="Enter Search Term" type="search"></p> 268 <p><label for="input__text2">Number Input</label> <input id="input__text2" placeholder="Enter a Number" type="number"></p> 269 <p><label for="input__text3">Error</label> <input id="input__text3" placeholder="Text Input" type="text"></p> 270 <p><label for="input__text4">Valid</label> <input id="input__text4" placeholder="Text Input" type="text"></p> 271 </div> 272 <p><a href="#top">[Top]</a></p> 273 <div id="forms__select"> 274 <h3>Select menus</h3> 275 <p><label for="select">Select</label> <select id="select"> 276 <optgroup label="Option Group"> 277 <option> 278 Option One 279 </option> 280 <option> 281 Option Two 282 </option> 283 <option> 284 Option Three 285 </option> 286 </optgroup> 287 </select></p> 288 </div> 289 <p><a href="#top">[Top]</a></p> 290 <div id="forms__checkbox"> 291 <h3>Checkboxes</h3> 292 <ul style="list-style:none;"> 293 <li><label for="checkbox1"><input checked="checked" id="checkbox1" name="checkbox" type="checkbox"> Choice A</label></li> 294 <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li> 295 <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li> 296 </ul> 297 </div> 298 <p><a href="#top">[Top]</a></p> 299 <div id="forms__textareas"> 300 <h3>Textareas</h3> 301 <p><label for="textarea">Textarea</label> 302 <textarea cols="48" id="textarea" placeholder="Enter your message here" rows="8"></textarea></p> 303 </div> 304 <p><a href="#top">[Top]</a></p> 305 <div id="forms__html5"> 306 <div id="forms__action"> 307 <h3>Action buttons</h3> 308 <p><input type="submit" value="input type=submit"> <input type="button" value="input type=button"> <input type="reset" value="input type=reset"> <input disabled type="submit" value="input disabled"></p> 309 <p><button type="submit"><button type=submit></button> <button type="button"><button type=button></button> <button type="reset"><button type=reset></button> <button disabled type="button"><button disabled></button></p> 310 </div> 311 <p><a href="#top">[Top]</a></p> 312 </div> 313 </form> 314 <div> 315 <hr> 316 <ol> 317 <li id="fn1"><p>Footnote text goes here.<a href="#fnref1">↩</a></p></li> 318 </ol> 319 </div> 320 </div> 321 <!-- footer --> 322 <footer> 323 <p>© 2025 Karton Framework. Made with care and cardboard.</p> 324 </footer> 325 326 </body> 327</html>
Development & Contribution
Contributions and suggestions are very welcome! Please open issues or pull requests on the GitHub repository.
License
This project is licensed under the MIT License.
© 2025 Karton Framework by biensurerodezee. Made with care and cardboard.
kartonJS
The KartonJS WebComponent Framework using KartonCSS by default
No vulnerabilities found.
No security vulnerabilities found.