modellbau/Linksammlung
1
0
Fork 0
Code Pull Requests Releases Wiki Activity

Updated Adding custom buttons to your own fork (markdown)

Seth Cottle
2025-01-21 00:44:11 -05:00
parent f069164ca3
commit 12e28b8114
1 changed files with 16 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
Adding-custom-buttons-to-your-own-fork.md

@@ -2,6 +2,8 @@
We try to keep our `index.html` and `brands.css` well documented, but we'll give you the lowdown right here too! I also have two semi-short tutorials on YouTube you can watch to get started with LittleLink. [Part 1: Deploying LittleLink with Vercel](https://www.youtube.com/watch?v=mzI770VPIDw) and [Part 2: Making LittleLink Yours](https://www.youtube.com/watch?v=Vee1TSNS1og).
Please note these videos showcase an earlier version of LittleLink. Please reference the additional LittleLink v3 documentation below for the latest code changes.
## Overview
Let's take a look at the following file: `littlelink/css/brands.css`
@@ -9,15 +11,11 @@ Let's take a look at the following file: `littlelink/css/brands.css`
This is where you can add new CSS styling for a button you wish to add. We've made this super simple, to where you only have to touch a few things. Here's a look at one one of the brand CSS blocks looks like:
```
/* BRAND NAME */
.button.button-brandname {
color: #HEX;
background-color: #HEX;
border: 1px solid #HEX;
}
.button.button-brandname:hover,
.button.button-brandname:focus {
filter: brightness(90%);
/* Brand Name */
.button.button-default {
--button-text: #HEX;
--button-background: #HEX;
--button-border:1px solid #HEX;
}
```
@@ -25,9 +23,9 @@ When editing this CSS, here's what you'll need to tweak.
### The Comment:
`/* BRAND NAME */`
`/* Brand Name */`
This is a comment line, you can add the brand name to help keep your file organized.
This is a comment line, you can add the brand name to help keep your file organized. If adding a brand variant, please use the `Alt` modifier (i.e `/* Brand Name Alt */`.
### The Button Name:
@@ -37,32 +35,22 @@ Swap `brandname` with the name of the brand, i.e. `littlelink`. This is what you
### The Text Color:
`color: #ffffff;`
`--button-text: #HEX;`
This is the text color that will appear on your button. You'll typically find these being white (`#FFFFFF`) or black (`#000000`), but sometimes they'll be the brand color depending on what you make the background color in the next step.
### The Button Background Color:
`background-color: #0085ff;`
`--button-background: #HEX;`
This will change the background color of your button. You'll typically find these being the core brand color or a neutral color. Make sure your button background color and button text color have a passing contrast ratio to meet accessibility standards.
This will change the background color of your button. You'll typically find these being the core brand color or a neutral color. Make sure your button background color and button text color have a passing contrast ratio to meet accessibility standards unless otherwise outlined by a brands guidelines.
### The Button Stroke and Stroke Color:
`border: 1px solid #FFFFFF;`
`--button-border:1px solid #HEX; `
This is not required for every button, it should only be added to buttons where the background color does not have appropriate contrast against the default dark and light theme for LittleLink. If the background does not provide enough contrast while using the `light` theme, try using `border: 1px solid #000000;`. If it does not provide enough contrast while using the `dark` theme, try using `border: 1px solid #FFFFFF;`.
### The Last Little CSS Bit:
}
.button.button-brandname:hover,
.button.button-brandname:focus {
filter: brightness(90%);
}
Just swap the `brandname` with the same value you added in the `.button.button-brandname {` section above.
OKAY, that's it! You added the CSS, you did the thing! What's next?
## Add an Icon
@@ -74,9 +62,10 @@ When incorporating the brand's official logo, ensure it remains legible and dist
## Add your button to index.html
```
<a class="button button-brandname" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/brandname.svg" alt="Brand Name Logo">Button Text</a>
<br>
<!-- Brand Name -->
<a class="button button-brandname" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/brandname.svg" alt="Little Link Logo">Brand Name</a>
```
Okay, this is pretty straightforward forward too. We'll break it down section by section.
### Update your button class