Folder Structure

base/
├── index.html
├── css/
│   ├── style.css
└── js/
    ├── scripts.js
    

Starter Template

HTML

Mobile ready with links to external CSS and JS files.

CSS

CSS Table of Contents:

SCSS

Modular SASS partials compiled into one style.css file.

SASS File Structure:

base/
├── css/
│   ├── style.css
└── scss/
    ├── style.scss
    ├── _variables.scss
    ├── _base.scss
    ├── partials/
        ├── _toc-base.scss
        ├── _typography.scss
        ├── _media.scss
        ├── _components.scss
        ├── _layout.scss
        ├── _structure.scss
        ├── _site-navigation.scss
        ├── _site-navigation-togglenav.scss
        ├── _forms.scss
        ├── _animation-pageload-fadein.scss
    

JS

Vanilla Javascript inside of one script.js file.

JQuery Ready

Jquery can easily be used as an alternative to vanilla JS if preferred, but because SiteBase was designed to be a minimal, lightweight starter framework for small, custom web site projects, it is not included as part of the default build.

If you choose to use Jquery, you will either need to download it and add it manually, or you can use the cdn:

                
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Typography

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut fringilla ipsum, sed bibendum augue. Nullam euismod nec mauris elementum porta. Sed varius nisl eu lobortis fringilla. Morbi id elit sollicitudin, venenatis lacus id, cursus quam. Aliquam mollis orci vel enim fermentum adipiscing. Duis facilisis lorem a nulla porttitor sagittis.

Suspendisse pulvinar bibendum laoreet. Suspendisse eget dignissim risus. Cras eget sodales enim. Phasellus accumsan dui metus, quis vulputate turpis congue at. Praesent rutrum consequat rhoncus. Maecenas adipiscing justo vitae massa porta pretium. In egestas orci vehicula, tempus lorem ut, facilisis metus.

Vivamus eu mollis velit. Maecenas id massa libero. Aliquam accumsan mauris vulputate purus volutpat vestibulum. Phasellus sed tellus id tortor ornare molestie. Quisque massa sapien, elementum sed tortor vitae, suscipit congue massa. Curabitur tempor arcu eget leo placerat, a porta augue pharetra. Nulla velit nibh, laoreet at hendrerit sit amet, adipiscing eget dolor.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis ut fringilla ipsum, sed bibendum augue.</p>

Unordered List:

• List Item
• List Item
• Nested Unordered List:
  • List Item
  • List Item
• Nested Ordered List:
  1. List Item
  2. List Item
• List Item
• List Item

<ul>
    <li>List Item<li/>
    <li>List Item<li/>
</ul>

Ordered List:

1. List Item
2. List Item
3. Nested Unordered List:
   • List Item
   • List Item
4. Nested Ordered List:
   1. List Item
   2. List Item
5. List Item
6. List Item

<ol>
    <li>List Item<li/>
    <li>List Item<li/>
</ol>

Links:

This is a link.

<a href="#">link</a>

Blockquotes:

This is a blockquote. Donec sed rhoncus massa. Suspendisse rutrum viverra felis. Vestibulum augue lacus, ullamcorper non suscipit nec, ornare et mauris. Proin mattis fermentum nibh quis gravida.

Citation Source

<blockquote>
    <p>This is a blockquote. Donec sed rhoncus massa. Suspendisse 
    rutrum viverra felis. Vestibulum augue lacus, ullamcorper non 
    suscipit nec, ornare et mauris. Proin mattis.</p>
    <cite>Citation Source</cite>
</blockquote>

Helpers:

This is center-aligned text

<p class="text-centered">This is center-aligned text</p>

Media

This is a responsive image:

img {
    max-width: 100%;
    height: auto;
}

<img src="path/to/image.jpg" alt="placeholder" width="" height="">

UI Components

Buttons:

<a href="#" class="button">Default Link Button</a>
<a href="#" class="button alt">Alt Link Button</a>
<button>Default Button Element</button>

Site Structure

Header, Main Content Area, & Footer

The base site structure consists of three main parts of a web page: the header, main, and footer.

<body>

    <header class="site-header">
    </header>

    <main class="site-main">
    </main>

    <footer class="site-footer">
    </footer>

</body>

Page Sections

The main content area of all pages can be divided into multiple sections that can be placed either within a container (to constrain the content width) or outside of a container (to extend to the full-width of the browser). This base also includes default styling for a "hero" section.

<main class="site-main">

    <section class="hero">
        <div class="container">
            HERO SECTION CONTENT
        </div>
    </section>
    
    <div class="container">
        <section>
            SECTION CONTENT
        </section>
        <section>
            SECTION CONTENT
        </section>
    </div>
    
</main>

Site Navigation

This base consists of two default site navigation areas: main/top nav (header) and bottom nav (footer), both using a "site-navigation" class.

<nav class="site-navigation">
    <ul class="nav">
        <li><a href="#">Nav Item</a></li>
        <li><a href="#">Nav Item</a></li>
        <li><a href="#">Nav Item</a></li>
    </ul>
</nav>

Mobile Menu

For small screens, this base uses a toggle-nav using a navicon as a menu button. Javascript is used to toggle the menu on/off by changing the value of a data-attribute. CSS is then used to control the appearance of the menu.

Mobile menu HTML:

<nav class="site-navigation">
    <button class="menu-button navicon">Menu</button>
    <ul class="nav">
        <li><a href="#">Nav Item</a></li>
        <li><a href="#">Nav Item</a></li>
        <li><a href="#">Nav Item</a></li>
    </ul>
</nav>

Mobile menu Javascript:

  //TOGGLE MENU NAV VIA ADDING/REMOVING A DATA-ATTRIBUTE
  const menubutton = document.querySelector('.menu-button');
  const menunav = document.querySelector('.toggle-nav'); 
  menubutton.addEventListener('click', function() {
    if (menunav.getAttribute('data-navstate') === 'open') {
        menunav.setAttribute('data-navstate', 'closed');
    } else {
        menunav.setAttribute('data-navstate', 'open');
    }
  });