Skip to content

Commit

Permalink
Merge pull request #16 from markteekman/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@markteekman
markteekman authored Feb 26, 2022
2 parents d1396a2 + 1c9dadd commit 4ed951b
Show file tree
Hide file tree
Showing 41 changed files with 458 additions and 401 deletions.
154 changes: 110 additions & 44 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ This starter project is build upon the (awesome) [Astro Static Site Builder](htt

[Live demo](https://accessible-astro.markteekman.nl/)

## Installation
## Getting started
Run the following commands in your project folder to get started:
```console
npm init astro -- --template markteekman/accessible-astro-starter
npm install && npm start
```

## Accessibility features
Expand All @@ -22,9 +23,11 @@ In this starter you'll find a couple of things:
- Outline focus indicator which works on dark and light backgrounds
- `.sr-only` token class for screen reader only text content

## Other features
## Utitilies

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:
👉🏻   _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
Expand All @@ -33,7 +36,52 @@ This starter contains some extra Design System like utility classes to aid in th
- 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

### Using Auto Grid
### 12 Column Grid

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`.

```html
<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

Alignment classes can be used to align elements in your HTML. There's `align-center`, `align-horizontal` and `align-vertical`.

```html
<div class="align-center w-screen h-screen">
<h1>Center me on the screen!</h1>
</div>
```

### Animations

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.

```html
<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>
```

### Auto Grid

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).

Expand All @@ -53,32 +101,62 @@ You can also center the contents of the cell using the `data-grid-center` attrib
</div>
```

_Examples are included in the index.astro file_
### Borders

With two border radius utility classes (`radius-small` and `radius-large`) you can change the border radius of your HTML elements on the fly.

```html
<div class="bg-neutral-900 space-32 radius-large">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
```

## Colors

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.

```scss
$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%),
),
// ...
);
```

```html
<div class="text-neutral-100 bg-neutral-900 space-32">
<p>Dark background with white text on it!</p>
</div>
```

### Using Grid
### Elevations

Grid enables you to build a little more complex layouts if need be. Using `display: flex;` you can define the amount of columns `.cells` 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. For all examples check [my documentation website](https://markteekman.nl/project/flexbox-grid).
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`.

```html
<div class="container">
<div class="grid gutters">
<div class="cell small-12 medium-3">
<h3>Sidebar</h3>
<!-- ... -->
</div>
<div class="cell small-12 medium-8 offset-medium-1">
<h3>Main</h3>
<!-- ... -->
</div>
</div>
<div class="space-32 radius-large elevation-400">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
```

_Examples are included in the index.astro file_
### Height / Width

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.

```html
<div class="h-screen w-screen align-center">
<p>I'm centered in the middle of the screen!</p>
</div>
```

### Using Margin and Padding
### Margins, Paddings and Spaces

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 in a `.cell` 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`.
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.

```html
<section class="padding-32">
Expand All @@ -88,9 +166,16 @@ To prevent spacing each element in your website individually and to prevent inco
</section>
```

_Examples are included in the index.astro file_
```html
<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>
```

### Using Sizes
### Sizes

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`.

