You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This Dashboard theme is build upon the (awesome) [Astro Static Site Builder](https://astro.build/). To help you build your project *faster*, this theme includes some dedicated accessible components (such as a keyboard accessible and responsive navigation) and several components coming from the [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components) npm package. This theme also includes example pages, admin pages, a custom 404 page and many **Design System** utility classes, patterns and primatives (such as grids, buttons, lists, spacings, sizes and more).
3
+
[](https://astro.build)
Run the following commands in your project folder to get started:
9
-
```console
10
-
npm install && npm start
11
-
```
7
+
A modern, accessibility-focused dashboard template built with [Astro](https://astro.build/). Designed with WCAG guidelines in mind, this theme provides a comprehensive admin interface with built-in accessibility features. It includes a responsive, keyboard-accessible navigation system, authentication flows, and integrates seamlessly with [Accessible Astro Components](https://github.com/incluud/accessible-astro-components). Complete with example pages, authentication flows, and a custom 404 page, this template offers everything you need to kickstart your accessible admin dashboard.
[](https://x.com/incluud)
12
+
[](https://bsky.app/profile/incluud.dev)
13
+
[](https://opencollective.com/incluud)
14
+
[](https://github.com/sponsors/incluud)
15
+
16
+
## Our mission
17
+
18
+
> Provide developers with accessible, easy-to-use components that make building inclusive web applications simpler and faster, without compromising on customization or performance.
12
19
13
20
## (Accessibility) features
14
21
@@ -35,239 +42,59 @@ npm install && npm start
35
42
-[Accessible Astro Components](https://github.com/markteekman/accessible-astro-components) package comes preinstalled with extra components such as Accordions, Modals and Notifications
36
43
- Nate Moore's awesome [Astro Icon](https://github.com/natemoo-re/astro-icon) package is also preinstalled which can be applied to different use cases
37
44
38
-
**Provided by the Accessible Astro Components package*
39
-
40
-
## Login & Authentication
41
-
42
-
This starter contains a basic example of authentication and redirecting based on a users logged in status. However, this is done using SSG, which is not ideal, but serves the purpose of this demo. For better authentication and redirecting you should use [Astro's (experimental) SSR](https://docs.astro.build/en/guides/server-side-rendering/).
43
-
44
-
### Enabling SSR
45
-
46
-
For the purpose of the demo I have not enabled SSR, simply due to the fact how I've setup the demo websites of all [accessible-astro.dev](https://accessible-astro.dev) subdomains. However, I might add it in the future. It is the preferred way to handle your login and redirect cases.
47
-
48
-
### LoginForm.astro
49
-
50
-
This theme contains an example login flow, using a fake email address and password and by utilizing the `localStorage`. All pages redirect to `/login.astro` if you haven't logged in. After logging in the value `isLoggedIn` is set to `true` and your authenticated to view the admin pages. When building this using SSR you should use `cookies` instead of the `localStorage`.
51
-
52
-
⚠️ **Note: this is just an example, make sure you build your own secure authentication. Checkout this [official Astro Blog post](https://astro.build/blog/experimental-server-side-rendering/) for more information about authentication and login.**
53
-
54
-
```js
55
-
<script>
56
-
// fetch your data from an API
57
-
// and replace that with an actual user object for example
58
-
59
-
submitButton.addEventListener('click', event=> {
60
-
event.preventDefault()
61
-
62
-
if (emailInput.value==='admin@astro.build'&&passwordInput.value==='Astronaut570') {
63
-
localStorage.setItem('isLoggedIn', 'true')
64
-
window.location.href='/'
65
-
}
66
-
})
67
-
</script>
68
-
```
69
-
70
-
### DefaultLayout.astro
71
-
72
-
```js
73
-
---
74
-
import { getUser } from'../api/index.js'
75
-
76
-
constuser=awaitgetUser(Astro.request)
77
-
78
-
if (!user) {
79
-
returnAstro.redirect('/login')
80
-
}
81
-
---
82
-
```
83
-
84
-
## Utilities
85
-
86
-
This theme contains some extra **Design System** like utility classes to aid in the global layout of your project. All of this can be found in the `public/scss/base` directory, and compiles in the `globals.scss` file. Using these primitives is totally optional, use or remove at your own preference :) What it contains:
87
-
88
-
- Reset file to reset browser defaults and ensure everything looks good
89
-
- Some basic font settings, such as responsive heading sizes
90
-
- Color shades for your color pallet, rendered to the `:root` of your website as custom properties
91
-
- Simple auto-grid setting using `display: grid` and a `data-attribute`
92
-
- A bit more advanced grid settings using `display` grid to easily setup a 12-column layout
93
-
- Utilities set in `_utility.scss` for things such as spacing, sizes, colors, and box-shadows
94
-
95
-
### 12 Column Grid
96
-
97
-
12 Column Grid enables you to build custom column based layouts. Using `display: grid;` you can define the amount of columns that elements should take up in your `.grid`, and for which breakpoint they should do so. You can also use offset on a grid to create an extra column of offset. The grid offers different utilities for the individual grid items such `equal-height`, `x-start`, `x-center`, `x-end`, `y-start`, `y-center` and `y-end`. Grid comes with default gutters, to disable them you can use the utility class `no-gutters`.
98
-
99
-
```html
100
-
<divclass="container">
101
-
<divclass="grid">
102
-
<divclass="small-12 medium-3">
103
-
<h3>Sidebar</h3>
104
-
<!-- ... -->
105
-
</div>
106
-
<divclass="small-12 medium-8 offset-medium-4">
107
-
<h3>Main</h3>
108
-
<!-- ... -->
109
-
</div>
110
-
</div>
111
-
</div>
112
-
```
113
-
114
-
### Alignment
115
-
116
-
Alignment classes can be used to align elements in your HTML. There's `align-center`, `align-horizontal` and `align-vertical`.
117
-
118
-
```html
119
-
<divclass="align-center w-screen h-screen">
120
-
<h1>Center me on the screen!</h1>
121
-
</div>
122
-
```
45
+
## Getting started
123
46
124
-
### Animations
47
+
Clone this theme locally and run any of the following commands in your terminal:
125
48
126
-
There are a couple of basic animations which you can throw on your HTML elements like `blink`, `fade-in`, `pop-up` and `spin`. You can also use some animation delays to create different effects.
<p>I've got a fancy fade-in animation after 0.5s.</p>
137
-
</div>
138
-
```
56
+
## Accessible Astro projects
139
57
140
-
### Auto Grid
58
+
-[Accessible Astro Starter](https://github.com/incluud/accessible-astro-starter): Fully accessible starter for kickstarting Astro projects, with Tailwind.
59
+
-[Accessible Astro Components](https://github.com/incluud/accessible-astro-components/): Library of reusable, accessible components build for Astro.
60
+
-[Accessible Astro Dashboard](https://github.com/incluud/accessible-astro-dashboard/): User-friendly dashboard interface with a login screen and widgets.
61
+
-[Accessible Astro Docs](https://github.com/incluud/accessible-astro-docs): Comprehensive documentation for all Accessible Astro projects.
141
62
142
-
Simply apply the `data-auto-grid` attribute on your parent `div` with a number from 2-6 (if you need more columns just tweak the for loop in `_auto-grid.scss`). The grid automatically creates new rows (this is how `display: grid` works by default).
63
+
Check out our [roadmap](https://github.com/orgs/incluud/projects/4/views/1) to see what's coming next!
143
64
144
-
```html
145
-
<divclass="container"data-auto-grid="3">
146
-
<p>First column</p>
147
-
<p>Second column</p>
148
-
<p>Third column</p>
149
-
</div>
150
-
```
65
+
## Contributing
151
66
152
-
You can also center the contents of the cell using the `data-grid-center` attribute. Use it together with `data-auto-grid`.
67
+
We welcome contributions to improve the documentation! You can help by:
1.[Filing an issue](https://github.com/incluud/accessible-astro-dashboard/issues)
70
+
2.[Submitting a pull request](https://github.com/incluud/accessible-astro-dashboard/pulls)
71
+
3.[Starting a discussion](https://github.com/incluud/accessible-astro-dashboard/discussions)
72
+
4.[Supporting on Open Collective](https://opencollective.com/incluud)
159
73
160
-
### Borders
74
+
##Support this project
161
75
162
-
With two border radius utility classes (`radius-small` and `radius-large`) you can change the border radius of your HTML elements on the fly.
76
+
Your support helps us cover basic costs and continue building accessible solutions for the Astro ecosystem. By becoming a sponsor, you're not just supporting code – you're helping create a more inclusive web for everyone. Every contribution, big or small, helps maintain and improve these accessibility-focused tools.
163
77
164
-
```html
165
-
<divclass="bg-neutral-900 space-32 radius-large">
166
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
167
-
</div>
168
-
```
78
+
[](https://opencollective.com/incluud)
169
79
170
-
### Buttons
80
+
##Together we make a difference
171
81
172
-
A Button primitive to easily apply button styles to your `<button>` and `<a>` tags. Simply apply the class `button`to your element. There are different variations in colors (`color-secondary`, `color-info`, `color-success`, `color-warning`, `color-error`) which is primary by default, sizing (`size-tiny`, `size-large`, `size-huge`) which is medium by default and behavior (`behavior-full`) which stretches the button to 100% width.
82
+
We want to express our heartfelt gratitude to everyone who contributes to making the web more accessible:
You can setup your own color schemes in the `_colors.scss` file. You'll find a SCSS map, which gets printed inside `_root.scss` as custom properties. There are also several color utilities such as `text-primary-#` and `bg-neutral-#` based on all colors you've defined. `text-primary-#` should be used on a parent element to give the child's the respective color.
Use elevations on your HTML elements to add a box shadow of different intensities. Use either `elevation-100`, `elevation-200`, `elevation-300`, `elevation-400` or `elevation-500`.
206
-
207
-
```html
208
-
<divclass="space-32 radius-large elevation-400">
209
-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
210
-
</div>
211
-
```
212
-
213
-
### Height / Width
214
-
215
-
You can set the height and width of your elements to either 100 view port units or percentages using `h-screen`, `h-full`, `w-screen` and `w-full` respectfully.
216
-
217
-
```html
218
-
<divclass="h-screen w-screen align-center">
219
-
<p>I'm centered in the middle of the screen!</p>
220
-
</div>
221
-
```
222
-
223
-
### Margins, Paddings and Spaces
224
-
225
-
To prevent spacing each element in your website individually and to prevent inconsistencies, you can use the `.margin-#` and `.padding-#` utility classes. A good practice is to set in on your `<section>` elements, for starters. To space out content you can use a special `.space-content` class on your parent div (for example an element of your `.grid`). By default, margin/padding top and bottom are set with these utilities. You can also set it explicitly using either `.top` of `.bottom` class tokens. Find or tweak all spacing options in `_space.scss`. `space-#` tokens however add padding all around an element, which is great of you need to make card like blocks on the fly by combining `space` with the other utilities.
<p>And space-content adds space between us for readability.</p>
240
-
</div>
241
-
</div>
242
-
```
243
-
244
-
### Sizes
245
-
246
-
If you need an exception on your font-size for a specific reason you can use size utility classes to accomplish that. Using it is easy. Find or tweak all spacing options in `_size.scss`.
If you find that something isn't working right then I'm always happy to hear it to improve this starter! You can contribute in many ways and forms. Let me know by either:
88
+
-**The Astro team** for creating an amazing static site generator and the wonderful Starlight theme
89
+
-**Our contributors** who dedicate their time and expertise to improve these tools
90
+
-**Our sponsors** who help make this project sustainable
91
+
-**The web community** for embracing and promoting web accessibility
92
+
-**You, the developer** for choosing to make your projects more accessible
263
93
264
-
1.[Filing an issue](https://github.com/markteekman/accessible-astro-dashboard/issues)
265
-
2.[Submitting a pull request](https://github.com/markteekman/accessible-astro-dashboard/pulls)
266
-
3.[Starting a discussion](https://github.com/markteekman/accessible-astro-dashboard/discussions)
267
-
4.[Buying me a coffee!](https://www.buymeacoffee.com/markteekman)
94
+
Together, we're not just building documentation or components – we're creating a more inclusive and accessible web for everyone. Every contribution, whether it's code, documentation, bug reports, or feedback, helps move us closer to this goal. ✨
268
95
269
-
## Thank you!
96
+
Remember: Accessibility is not a feature, it's a fundamental right. Thank you for being part of this journey!
270
97
271
-
A big thank you to the creators of the awesome Astro static site generator and to all using this starter to make the web a bit more accessible for all people around the world :)
Accessible Astro started as a personal project by [Mark Teekman](https://github.com/markteekman) in 2021 when Astro was in its early stages, born from a passion for web accessibility and the Astro framework. What began as a single starter template grew into a family of accessible solutions, leading to the creation of [Incluud](https://github.com/incluud), an initiative with [Peter Padberg](https://github.com/peterpadberg) to make the web more inclusive. Today, these projects continue to grow and evolve with the help of our amazing community, staying true to their original purpose: making web accessibility easier for developers and better for everyone.
0 commit comments