Resets

CSS Resets for common HTML elements

This page is for demonstarting the styles applied by the resets mixin, if includeResets is set to true when the setup mixin is invoked.

Webcore is an open-source, customizable UI component library for Astro, Svelte, and React projects, styled with Sass. It includes all the commonly used elements that you’d need in any project, such as Button, Alert, or Card components, but it also comes with more advanced elements, to enable you crafting fully functioning new pages by calling component only.

Multiple framework support: Webcore supports Astro, Svelte and React out of the box. This makes it a perfect choice for projects where different tech stack are in use, but the visuals needs to be consistent.
Configurable: All component are created with configurability in mind to help you use Webcore in a wide variety of use cases.
Themeable: CSS is also easily configurable to let you create different themes. Individual components can be themed via CSS variables.

To get started:

Install Webcore as a dependency by running npm i webcoreui.
Create an empty webcore.config.scss file at the root of your directory.
Call the setup mixin in your global SCSS file.

Start your dev server with:

npm run dev

Webcore is ready

Other ways to configure CSS

You can use the following options in your setup mixin to further configure your CSS.

Option	Default value	Purpose
`includeResets`	`true`	Include reset styles for native HTML elements.
`includeUtilities`	`true`	Adds utility classes for CSS.
`includeTooltip`	`true`	Adds global styles for tooltips.
`includeScrollbarStyles`	`true`	Adds global styles for scrollbars.

<blockquote>...</blockquote>
<p>...</p>
<ul>
    <li><b>Multiple framework support</b>: ...</li>
    <li><b>Configurable</b>: ...</li>
    <li><b>Themeable</b>: ...</li>
</ul>
<p>To get started:</p>
<ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

<hr />
<p>Start your dev server with:</p>
<pre>npm run dev</pre>

<div class="flex justify-center">
    <figure>
        <img
            src="/img/logo.png"
            alt="Webcore"
        />
        <figcaption>
            <a href="#">Webcore</a> is ready
        </figcaption>
    </figure>
</div>

<h2>Other ways to configure CSS</h2>
<p>...</p>

<table>
    <thead>
        <tr>
            <th>Option</th>
            <th>Default value</th>
            <th>Purpose</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>includeResets</code></td>
            <td><code>true</code></td>
            <td>Include reset styles for native HTML elements.</td>
        </tr>
        <tr>
            <td><code>includeUtilities</code></td>
            <td><code>true</code></td>
            <td>Adds utility classes for CSS.</td>
        </tr>
        <tr>
            <td><code>includeTooltip</code></td>
            <td><code>true</code></td>
            <td>Adds global styles for tooltips.</td>
        </tr>
        <tr>
            <td><code>includeScrollbarStyles</code></td>
            <td><code>true</code></td>
            <td>Adds global styles for scrollbars.</td>
        </tr>
    </tbody>
</table>

<- CSS Configuration Layout ->

Request improvement for this page