Created Adding custom buttons to your own fork (markdown)

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

@@ -0,0 +1,97 @@
+## Adding custom buttons to your own fork
+
+We try to keep our `index.html` and `brands.css` well documented, but we'll give you the lowdown right here too!
+
+## Overview
+
+Let's take a look in 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: #ffffff;
+  background-color: #0085ff;
+}
+.button.button-brandname:hover,
+.button.button-brandname:focus {
+  filter: brightness(90%);
+}
+```
+
+When editing this CSS, here's what you'll need to tweak.
+
+### The Comment:
+
+`/* BRAND NAME */`
+
+This is a comment line, you can add the brand name to help keep your file organized.
+
+### The Button Name:
+
+`.button.button-brandname {`
+
+Swap `brandname` with the name of the brand, i.e. `littlelink`. This is what you'll declare in your button class in `index.html` later.
+
+### The Text Color:
+
+`color: #ffffff;`
+
+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;`
+
+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.
+
+### 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
+
+In `littlelink/images/icons/` you'll want to add a 24x24px SVG of the icon/brand. You can use a JPG or PNG, but it may suffer from poor resolution depending on the user device. SVGs are scalable and work pretty much everywhere. You'll want to manipulate the color of the icon to be accessible on top of your button background color. If you're using a brand color as your button background color, you may want your icon to be white (`#FFFFFF`) or black (`#000000`). If you used a neutral color, you may want your icon to be representative of your actual logo/icon colors.
+
+## Add your button to index.html
+
+```
+<a class="button button-brandname" href="#" target="_blank" rel="noopener">
+   <img class="icon" src="images/icons/brandname.svg" alt="Brand Name Logo">Button Text</a>
+<br>
+```
+Okay, this is pretty straightforward forward too. We'll break it down section by section.
+
+### Update your button class
+
+`class="button button-brandname"` 
+
+Change `brandname` with the same brand name you introduced in the `.button.button-brandname {` section above.
+
+
+### Add Your Link
+
+Ready to make your button link somewhere? Just change the `#` in `href="#"` with your link, i.e. `href="https://littlelink.io"`.
+
+### breaking down the rest of the A attributes.
+
+`target="_blank"` | This attribute opens links in a new tab. Remove this attribute to prevent links from opening in a new tab.
+
+`rel="noopener"` | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it. This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
+
+### Breaking down the IMG attributes
+
+`class="icon"` | This class is telling the <img> tag that it should use the styling for icons found in `css/brands.css`.
+
+`src="icons/[icon_name].svg"` | This defines the icon you would like to display from the icons/ folder. For example, you can change this to `src="icons/discord.svg"` to use the Discord icon. Add your own 24x24 icons to the `icons` folder to reference them. We recommend providing a SVG.
+
+`alt="Example Logo"` | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.