-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
17 lines (16 loc) · 12.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="en" dir="ltr" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.7.0">
<title data-rh="true">Pure</title><meta data-rh="true" property="og:url" content="https://pure-css.github.io/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" charset="utf-8"><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" property="og:title" content="Pure"><meta data-rh="true" name="description" content="Pure is a ridiculously tiny CSS library you can use to start any web project."><meta data-rh="true" property="og:description" content="Pure is a ridiculously tiny CSS library you can use to start any web project."><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" name="google-site-verification" content="4Vwl0ECmIrHsoK0rSTN3orQJLvIKWfcQCq4IeHCYZOY"><link data-rh="true" rel="canonical" href="https://pure-css.github.io/"><link data-rh="true" rel="alternate" href="https://pure-css.github.io/" hreflang="en"><link data-rh="true" rel="alternate" href="https://pure-css.github.io/" hreflang="x-default"><link data-rh="true" rel="shortcut icon" href="/img/favicon.ico"><link data-rh="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200"><script data-rh="true">function insertBanner(){var n=document.createElement("div");n.id="__docusaurus-base-url-issue-banner-container";n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span> (default value)</p>\n <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n',document.body.prepend(n);var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,o="/"===s.substr(-1)?s:s+"/";e.innerHTML=o}document.addEventListener("DOMContentLoaded",(function(){void 0===window.docusaurus&&insertBanner()}))</script><link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41480445-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://kit.fontawesome.com/f7f35653b1.js" defer="defer"></script><link rel="stylesheet" href="/assets/css/styles.5801e0fd.css">
<script src="/assets/js/runtime~main.fe7e374f.js" defer="defer"></script>
<script src="/assets/js/main.f6c2c354.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><link rel="preload" as="image" href="/img/[email protected]"><link rel="preload" as="image" href="/img/layout-icon.jpg"><div id="layout"><a href="#menu" id="menuLink" class="menu-link"><span></span></a><div id="menu"><div class="pure-menu"><a class="pure-menu-heading" href="/">Pure</a><ul class="pure-menu-list"><li class="pure-menu-item"><a class="pure-menu-link" href="/start/">Get Started</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/layouts/">Layouts</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/base/">Base</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/grids/">Grids</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/forms/">Forms</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/buttons/">Buttons</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/tables/">Tables</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/menus/">Menus</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/tools/">Tools</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/customize/">Customize</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/extend/">Extend</a></li><li class="pure-menu-item"><a href="https://github.com/pure-css/pure/releases/" class="pure-menu-link">Releases</a></li></ul></div></div><div id="main" class="home"><div class="hero"><div class="hero-titles"><img class="logo" src="/img/[email protected]" alt="Pure"><h2 class="hero-tagline">A set of small, responsive CSS modules that you can use in every web project.</h2></div><div class="hero-cta"><div class="is-code-full"><div class="code code-wrap"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code class="language-html" style="white-space:pre-wrap"><span><span><link </span><span style="color:#000080;font-weight:normal">rel</span><span>=</span><span style="color:#219161">"stylesheet"</span><span> </span><span style="color:#000080;font-weight:normal">href</span><span>=</span><span style="color:#219161">"https://cdn.jsdelivr.net/npm/[email protected]/build/pure-min.css"</span><span> </span><span style="color:#000080;font-weight:normal">integrity</span><span>=</span><span style="color:#219161">"sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls"</span><span> </span><span style="color:#000080;font-weight:normal">crossorigin</span><span>=</span><span style="color:#219161">"anonymous"</span><span>></span></span></code></pre></div></div><p><a class="button-cta pure-button" href="/start/">Get Started</a><a class="button-secondary pure-button" href="https://github.com/pure-css/pure/">View on GitHub</a></p></div></div><div class="marketing"><div class="size-chart pure-g"><div class="size-chart-base pure-u" style="width:19.6516%"><a class="size-chart-item" href="/base/"><span class="size-chart-label"><span class="size-chart-mod">base</span><span class="size-chart-size">0.9KB</span></span></a></div><div class="size-chart-grids pure-u" style="width:11.5369%"><a class="size-chart-item" href="/grids/"><span class="size-chart-label"><span class="size-chart-mod">grids</span><span class="size-chart-size">0.5KB</span></span></a></div><div class="size-chart-forms pure-u" style="width:28.9959%"><a class="size-chart-item" href="/forms/"><span class="size-chart-label"><span class="size-chart-mod">forms</span><span class="size-chart-size">1.4KB</span></span></a></div><div class="size-chart-buttons pure-u" style="width:15.1230%"><a class="size-chart-item" href="/buttons/"><span class="size-chart-label"><span class="size-chart-mod">buttons</span><span class="size-chart-size">0.7KB</span></span></a></div><div class="size-chart-tables pure-u" style="width:9.4672%"><a class="size-chart-item" href="/tables/"><span class="size-chart-label"><span class="size-chart-mod">tables</span><span class="size-chart-size">0.5KB</span></span></a></div><div class="size-chart-menus pure-u" style="width:15.2254%"><a class="size-chart-item" href="/menus/"><span class="size-chart-label"><span class="size-chart-mod">menus</span><span class="size-chart-size">0.7KB</span></span></a></div></div><div class="content"><h3 class="marketing-header">CSS with a minimal footprint.</h3><p>Pure is ridiculously tiny. The entire set of modules clocks in at <b>3.5KB<!-- -->* minified and gzipped</b>. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.</p><p style="font-size:smaller">* We can add correctly :) the numbers above are individual module sizes; when grouped together they compress (gzip) even more.</p></div></div><div class="marketing l-wrap pure-g"><div class="content pure-u-1 pure-u-sm-1-2 pure-u-xl-1-3"><h3 class="marketing-header">Your CSS foundation.</h3><p>Pure builds on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> and provides layout and styling for native HTML elements, plus the most common UI components. It's what you need, without the cruft.</p></div><div class="content pure-u-1 pure-u-sm-1-2 pure-u-xl-1-3"><h3 class="marketing-header">Made with mobile in mind.</h3><p>Pure is responsive out of the box, so elements look great on all screen sizes.</p></div><div class="content pure-u-1 pure-u-lg-3-4 pure-u-xl-1-3"><h3 class="marketing-header">Stays out of your way.</h3><p>Pure has minimal styles and encourages you to write your application styles on top of it. It's designed to get out of your way and makes it easy to override styles.</p></div></div><div class="marketing l-wrap pure-g"><div class="marketing-diagram content pure-u-1 pure-u-sm-2-3 pure-u-md-1-2"><a href="/layouts/"><img src="/img/layout-icon.jpg" class="pure-img-responsive" alt="Diagram of a sample layout."></a></div><div class="content pure-u-1 pure-u-md-1-2"><h3 class="marketing-header">Create responsive layouts.</h3><p>By using <a href="/grids/">Grids</a>, <a href="/menus/">Menus</a>, and more, it's easy to create beautiful responsive layouts for all screen sizes. We've made it easy for you to get started. Take a look at a few different <a href="/layouts/">layouts</a> and start your next web project with a rock-solid foundation.</p><p><a class="pure-button" href="/layouts/">View Layouts</a></p></div></div><div class="marketing marketing-customize l-wrap pure-g"><div class="content pure-u-1 pure-u-md-1-2"><h3 class="marketing-header">Create your own look and feel.</h3><p>Unlike other frameworks, Pure's design is unopinionated, minimal and flat. We believe that it's much easier to add new CSS rules than to overwrite existing rules. By adding a few lines of CSS, you can customize Pure's appearance to work with your web project.</p><p><a class="pure-button" href="/extend/">Extend Pure</a></p></div><div class="sample-buttons content pure-u-1 pure-u-md-1-2"><div class="pure-g"><span class="sample-button pure-u-1-2 pure-u-sm-1-3"><button class="pure-button">Default</button></span><span class="sample-button pure-u-1-2 pure-u-sm-1-3"><button class="button-a pure-button">Blue</button></span><span class="sample-button pure-u-1-2 pure-u-sm-1-3"><button class="button-b pure-button">Yellow</button></span><span class="sample-button pure-u-1-2 pure-u-sm-1-3"><button class="button-c pure-button">Black</button></span><span class="sample-button pure-u-1-2 pure-u-sm-1-3"><button class="button-d pure-button">Green</button></span><span class="sample-button pure-u-1-2 pure-u-sm-1-3"><button class="button-e pure-button">Red</button></span><span class="sample-button pure-u-1-2 pure-u-sm-1-3"><button class="button-f pure-button">Purple</button></span><span class="sample-button pure-u-1-2 pure-u-sm-1-3"><button class="button-g pure-button">Orange</button></span><span class="sample-button pure-u-1 pure-u-sm-1-3"><button class="button-h pure-button">Indigo</button></span></div></div></div><div class="footer"><div class="legal pure-g"><div class="pure-u-1 u-sm-1-2"><p class="legal-license">This site is built with ❤️ using Pure v<!-- -->3.0.0<br>All code on this site is licensed under the <a href="https://github.com/pure-css/pure/blob/main/LICENSE">Yahoo BSD License</a> unless otherwise stated.</p></div><div class="pure-u-1 u-sm-1-2"><ul class="legal-links"><li><a href="https://github.com/pure-css/pure/">GitHub Project</a></li><li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li></ul><p class="legal-copyright">© 2014 - Present Yahoo Inc. All rights reserved.</p></div></div></div></div></div></div>
</body>
</html>