This starter project is build upon the (awesome) Astro Static Site Builder. This starter offers a couple of Accessibility components and some utility classes to get you building your project faster. Also check out the Accessible Astro Components npm package which can be used with (or without) this starter!
Run the following commands in your project folder to get started:
npm install && npm start
In this starter you'll find a couple of things:
- Accessible landmarks in the
DefaultLayout.astro
file such asheader
,main
andfooter
- Accessible landmark examples in the
index.astro
file such assection
andnav
SkipLinks.astro
component to skip to either the main menu or the main contentNavigation.astro
component with keyboard accessible navigation (arrow keys, escape key)ResponsiveToggle.astro
component with an accessible responsive toggle button for the navigationDarkMode.astro
component toggle with accessible button and a user system preferred color scheme- Outline focus indicator which works on dark and light backgrounds
.sr-only
token class for screen reader only text content
๐๐ป ย Note: Examples are included in the index.astro file
This starter 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:
- Reset file to reset browser defaults and ensure everything looks good
- Some basic font settings, such as responsive heading sizes
- Color shades for your color pallet, rendered to the
:root
of your website as custom properties - Simple auto-grid setting using
display: grid
and adata-attribute
- A bit more advanced grid settings using
display
grid to easily setup a 12-column layout - Utilities set in
_utility.scss
for things such as spacing, sizes, colors, and box-shadows
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
.
<div class="container">
<div class="grid">
<div class="small-12 medium-3">
<h3>Sidebar</h3>
<!-- ... -->
</div>
<div class="small-12 medium-8 offset-medium-4">
<h3>Main</h3>
<!-- ... -->
</div>
</div>
</div>
Alignment classes can be used to align elements in your HTML. There's align-center
, align-horizontal
and align-vertical
.
<div class="align-center w-screen h-screen">
<h1>Center me on the screen!</h1>
</div>
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.
<div data-animation="fade-in">
<p>I've got a fancy fade-in animation that starts right away.</p>
</div>
<div data-animation="fade-in" data-animation-delay="0.25s">
<p>I've got a fancy fade-in animation after 0.25s.</p>
</div>
<div data-animation="fade-in" data-animation-delay="0.5s">>
<p>I've got a fancy fade-in animation after 0.5s.</p>
</div>
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).
<div class="container" data-auto-grid="3">
<p>First column</p>
<p>Second column</p>
<p>Third column</p>
</div>
You can also center the contents of the cell using the data-grid-center
attribute. Use it together with data-auto-grid
.
<div class="container" data-auto-grid="3" data-grid-center>
<!-- ... -->
</div>
With two border radius utility classes (radius-small
and radius-large
) you can change the border radius of your HTML elements on the fly.
<div class="bg-neutral-900 space-32 radius-large">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
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.
$colors: (
primary: (
100: hsl(262, 90%, 95%),
200: hsl(262, 100%, 88%),
300: hsl(262, 100%, 78%),
400: hsl(268, 82%, 60%),
500: hsl(273, 79%, 48%),
),
// ...
);
<div class="text-neutral-100 bg-neutral-900 space-32">
<p>Dark background with white text on it!</p>
</div>
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
.
<div class="space-32 radius-large elevation-400">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
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.
<div class="h-screen w-screen align-center">
<p>I'm centered in the middle of the screen!</p>
</div>
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.
<section class="padding-32">
<div class="container">
<h2 class="margin-16 bottom">Grid example</h2>
</div>
</section>
<div class="box space-32 bg-primary-200 radius-small elevation-100">
<div class="space-content">
<h3>I look like a card!</h3>
<p>And space-content adds space between us for readability.</p>
</div>
</div>
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
.
<div class="container">
<p class="size-20">I'm a bigger font size!</p>
</div>
If you find that something isn't working right then I'm also happy to hear it to improve this starter! Let me know by either:
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 :)