Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add new common utility classes #21

Merged
merged 1 commit into from
Jun 2, 2024
Merged

feat: add new common utility classes #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 173 additions & 0 deletions styles/@utilities/classes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<section>
<h2 id="utilities-classes">
<a href="#utilities-classes">Classes</a>
</h2>
<p>
While <em>matcha.css</em> is mostly intended to be used along with semantic styling, it still provides a subset of utility classes for added convenience.
</p>
<div class="flash danger">
<p>
<b><em>matcha.css</em> does not aim to become a fully-fledged CSS framework.</b>
</p>
<p>
Consider using (or switching to) a utility-first CSS framework if you find the provided utility classes lacking or too limited.
</p>
</div>
<ul>
<li>
Text <a href="https://developer.mozilla.org/docs/Web/CSS/font-weight">weight</a>, <a href="https://developer.mozilla.org/docs/Web/CSS/font-style">style</a>, <a href="https://developer.mozilla.org/docs/Web/CSS/text-decoration">decoration</a>, <a href="https://developer.mozilla.org/docs/Web/CSS/text-transform">transform</a>, <a href="https://developer.mozilla.org/docs/Web/CSS/text-align">align</a>, and <a href="https://developer.mozilla.org/docs/Web/CSS/font-family">font</a>.
<ul>
<li><code data-hl="css">.bold</code> sets <code data-hl="css">font-weight: bold;</code></li>
<li><code data-hl="css">.semibold</code> sets <code data-hl="css">font-weight: 600;</code></li>
<li><code data-hl="css">.italic</code> sets <code data-hl="css">font-style: italic;</code></li>
<li><code data-hl="css">.underline</code> sets <code data-hl="css">text-decoration: underline;</code></li>
<li><code data-hl="css">.strikethrough</code> sets <code data-hl="css">text-decoration: line-through;</code></li>
<li><code data-hl="css">.uppercase</code> sets <code data-hl="css">text-transform: uppercase;</code></li>
<li><code data-hl="css">.lowercase</code> sets <code data-hl="css">text-transform: lowercase;</code></li>
<li><code data-hl="css">.capitalize</code> sets <code data-hl="css">text-transform: capitalize;</code></li>
<li><code data-hl="css">.centered</code> sets <code data-hl="css">text-align: center;</code></li>
<li><code data-hl="css">.justified</code> sets <code data-hl="css">text-align: justify;</code></li>
<li><code data-hl="css">.monospace</code> sets <code data-hl="css">font-family: var(--mono);</code></li>
</ul>
</li>
<li>
<a href="https://developer.mozilla.org/docs/Web/CSS/font-size">Text size</a>
<ul>
<li><code data-hl="css">.smaller</code> sets <code data-hl="css">font-size: .85rem;</code></li>
<li><code data-hl="css">.small</code> sets <code data-hl="css">font-size: .875rem;</code></li>
<li><code data-hl="css">.normal</code> sets <code data-hl="css">font-size: 1rem;</code></li>
<li><code data-hl="css">.large</code> sets <code data-hl="css">font-size: 1.25rem;</code></li>
<li><code data-hl="css">.larger</code> sets <code data-hl="css">font-size: 1.5rem;</code></li>
</ul>
</li>
<li>
<a href="https://developer.mozilla.org/docs/Web/CSS/position">Positioning</a>
<ul>
<li><code data-hl="css">.relative</code> sets <code data-hl="css">position: relative;</code></li>
<li><code data-hl="css">.fixed</code> sets <code data-hl="css">position: fixed;</code></li>
<li><code data-hl="css">.absolute</code> sets <code data-hl="css">position: absolute;</code></li>
<li><code data-hl="css">.sticky</code> sets <code data-hl="css">position: sticky;</code></li>
</ul>
</li>
<li>
<a href="https://developer.mozilla.org/docs/Web/CSS/display">Display</a>
<ul>
<li><code data-hl="css">.hidden</code> sets <code data-hl="css">display: none;</code></li>
<li>
<code data-hl="css">.inline</code> sets <code data-hl="css">display: inline;</code>
<ul>
<li><code data-hl="css">&.block</code> sets <code data-hl="css">display: inline-block;</code></li>
<li><code data-hl="css">&.flex</code> sets <code data-hl="css">display: inline-flex;</code></li>
</ul>
</li>
<li><code data-hl="css">.block</code> sets <code data-hl="css">display: block;</code></li>
<li>
<code data-hl="css">.flex</code> sets <code data-hl="css">display: flex;</code>
<ul>
<li><code data-hl="css">&.row</code> sets <code data-hl="css"> flex-direction: row;</code></li>
<li><code data-hl="css">&.column</code> sets <code data-hl="css"> flex-direction: column;</code></li>
<li><code data-hl="css">&.wrap</code> sets <code data-hl="css"> flex-wrap: wrap;</code></li>
<li><code data-hl="css">&.no-wrap</code> sets <code data-hl="css"> flex-wrap: no-wrap;</code></li>
<li>
<code data-hl="css">&.reverse</code>
<ul>
<li><code data-hl="css">&.row</code> sets <code data-hl="css"> flex-direction: row-reverse;</code></li>
<li><code data-hl="css">&.column</code> sets <code data-hl="css"> flex-direction: column-reverse;</code></li>
<li><code data-hl="css">&.wrap</code> sets <code data-hl="css"> flex-wrap: wrap-reverse;</code></li>
</ul>
</li>
</ul>
</li>
<li><code data-hl="css">.contents</code> sets <code data-hl="css">display: contents;</code></li>
</ul>
</li>
<li>
<a href="https://developer.mozilla.org/docs/Web/CSS/flex">Flex display</a>
<ul>
<li>
<code data-hl="css">.flex</code>
<ul>
<li><code data-hl="css">&.start</code> sets <code data-hl="css">justify-content: flex-start;</code></li>
<li><code data-hl="css">&.end</code> sets <code data-hl="css">justify-content: flex-end;</code></li>
<li><code data-hl="css">&.center</code> sets <code data-hl="css">justify-content: center;</code></li>
<li><code data-hl="css">&.space-between</code> sets <code data-hl="css">justify-content: space-between;</code></li>
<li><code data-hl="css">&.space-around</code> sets <code data-hl="css">justify-content: space-around;</code></li>
<li><code data-hl="css">&.space-evenly</code> sets <code data-hl="css">justify-content: space-evenly;</code></li>
<li><code data-hl="css">&.stretch</code> sets <code data-hl="css">justify-content: stretch;</code></li>
<li><code data-hl="css">&.align-start</code> sets <code data-hl="css">align-items: flex-start;</code></li>
<li><code data-hl="css">&.align-end</code> sets <code data-hl="css">align-items: flex-end;</code></li>
<li><code data-hl="css">&.align-center</code> sets <code data-hl="css">align-items: center;</code></li>
<li><code data-hl="css">&.align-stretch</code> sets <code data-hl="css">align-items: stretch;</code></li>
</ul>
</li>
<li><code data-hl="css">.grow</code> sets <code data-hl="css">flex-grow: 1;</code></li>
<li><code data-hl="css">.shrink</code> sets <code data-hl="css">flex-shrink: 1;</code></li>
</ul>
</li>
<li>
<a href="https://developer.mozilla.org/docs/Web/CSS/overflow">Overflow</a>
<ul>
<li><code data-hl="css">.overflow</code> sets <code data-hl="css">overflow: auto;</code></li>
<li><code data-hl="css">.overflow-x</code> sets <code data-hl="css">overflow-x: auto;</code></li>
<li><code data-hl="css">.overflow-y</code> sets <code data-hl="css">overflow-y: auto;</code></li>
<li><code data-hl="css">.no-overflow</code> sets <code data-hl="css">overflow: hidden;</code></li>
</ul>
</li>
<li>
<a href="https://developer.mozilla.org/docs/Web/CSS/cursor">Cursor</a>
<ul>
<li><code data-hl="css">.pointer</code> sets <code data-hl="css">cursor: pointer;</code></li>
<li><code data-hl="css">.wait</code> sets <code data-hl="css">cursor: wait;</code></li>
<li><code data-hl="css">.not-allowed</code> sets <code data-hl="css">cursor: not-allowed;</code></li>
</ul>
</li>
<li>
<a href="https://developer.mozilla.org/docs/Web/CSS/user-select">User selection</a>
<ul>
<li><code data-hl="css">.select-all</code> sets <code data-hl="css">user-select: all;</code></li>
<li><code data-hl="css">.no-select</code> sets <code data-hl="css">user-select: none;</code></li>
</ul>
</li>
<li>
<a href="https://developer.mozilla.org/docs/Web/CSS/pointer-events">Interactivity</a>
<ul>
<li><code data-hl="css">.events</code> sets <code data-hl="css">pointer-events: auto;</code></li>
<li><code data-hl="css">.no-events</code> sets <code data-hl="css">pointer-events: none;</code></li>
</ul>
</li>
<li>
<a href="https://developer.mozilla.org/docs/Web/CSS/box-sizing">Sizing</a> and dimensions
<ul>
<li><code data-hl="css">.width</code> sets <code data-hl="css">width: 100%;</code></li>
<li><code data-hl="css">.height</code> sets <code data-hl="css">height: 100%;</code></li>
<li><code data-hl="css">.border-box</code> sets <code data-hl="css">box-sizing: border-box;</code></li>
<li><code data-hl="css">.content-box</code> sets <code data-hl="css">box-sizing: content-box;</code></li>
</ul>
</li>
<li>
<a href="https://developer.mozilla.org/docs/Web/CSS/resize">Resizing</a>
<ul>
<li><code data-hl="css">.resize</code> sets <code data-hl="css">resize: both;</code></li>
<li><code data-hl="css">.resize-x</code> sets <code data-hl="css">resize: horizontal;</code></li>
<li><code data-hl="css">.resize-y</code> sets <code data-hl="css">resize: vertical;</code></li>
<li><code data-hl="css">.no-resize</code> sets <code data-hl="css">resize: none;</code></li>
</ul>
</li>
<li>
Miscellaneous
<ul>
<li><code data-hl="css">.no-shadow</code> sets <code data-hl="css">box-shadow: none;</code></li>
<li><code data-hl="css">.shadow</code> sets <code data-hl="css">box-shadow: var(--shadow);</code></li>
</ul>
</li>
<li>
<code data-hl="html">&lt;svg&gt;</code> <a href="https://developer.mozilla.org/docs/Web/CSS/fill">fill</a> and <a href="https://developer.mozilla.org/docs/Web/CSS/stroke">stroke</a>
<ul>
<li><code data-hl="css">svg.fill-current</code> sets <code data-hl="css">fill: currentColor;</code></li>
<li><code data-hl="css">svg.no-fill</code> sets <code data-hl="css">fill: none;</code></li>
<li><code data-hl="css">svg.stroke-current</code> sets <code data-hl="css">stroke: currentColor;</code></li>
<li><code data-hl="css">svg.no-stroke</code> sets <code data-hl="css">stroke: none;</code></li>
</ul>
</li>
</ul>
</section>
69 changes: 58 additions & 11 deletions styles/@utilities/colors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,66 @@
<section>
<h2 id="utilities-colors">
<a href="#utilities-colors">Colors</a>
<a href="#utilities-colors">Colors, border colors and backgrounds</a>
</h2>
<p>
Use one of the following class to alter the element's <a href="https://developer.mozilla.org/docs/Web/CSS/color"><code data-hl="css">color</code></a>.
Use one of the following classes to alter the element's <a href="https://developer.mozilla.org/docs/Web/CSS/color"><code data-hl="css">color</code></a>, <a href="https://developer.mozilla.org/docs/Web/CSS/border-color"><code data-hl="css">border-color</code></a> and <a href="https://developer.mozilla.org/docs/Web/CSS/background-color"><code data-hl="css">background-color</code></a>.
</p>
<ul>
<li><code data-hl="css">.default</code> is in <code><span class="default">◉</span> --default</code> color.</li>
<li><code data-hl="css">.muted</code> is in <code><span class="muted">◉</span> --muted</code> color.</li>
<li><code data-hl="css">.accent</code> is in <code><span class="accent">◉</span> --accent</code> color.</li>
<li><code data-hl="css">.active</code> is in <code><span class="active">◉</span> --active</code> color.</li>
<li><code data-hl="css">.variant</code> is in <code><span class="variant">◉</span> --variant</code> color.</li>
<li><code data-hl="css">.success</code> is in <code><span class="success">◉</span> --success</code> color.</li>
<li><code data-hl="css">.attention</code> is in <code><span class="attention">◉</span> --attention</code> color.</li>
<li><code data-hl="css">.severe</code> is in <code><span class="severe">◉</span> --severe</code> color.</li>
<li><code data-hl="css">.danger</code> is in <code><span class="danger">◉</span> --danger</code> color.</li>
<li>
Color
<ul>
<li><code data-hl="css">.default</code> is in <code><span class="default">◉</span> --default</code> color.</li>
<li><code data-hl="css">.muted</code> is in <code><span class="muted">◉</span> --muted</code> color.</li>
<li><code data-hl="css">.accent</code> is in <code><span class="accent">◉</span> --accent</code> color.</li>
<li><code data-hl="css">.active</code> is in <code><span class="active">◉</span> --active</code> color.</li>
<li><code data-hl="css">.variant</code> is in <code><span class="variant">◉</span> --variant</code> color.</li>
<li><code data-hl="css">.success</code> is in <code><span class="success">◉</span> --success</code> color.</li>
<li><code data-hl="css">.attention</code> is in <code><span class="attention">◉</span> --attention</code> color.</li>
<li><code data-hl="css">.severe</code> is in <code><span class="severe">◉</span> --severe</code> color.</li>
<li><code data-hl="css">.danger</code> is in <code><span class="danger">◉</span> --danger</code> color.</li>
</ul>
</li>
<li>
Border color
<ul>
<li><code data-hl="css">.bd-default</code> has a <code class="bd-default">◉ --default</code> border.</li>
<li><code data-hl="css">.bd-muted</code> has a <code class="bd-muted">◉ --muted</code> border.</li>
<li><code data-hl="css">.bd-accent</code> has a <code class="bd-accent">◉ --accent</code> border.</li>
<li><code data-hl="css">.bd-active</code> has a <code class="bd-active">◉ --active</code> border.</li>
<li><code data-hl="css">.bd-variant</code> has a <code class="bd-variant">◉ --variant</code> border.</li>
<li><code data-hl="css">.bd-success</code> has a <code class="bd-success">◉ --success</code> border.</li>
<li><code data-hl="css">.bd-attention</code> has a <code class="bd-attention">◉ --attention</code> border.</li>
<li><code data-hl="css">.bd-severe</code> has a <code class="bd-severe">◉ --severe</code> border.</li>
<li><code data-hl="css">.bd-danger</code> has a <code class="bd-danger">◉ --danger</code> border.</li>
</ul>
</li>
<li>
Background
<ul>
<li><code data-hl="css">.bg-default</code> has a <code class="bg-default">◉ --bg-default</code> background.</li>
<li><code data-hl="css">.bg-muted</code> has a <code class="bg-muted">◉ --bg-muted</code> background.</li>
<li><code data-hl="css">.bg-accent</code> has a <code class="bg-accent">◉ --bg-accent</code> background.</li>
<li><code data-hl="css">.bg-active</code> has a <code class="bg-active">◉ --bg-active</code> background.</li>
<li><code data-hl="css">.bg-variant</code> has a <code class="bg-variant">◉ --bg-variant</code> background.</li>
<li><code data-hl="css">.bg-success</code> has a <code class="bg-success">◉ --bg-success</code> background.</li>
<li><code data-hl="css">.bg-attention</code> has a <code class="bg-attention">◉ --bg-attention</code> background.</li>
<li><code data-hl="css">.bg-severe</code> has a <code class="bg-severe">◉ --bg-severe</code> background.</li>
<li><code data-hl="css">.bg-danger</code> has a <code class="bg-danger">◉ --bg-danger</code> background.</li>
</ul>
</li>
<li>
Foreground
<ul>
<li><code data-hl="css">.fg-default</code> has a <code class="fg-default">◉ --default</code> background.</li>
<li><code data-hl="css">.fg-muted</code> has a <code class="fg-muted">◉ --muted</code> background.</li>
<li><code data-hl="css">.fg-accent</code> has a <code class="fg-accent">◉ --accent</code> background.</li>
<li><code data-hl="css">.fg-active</code> has a <code class="fg-active">◉ --active</code> background.</li>
<li><code data-hl="css">.fg-variant</code> has a <code class="fg-variant">◉ --variant</code> background.</li>
<li><code data-hl="css">.fg-success</code> has a <code class="fg-success">◉ --success</code> background.</li>
<li><code data-hl="css">.fg-attention</code> has a <code class="fg-attention">◉ --attention</code> background.</li>
<li><code data-hl="css">.fg-severe</code> has a <code class="fg-severe">◉ --severe</code> background.</li>
<li><code data-hl="css">.fg-danger</code> has a <code class="fg-danger">◉ --danger</code> background.</li>
</ul>
</li>
</ul>
</section>
32 changes: 29 additions & 3 deletions styles/@utilities/flashes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,44 @@ <h2 id="utilities-flashes">
<a href="#utilities-flashes">Flashs</a>
</h2>
<p>
Use <code data-hl="css">.flash</code> class to style elements as a flash blocks.
It can be combined with any color class.
Flash blocks can be used to draw attention.
They can be combined with any color class.
</p>
<div class="example">
<ul>
<li><code data-hl="css">.flash</code> styles the element as a flash block.</li>
<li><code data-hl="css">.flash.foreground</code> styles the element as a flash block with a foreground.</li>
</ul>
<div class="example flashes">
<template><!-- Prevent margins from being trimmed --></template>
<div class="flash default">Default</div>
<div class="flash fg-default">Default foreground</div>
<div class="flash muted">Muted</div>
<div class="flash fg-muted">Muted foreground</div>
<div class="flash accent">Accent</div>
<div class="flash fg-accent">Accent foreground</div>
<div class="flash active">Active</div>
<div class="flash fg-active">Active foreground</div>
<div class="flash variant">Variant</div>
<div class="flash fg-variant">Variant foreground</div>
<div class="flash success">Success</div>
<div class="flash fg-success">Success foreground</div>
<div class="flash attention">Attention</div>
<div class="flash fg-attention">Attention foreground</div>
<div class="flash severe">Severe</div>
<div class="flash fg-severe">Severe foreground</div>
<div class="flash danger">Danger</div>
<div class="flash fg-danger">Danger foreground</div>
<template><!-- Prevent margins from being trimmed --></template>
</div>
<style>
.example.flashes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .5rem
}

.example.flashes > .flash {
margin: 0;
}
</style>
</section>
Loading