Skip to content

Enhancements: Styles #60

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

Merged
devmount merged 4 commits into from
Nov 29, 2024
Merged

Enhancements: Styles #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec1f722
💚 Improve input field border and shadow
devmount Nov 29, 2024
642a203
💚 Improve and extend font sizes
devmount Nov 29, 2024
0c56dbf
➕ Add grow and shrink utilities
devmount Nov 29, 2024
4ce13e3
➕ Add more justify utilities
devmount Nov 29, 2024
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
3 changes: 2 additions & 1 deletion docs/pages/components/modal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ Use the `sm` or `lg` classes to reduce or increase the maximum width of the moda
<svg viewBox="0 0 24 24" class="icon"><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
</a>
</header>
<fieldset>
<fieldset class="bg-page p-8">
<label>Login</label>
<input class="lg" type="email" placeholder="Email" />
<input class="lg" type="password" placeholder="Password" />
</fieldset>
Expand Down
13 changes: 11 additions & 2 deletions docs/pages/utilities/display.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: 'Utilities: Display - Sloth.css'
description: Controlling the display type of elements
tags: flex flex-col grid column grid-cols-1 grid-cols-2 grid-cols-3 flex-wrap inline block inline-block visibility invisible hidden
tags: flex flex-col grid column grid-cols-1 grid-cols-2 grid-cols-3 flex-wrap inline block inline-block visibility invisible hidden grow shrink
---

## Display
Expand Down Expand Up @@ -61,7 +61,7 @@ Elements can also be position underneath each other (column direction) instead o
Note that <code>flex-col</code> is a display utility and already includes the <code>display: flex;</code> rule. So there's no need to use two classes like in Tailwind <del><code>flex flex-column</code></del>. Just use <ins><code>flex-col</code></ins>.
</p>

User the `flex-wrap` class, if you want your flex items to break onto a new line when the container limit is reached.
Use the `flex-wrap` class, if you want your flex items to break onto a new line when the container limit is reached.

