Documentation

See below for more information on how to use Simple Base.

Introduction

Simple Base is a minimalistic HTML + CSS + JS base front-end starter boilerplate for simple static web site projects. Designed for web designers and front-end developers, Simple Base was created for students learning how to code a basic front-end framework from scratch by hand, line by line.

No prior web design experience is required. Designed for first-time front-end coders, Simple Base uses no pre-processing, no command line, and no special software. All you need is a text editor and a browser.

All styling is intentionally minimal for simple, basic web sites. Core CSS includes base typography, a simple responsive grid, and a default site structure with a mobile-friendly navigation system.

Folder Structure


sitename/
├── index.html
├── css/
│   ├── style.css
├── js/
│   ├── script.js
├── img/
│   ├── ...

Boilerplate

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>                  
    <meta name="description" content="">   

    <!-- MAIN CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
    ...

    <!-- MAIN JS -->
    <script src="js/script.js"></script>
</body>
</html>

CSS


/* CSS TABLE OF CONTENTS 

# GLOBAL
    # GLOBAL VARIABLES (CUSTOM PROPERTIES)
    # GLOBAL RESETS
    # GLOBAL COLORS
    # GLOBAL TYPOGRAPHY
    # GLOBAL MEDIA 
    # GLOBAL HELPERS

# LAYOUT
    # CONTAINER
    # GRID SYSTEM

# PAGE STRUCTURE (BASE TEMPLATE)
    # HEADER
    # MAIN
        # SECTIONS
    # FOOTER

# UI COMPONENTS
    # BUTTONS
    ...

# ANIMATION
    # SMOOTH SCROLLING

# CUSTOM STYLING
    ...

*/

JavaScript


document.addEventListener("DOMContentLoaded", function () {

    // GLOBAL FUNCTIONS 
    ...

});

Typography

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a paragraph. This is a link. This is bold text. This is italic text. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus molestias illum hic sequi illo architecto ab saepe aspernatur est temporibus?

This is another paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus quaerat, quasi laboriosam nihil hic omnis facere in modi minus vero at. Est natus accusantium sapiente autem? Qui ea nulla autem fuga magni ut enim doloribus corrupti cumque. Consequuntur iure repellat, inventore sit minima, aliquid fugiat commodi consequatur sed est numquam.

12 Column Grid System

1

½

½

⅓

⅓

⅓

⅓

⅔

¼

¼

¼

¼

¼

¾

⅓ centered

½ centered

⅔ centered

Buttons

Default Button Light Button

Custom Type Blocks

This is an Eyebrow

Bespoke Headline

This is a Bespoke SubHeadline

This is a default body paragraph. This is a link. This is bold text. This is italic text. Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus molestias illum hic sequi illo architecto ab saepe aspernatur est temporibus?