Expand All @@ -100,25 +185,6 @@ If you need an exception on your font-size for a specific reason you can use siz
</div>
```

_Examples are included in the index.astro file_

## Using Colors

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.

```scss
$colors: (
primary-clr: (
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%),
),
// ...
);
```

## Helping out

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:
Expand All @@ -128,6 +194,6 @@ If you find that something isn't working right then I'm also happy to hear it to

## Thank you!

A big thank you to the creators of this awesome Astro static site builder and to all using this starter to make the web a bit more accessible for all people around the world :)
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 :)

[![buymeacoffee-button](https://user-images.githubusercontent.com/3909046/150683481-be070424-7bb0-4dd7-a3cb-43b5605163f5.png)](https://www.buymeacoffee.com/markteekman)
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
{
"name": "accessible-astro-starter",
"version": "1.1.2",
"version": "1.2.0",
"private": true,
"scripts": {
"start": "astro dev",
"build": "astro build"
},
"devDependencies": {
"astro": "^0.21.2",
"astro": "^0.23.1",
"autoprefixer": "^10.4.0",
"sass": "^1.49.9",
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0"
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/DarkMode.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,13 @@

<style lang="scss">
.darkmode-toggle {
border: 2px solid var(--secondary-clr-500);
border: 2px solid var(--secondary-500);
border-radius: var(--radius-small);
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

&:hover {
color: var(--neutral-clr-0);
background-color: var(--secondary-clr-500);
color: var(--neutral-100);
background-color: var(--secondary-500);
}
}
</style>
29 changes: 16 additions & 13 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,41 @@ import DarkMode from '../components/DarkMode.astro'
---

<DefaultLayout title="Home">
<section class="margin-32">
<section class="margin-48">
<div class="container">
<h1 tabindex="-1">Hello world!</h1><br>
<DarkMode client:load />
</div>
</section>
<section class="padding-32 color-primary">
<section class="padding-48 color-primary">
<div class="container">
<h2 class="margin-16 bottom">Grid example</h2>
<h2 class="margin-16 bottom">Auto Grid</h2>
</div>
<div class="container" data-auto-grid="3">
<div class="box">
<div class="box text-neutral-100 bg-neutral-900 space-32 radius-large elevation-500" data-animation="fade-in">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem. <strong><a href="#">Tab to me!</a></strong></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem. </p>
</div>
<div class="box">
<div class="box text-neutral-100 bg-neutral-900 space-32 radius-large elevation-500" data-animation="fade-in" data-animation-delay="0.25s">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
</div>
<div class="box">
<div class="box text-neutral-100 bg-neutral-900 space-32 radius-large elevation-500" data-animation="fade-in" data-animation-delay="0.5s">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
</div>
</div>
<div class="container margin-16 top">
<strong><a href="#">Tab to me!</a></strong>
</div>
</section>
<section class="margin-32">
<section class="margin-64">
<div class="container">
<div class="grid gutters">
<div class="cell">
<h2>Flexbox example</h2>
<div class="grid">
<div class="small-12">
<h2>12 Column Grid</h2>
</div>
<div class="cell space-content small-12 medium-3">
<div class="small-12 medium-3 space-content">
<h3>Sidebar</h3>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
Expand All @@ -44,7 +47,7 @@ import DarkMode from '../components/DarkMode.astro'
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
<div class="cell space-content small-12 medium-8 offset-medium-1">
<div class="small-12 medium-8 offset-medium-4 space-content">
<h3>Main</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi mollitia alias sunt accusamus reiciendis fuga delectus, repellendus molestiae dolore illo iusto eligendi eaque qui hic facilis assumenda! Velit, minus, nobis. <strong><a href="#">Tab to me!</a></strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi mollitia alias sunt accusamus reiciendis fuga delectus, repellendus molestiae dolore illo iusto eligendi eaque qui hic facilis assumenda! Velit, minus, nobis.</p>
Expand Down
5 changes: 1 addition & 4 deletions src/styles/base/_auto-grid.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
// | -------------------------------------------------------------
// | > Auto Grid
// | -------------------------------------------------------------
// | Easy to implement column layouts with display grid.
// | Auto Grid
// | -------------------------------------------------------------

// used variables and mixins
@use "breakpoint" as *;
@use "space" as *;

Expand Down
34 changes: 34 additions & 0 deletions src/styles/base/_border.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
// | -------------------------------------------------------------
// | Border
// | -------------------------------------------------------------

$border-style: solid !default;
$border-small: 2px !default;
$border-medium: 3px !default;
$border-large: 6px !default;

@mixin border-small($color) {
border-width: $border-small;
border-style: $border-style;
border-color: $color;
}

@mixin border-medium($color) {
border-width: $border-medium;
border-style: $border-style;
border-color: $color;
}

@mixin border-large($color) {
border-width: $border-large;
border-style: $border-style;
border-color: $color;
}

@mixin radius-small {
border-radius: var(--radius-small);
}

@mixin radius-large {
border-radius: var(--radius-large);
}
14 changes: 2 additions & 12 deletions src/styles/base/_breakpoint.scss
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,24 @@
// | -------------------------------------------------------------
// | > Breakpoint
// | -------------------------------------------------------------
// | Breakpoint mixin used in the other base files or in a
// | project.
// | Breakpoint
// | -------------------------------------------------------------

// breakpoints map
$breakpoints: (
"default": 0,
"small": 24em,
"medium": 48em,
"large": 75em,
"huge": 87.5em,
"large": 75em
) !default;

// breakpoint mixin
@mixin breakpoint($breakpoint) {
// if key is in map
@if map-has-key($breakpoints, $breakpoint) {
// set media query
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
} @else if (type_of($breakpoint) == number) {
// set media query
@media (min-width: $breakpoint+"px") {
@content;
}
}
// if key is not in map or not a valid input, throw error message
@else {
@error "Not a correct value, check _base-breakpoints for availible values.";
}
Expand Down
Loading

0 comments on commit 4ed951b

Please sign in to comment.