https://thuquan360.com/tags/design-system/ Recent content in Design-System on ThuQuan360 Hugo en Fri, 05 Jan 2024 00:00:00 +0000 https://thuquan360.com/posts/primer-css-guide/ Fri, 05 Jan 2024 00:00:00 +0000 https://thuquan360.com/posts/primer-css-guide/ <p>Primer is GitHub&rsquo;s design system and CSS framework. It provides a set of guidelines and components to create consistent, accessible interfaces.</p> <h2 id="what-is-primer">What is Primer?</h2> <p>Primer is built around three core pillars:</p> <ol> <li><strong>Primitives</strong> - Design tokens for colors, spacing, and typography</li> <li><strong>CSS</strong> - Utility classes and component styles</li> <li><strong>Components</strong> - React and ViewComponent implementations</li> </ol> <h2 id="getting-started">Getting Started</h2> <p>Install Primer CSS via npm:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code data-lang="bash"><span class="line"><span class="cl">npm install @primer/css</span></span></code></pre></div><p>Import the CSS in your project:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code data-lang="scss"><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">&#34;@primer/css/index.scss&#34;</span><span class="p">;</span></span></span></code></pre></div><h2 id="utility-classes">Utility Classes</h2> <p>Primer provides a comprehensive set of utility classes:</p>