2022-01-27 13:19:28 +03:00
|
|
|
<!doctype html>
|
2022-03-02 19:56:15 +03:00
|
|
|
<html lang="en" dir="ltr">
|
2022-01-27 13:19:28 +03:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
2022-03-02 19:56:15 +03:00
|
|
|
<meta name="generator" content="Docusaurus v2.0.0-beta.15">
|
2022-03-03 17:17:54 +03:00
|
|
|
<title data-react-helmet="true">Griffel</title><meta data-react-helmet="true" property="og:title" content="Griffel"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://griffel.js.org/"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_tag" content="default"><link data-react-helmet="true" rel="canonical" href="https://griffel.js.org/"><link data-react-helmet="true" rel="alternate" href="https://griffel.js.org/" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://griffel.js.org/" hreflang="x-default"><script data-react-helmet="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("docusaurus-base-url-issue-banner-container");if(n){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';var e=document.getElementById("docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script><link rel="stylesheet" href="/assets/css/styles.eecc7f29.css">
|
|
|
|
|
<link rel="preload" href="/assets/js/runtime~main.12eb8454.js" as="script">
|
|
|
|
|
<link rel="preload" href="/assets/js/main.35d7031d.js" as="script">
|
2022-01-27 13:19:28 +03:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
2022-03-03 17:17:54 +03:00
|
|
|
<div id="docusaurus-base-url-issue-banner-container"></div><div role="region"><a href="#" class="skipToContent_cbSD">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><b class="navbar__title">Griffel</b></a><a class="navbar__item navbar__link" href="/react/install">For React.js</a><a class="navbar__item navbar__link" href="/try-it-out">Try it out</a></div><div class="navbar__items navbar__items--right"><div class="container_zN5y"><button aria-label="Switch to dark mode" class="toggleButton_mXq3" disabled="" type="button"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></button><a aria-label="Go to Griffel GitHub page" class="githubLink_Z_dD" href="https://github.com/microsoft/griffel" target="_blank" rel="noopener noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper"><div class="container_bfhl"><div class="containerLayer_cplz"></div><div class="hero hero--dark hero_aEcG"><div class="container heroContainer_i2aB"><h1 class="hero__title heroTitle_qg2I">CSS-in-JS with <b>ahead-of-time compilation</b></h1><div class="ctaContainer_o1Kf"><a class="button button--primary button--lg" href="/react/install">Get started</a><a class="button button--secondary button--lg" href="/try-it-out">Try it out</a><div class="githubButton_zoc2"><iframe src="https://ghbtns.com/github-btn.html?user=microsoft&repo=griffel&type=star&count=true&size=large" width="160" height="32" title="GitHub Stars"></iframe></div></div><div class="codeContainer_WsEn"><div class="codeBlockContainer_iq8S language-jsx theme-code-block"><div class="codeBlockContent_U58x jsx"><pre tabindex="0" class="prism-code language-jsx codeBlock_UzyX thin-scrollbar" style="color:#000000;background-color:#ffffff"><code
|
|
|
|
|
<script src="/assets/js/runtime~main.12eb8454.js"></script>
|
|
|
|
|
<script src="/assets/js/main.35d7031d.js"></script>
|
2022-01-27 13:19:28 +03:00
|
|
|
</body>
|
|
|
|
|
</html>
|
