ashx3s

Creating a Simple Nav Bar

This will use flexbox to allow it to be responsive

nav layout

• display: flex; will make your nav element a flex container
  • Especially important if your nav tag has a home icon on the left and a group of links on the right
  • If you are using a ul inside the nav, you will need the ul to also be a nav container
• use nested selectors for clear code
  • nav ul { /* Code Here */ }

ashx3s

Semantic HTML

This gist explores a fairly complex approach to semantic html. Keep in mind that because it is all just 1 wiki page, you could get rid of the article tags and just use sections.

However This is meant to show a more complex example in practice. Base your code on the needs of your content.

Heading Text

• Semantic breaks in your page need headings.
  -This includes article, header, section
• heading next must be sequential (no h2 before h1) extra reading

ashx3s

Header Nav Alternate Design

This gist uses most of the same methods as the Flex Nav Bar. However uses a header as the main bar and uses inline-block styling on the list elements

Header Container

• This is a semantic way to create a complex header bar
• This can be especially useful if you have more than just your navlinks in the top bar
  • Ie: a contact or shopping cart button for modal popups, an email button that opens up the user's default email client...
• This can be an excellent practice for your site structure

List Items - a few ideas

ashx3s

Media Queries

Media queries are used to set breakpoints for layout changes. While responsive design using flexbox and grid have reduced our need for media queries, they are still very important for complex and dynamic layouts.

Documentation

• Mdn Beginner's Guide to Media Queries
• CSS-Tricks Guide to Media Queries

Mobile or Desktop First?

• Media queries set breakpoints for how content is displayed
• you can make very percise layout changes for different screen sizes

ashx3s

Image Organization

Full

• Unedited version of the image

Large

• 2500px wide
  • for images that span the whole width of the browser

ashx3s

Srcset, Sizes, and Image Optimization

• srcset is an html attribute that identifies which image to render from a set depending on specified circumstances.
• use srcset and sizes together to serve web content that renders best for the user's device.

---

Srcset

'Here are my images, pick whichever one you think is best'

ashx3s

gitignore files

You can create project specific gitignore files in your git repo, and you can also create a global gitignore.

It is considered best practice to put system related files into a global gitignore.

• A gitignore file sits in either the root of your git repo or in your home directory.
• It needs to be pushed to the remote repositoy
• it needs to be named `.gitignore

ashx3s

Feature Branch

Try creating a feature branch to experiment with a new design system. Using a feature branch will keep your original code safe from any confusing mistakes. Plus you can always merge your feature into main when you're happy

Steps

1. Create a new branch in one of your repositories.

• git checkout -b feature-title

ashx3s

Nuxt Setup

These are basic instructions for installing NuxtJS for CMS managed static website.

Nuxt provides a useful CLI that does a lot of the heavy lifting. You can install with yarn, npx, or npm.

• Note that if you install with yarn, it will require that you use node v14 instead of v16 because of a strapi dependency.

Initial Setup

ashx3s

Nuxt Project Structure

Steps to organize your project after installing nuxt. These notes are based on the nuxt documentation

Assets Directory

Just like in a normal project, all of your un-compiled assets go in here. This includes images, fonts, and styles.

• In your vue files, you will call assets differently from normal. Use this syntaq:
  • In a vue template: