Jenaro Calvino

Theme maker - 2001

Shaping our project

ā† to check the previous post

Welcome back to the building of the theme maker 2000, let's pick it up where we left of.

I'll start with the public/index.css file,

First to set the colors we picked:
:root {
  --redish: #875053;
  --pinkish: #fbbfca;
  --blackish: #212d36;
}
Then we add some general rules
body {
  font-family: sans-serif;
  margin: 0;
  background-color: var(--pinkish);
  color: var(--blackish);
  min-height: 100vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

a {
  color: currentColor;
}

p {
  line-height: 2em;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

Now on to the html, my thought process was, we are going to build a SPA but actually because the user will be going nowhere, our app offers nowhere to go...

So instead of building all of our markup inside JS, let's just build it straight up on the index.html, done, we have SSR now šŸ˜….

Let's go to public/index.html and set a general layout:

  <body>
    <header>
      <h1>Theme maker 2000!</h1>
    </header>
    <main id="app">
    </main>
    <footer>
      <p>
        If you wanna read about the vanilla building process of this app, check 
        <a href="https://collectednotes.com/jenaro/theme-maker-2000" rel="noopener noreferrer" target="_blank">this</a>
        blog post.
      </p>
    </footer>
    <!-- ... -->
  </body>

Now let's go back once again to public/index.css to add the styles for the header and the footer.

body > header {
  width: 100%;
  background-color: var(--blackish);
  padding: 1.2em 2em;
  margin-bottom: 1em;
}

body > header h1 {
  font-size: 2em;
  margin-bottom: 0;
  color: #ffffff;
  text-align: center;
  line-height: 1.5;
}

body > main {
  max-width: 1000px;
  display: block;
  margin: 0 auto;
  padding: 0 1em;
  flex: 1;
  width: 100%;
}

body > footer {
  width: 100%;
  padding: 1em;
  background-color: var(--redish);
  color: #ffffff;
  text-align: center;
}

Now this is looking professional!

professional looking app