<div class="demo">
<div class="flex flex-wrap max-w-screen-xs gap-4 items-center bg-muted p-4 rounded">
Expand All @@ -87,6 +87,15 @@ User the `flex-wrap` class, if you want your flex items to break onto a new line
.flex-wrap { flex-wrap: wrap; }
```

If you need single items to grow or shrink, use the `grow` and `shrink` classes. If you want to prevent them from growing or shrinking, use `grow-0` or `shrink-0` respectively.

```css
.grow { flex-grow: 1; }
.shrink { flex-shrink: 1; }
.grow-0 { flex-grow: 0; }
.shrink-0 { flex-shrink: 0; }
```

### Grid

Grid based layouts can be used if a more table-based layout is needed. Use the `grid` class in combination with the `grid-cols-{n}` classes to define a basic grid.
Expand Down
36 changes: 31 additions & 5 deletions docs/pages/utilities/positioning.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: 'Utilities: Positioning - Sloth.css'
description: Controlling position, alignment and overflow of elements
tags: relative absolute fixed sticky items-center items-start items-end items-stretch flex-center scroll overflow-hidden overflow-visible overflow-auto overflow-x-auto overflow-y-auto
tags: relative absolute fixed sticky items-center items-start items-end items-stretch flex-center scroll overflow-hidden overflow-visible overflow-auto overflow-x-auto overflow-y-auto justify-start justify-center justify-end justify-between justify-around justify-evenly
---

## Positioning
Expand Down Expand Up @@ -119,6 +119,14 @@ Flex and grid items can be aligned on the [cross axis](https://developer.mozilla
Flex and grid items can be aligned on the [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) / inline axis using `justify-*` classes.

<div class="demo flex flex-wrap gap-4">
<div class="flex-col gap-4 w-64 bg-muted p-4 rounded">
<div class="flex gap-1 justify-start">
<div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#1</div>
<div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#2</div>
<div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#3</div>
</div>
<div class="flex-center"><code>.justify-start</code></div>
</div>
<div class="flex-col gap-4 w-64 bg-muted p-4 rounded">
<div class="flex gap-1 justify-center">
<div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#1</div>
Expand All @@ -127,6 +135,14 @@ Flex and grid items can be aligned on the [main axis](https://developer.mozilla.
</div>
<div class="flex-center"><code>.justify-center</code></div>
</div>
<div class="flex-col gap-4 w-64 bg-muted p-4 rounded">
<div class="flex gap-1 justify-end">
<div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#1</div>
<div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#2</div>
<div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#3</div>
</div>
<div class="flex-center"><code>.justify-end</code></div>
</div>
<div class="flex-col gap-4 w-64 bg-muted p-4 rounded">
<div class="flex gap-1 justify-between">
<div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#1</div>
Expand All @@ -143,13 +159,23 @@ Flex and grid items can be aligned on the [main axis](https://developer.mozilla.
</div>
<div class="flex-center"><code>.justify-around</code></div>
</div>
<div class="flex-col gap-4 w-64 bg-muted p-4 rounded">
<div class="flex gap-1 justify-evenly">
<div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#1</div>
<div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#2</div>
<div class="text-light bg-accent-variant flex-center rounded h-8 w-8 font-mono font-bold">#3</div>
</div>
<div class="flex-center"><code>.justify-evenly</code></div>
</div>
</div>

```html
<div class="flex items-start ...">...</div>
<div class="flex items-center ...">...</div>
<div class="flex items-end ...">...</div>
<div class="flex items-stretch ...">...</div>
<div class="flex justify-start ...">...</div>
<div class="flex justify-center ...">...</div>
<div class="flex justify-end ...">...</div>
<div class="flex justify-between ...">...</div>
<div class="flex justify-around ...">...</div>
<div class="flex justify-evenly ...">...</div>
```

For centering content horizontally and vertically, the special utility class `flex-center` is provided.
Expand Down
13 changes: 8 additions & 5 deletions docs/pages/utilities/text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ Font stacks can be overwritten by the corresponding custom property:
<p class="text-base">The Sloth is a lazy mammal. <code class="text-sm">.text-base</code></p>
<p class="text-lg">The Sloth is a lazy mammal. <code class="text-sm">.text-lg</code></p>
<p class="text-xl">The Sloth is a lazy mammal. <code class="text-sm">.text-xl</code></p>
<p class="text-2xl">The Sloth is a lazy mammal. <code class="text-sm">.text-2xl</code></p>
</div>

```html
Expand All @@ -150,14 +151,16 @@ Font stacks can be overwritten by the corresponding custom property:
<p class="text-base">...</p>
<p class="text-lg">...</p>
<p class="text-xl">...</p>
<p class="text-2xl">...</p>
```

```css
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.25rem; line-height: 1.75rem; }
.text-xl { font-size: 1.5rem; line-height: 1.875rem; }
.text-2xl { font-size: 2rem; line-height: 2.25rem; }
```

The basic font size that defines all `rem` based properties (which are almost all size based properties) can be overwritten by the corresponding custom property. Only adjust this if necessary for your use case (it might make everything too big or too small).
Expand Down
2 changes: 1 addition & 1 deletion src/_config.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@

/* Shadows */
--shadow-border: 0 0 0 1px inset;
--shadow-inset: 0 2px .25rem 0 inset;
--shadow-inset: 0 3px .25rem 0 inset;
--shadow-float: 0 .25rem .75rem -.4rem;

/* Borders */
Expand Down
31 changes: 28 additions & 3 deletions src/_utilities.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,18 @@
.flex-wrap {
flex-wrap: wrap;
}
.grow {
flex-grow: 1;
}
.shrink {
flex-shrink: 1;
}
.grow-0 {
flex-grow: 0;
}
.shrink-0 {
flex-shrink: 0;
}
.invisible {
visibility: hidden;
}
Expand Down Expand Up @@ -191,15 +203,24 @@
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-content: start;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: end;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
.flex-center {
display: flex;
align-items: center;
Expand Down Expand Up @@ -374,12 +395,16 @@
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
font-size: 1.5rem;
line-height: 1.875rem;
}
.text-2xl {
font-size: 2rem;
line-height: 2.25rem;
}
.truncate {
overflow: hidden;
Expand Down
8 changes: 6 additions & 2 deletions src/core/_form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,18 @@ label {
/* <input>, <textarea>, <select> */
input, textarea, select {
background-color: var(--color-bg-base);
box-shadow: var(--color-shadow) var(--shadow-inset);
box-shadow:
var(--color-border) var(--shadow-border),
var(--color-shadow) var(--shadow-inset);
font-family: inherit;
transition: var(--transition-outline), var(--transition-color);
border: 0;
box-sizing: border-box;

&:hover:not(:disabled) {
box-shadow: var(--color-accent) var(--shadow-border);
box-shadow:
var(--color-accent) var(--shadow-border),
var(--color-shadow) var(--shadow-inset);
}
&:focus:not(:disabled), &:focus-within:not(:disabled) {
outline: 4px solid var(--color-outline);
Expand Down