View on GitHub

Enhance Workshop

This is the Enhance Workshop

Module Index

Module 2: HTML-First Development

The Enhance Way

The problem with frameworks

The New Old Way

HTML-First

JavaScript Too, But just a little

Build HTML pages

Now lets start building a developer portfolio.

Get the code for this module:

cd enhance-workshop
git checkout module02-start

Start the local development server

npm start

Add a home page

We are going to add some basic HTML content to start our site. Enhance lets us add HTML with zero friction

<!-- /app/pages/index.html--->
<main>
  <h1>Home</h1>
  <p>Hello World</p>
</main>

Wow, that looks terrible.

I’ve said it before and I’ll say it again. Work with great designers. They’ll make your life easier. Luckily we work with some great ones at Begins so this will get better.

Enhance has a CSS Reset as part of our base styling. This helps with design consistency across browsers, but it also means we will need to add some styles before it is usable. Let’s add some very basic CSS.

Styling

Enhance is standards based and the styling approach is in line with that. You can use anything you want for styles and we have documentation on how to use plain ole css, Tailwind or Sass.

We have a recommended best practice but ultimately you can do whatever you want.

Plain CSS

Lets start with a plain old <style> tag.

<!-- /app/pages/index.html--->
<style>
  body {
    color: blue;
  }
</style>
<main>
  <h1>Home</h1>
  <p>Hello World</p>
</main>

In reality this will put a style tag in the body with the other markup. This should be avoided because the styles can potentially change as the page is being rendered.

Enhance Styles

Enhance comes with a built in styling system that includes:

Utility Styles

The utility styles are applied as classes in the markup. This allows for scoping to any element directly.

Instead of the style tag above add these classes to the h1 tag and refresh the page.

<!-- /app/pages/index.html--->
<main>
  <h1 class='mb6 text5 font-light text-center tracking-2'>Home</h1>
  <p>Hello World</p>
</main>

That looks much better, but how do we know what classes to add to apply the styling we need?

Component Scoped Styles

The second part of Enhance Styles is the component scoped styles. Some CSS can not be easily applied directly with class names on an element. In this case regular CSS can be written in a style tag that will be hoisted to the document head.

More details on this in upcomming modules.

Add a Résumé page

Since this is a developer portfolio lets add a page for a résumé.

<!-- /app/pages/resume.html--->
<main>
  <h1 class='mb6 text5 font-light text-center tracking-2'>Résumé</h1>
  <p>Hello World</p>
</main>

Now that we have two pages, we will need to navigate between them.

Lets add a navigation bar at the top of the page.

<!-- /app/pages/resume.html--->
<nav class='flex gap0'>
  <h1 class='font-semibold tracking-1'>
    <a href='/' class='no-underline'>My Site</a>
  </h1>
  <ul class='mis-auto flex gap0 list-none'>
    <li><a href='/'>Home</a></li>
    <li><a href='/resume'>Résumé</a></li>
  </ul>
</nav>

<main>
  <h1 class='mb6 text5 font-light text-center tracking-2'>Résumé</h1>
  <p>Hello World</p>
</main>

Now we need to add the same navigation to the top of the home page.

We now have some duplicated markup across these two pages. This duplication feels wrong. As our site continues to grow by adding new pages, we will need to update our navigation section in each one of them. This will get unwieldy very quickly so we immediately want to DRY it up.

We need templating or better yet a way to build components. HTML does not have a built in way to handle this.

Many JavaScript framework had their inception at this very moment.

The Web Platform needs its own component model.

Thankfully, now it has one.