https://thuquan360.com/tags/primer/ Recent content in Primer on ThuQuan360 Hugo en Mon, 15 Jan 2024 00:00:00 +0000 https://thuquan360.com/posts/welcome/ Mon, 15 Jan 2024 00:00:00 +0000 https://thuquan360.com/posts/welcome/ <p>Welcome to my new blog! This site is built with <a href="https://gohugo.io/">Hugo</a> and styled with <a href="https://primer.style/">Primer CSS</a>, GitHub&rsquo;s design system.</p> <h2 id="features">Features</h2> <p>This theme includes:</p> <ul> <li><strong>Dark mode support</strong> - Automatically syncs with your system preferences, or you can choose manually</li> <li><strong>Multilingual</strong> - Full i18n support for multiple languages</li> <li><strong>Responsive design</strong> - Looks great on all devices</li> <li><strong>Primer CSS</strong> - Clean, modern design using GitHub&rsquo;s design system</li> </ul> <h2 id="code-example">Code Example</h2> <p>Here&rsquo;s a simple Go code example:</p> 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>