Skip to content

Instantly share code, notes, and snippets.

View acidtone's full-sized avatar

Tony Grimes acidtone

156 followers · 6 following
  • Southern Alberta Institute of Technology
  • Calgary
View GitHub Profile
@acidtone
acidtone / README.md
Last active January 24, 2021 22:34
<aside> element: What's it for?

Aside: Proper Use

In HTML5, aside is only "related to the content around the aside element".

In HTML 5.1 (CR) the definition became more specific: aside is "related to the content of the parenting sectioning content".

Following the newer definition, the aside element should be inside of the section element to which it is related.

Sectioning elements

  • body
  • header
@acidtone
acidtone / README.md
Last active January 25, 2021 09:04
Navigation list: horizontal

Navigation: Horizontal menu

  1. Style menu links

  2. Create a flexbox container:

    .container {
  display: flex;
}
@acidtone
acidtone / README.md
Last active January 25, 2021 09:35
Header: logo and title

Header: Horizontal banner with logo and site title

  1. Create a flex container:

    .container {
  display: flex;
}

  2. Use justify-content to control how items are horizontally positioned (when in row direction):

@acidtone
acidtone / README.md
Last active January 25, 2021 09:37
Header: logo, title and sub-title

Header: Horizontal banner with logo, site title and sub-title

This gist builds upon a simpler gist that does not have a sub-title.

  1. Create a flex container:

    .container {
  display: flex;
}
@acidtone
acidtone / README.md
Last active January 25, 2021 10:24
Navigation list: vertical

Navigation: Vertical menu - full width

  1. Reset default list styles

  2. Make the links big and clickable:

    nav a {
  padding: 0.5rem 1rem;
}
@acidtone
acidtone / README.md
Last active January 25, 2021 10:24
Navigation list: reset browser defaults

Navigation: Resetting default list styles

Lists come with a few browser defaults that usually need to be reset before they can be used for navigation.

  1. Remove list bullets:

    nav li {
  list-style: none;
}
@acidtone
acidtone / README.md
Last active January 25, 2021 15:33
Navigation list: horizontal - full width

Navigation: Horizontal menu - full width

  1. Style menu links

  2. Create a flexbox container:

    .container {
  display: flex;
}
@acidtone
acidtone / index.html
Last active January 26, 2021 13:17
Media queries: orientation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portrait/Lanscape Orientation</title>
<style>
/* Set default styles. In this case, styles for portrait orientation (most likely mobile). */
body {
background-color: grey;
@acidtone
acidtone / index.html
Last active January 26, 2021 16:59
Media queries: min-width (open)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile First: min-width</title>
<style>
/* Set default styles. In this case, styles for mobile. */
body {
background-color: grey;
@acidtone
acidtone / index.html
Last active January 26, 2021 17:08
Media queries: max-width (open)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desktop First: max-width</title>
<style>
/* Set default styles. In this case, styles for desktop. */
body {
background-color: grey;