SiteBase / Get Started

Description:

Set up your local development environment by creating a basic folder structure and file system containing only the core essential code required for a bare-bones, no content starter setup suitable for any project.

1. Create a "base-blank" root folder
2. Create "css" and "js" sub folders
3. Add an index.html file
   • Add starter markup
4. Link to a style.css file
   • Add starter css table of contents
5. Link to a script.js file

Download Zip View Source

Screenshot:

View Demo View Video Lesson

Note: You might notice some differences between the markup shown within the video lesson and the markup provided within the source code. These are changes that have been made in the years safter the video lesson was recorded.

Some notable updates/changes:

• For self-closing elements (e.g. meta tags), you no longer need to have an empty space and a closing forward slash. This is a relatively new recommendation.

Description:

If "Content is King" then Typography is the Queen, so a good way to start designing coding content is to set your type. Define your base-level typographic style settings and associated rules (e.g. your default body font size and leading, heading sizes using a typographic scale, etc). Next, define base-level styles for commonly used content, such as images (e.g. responsive images), along with core essential UI components (e.g. buttons) .

1. Duplicate your "base-blank" folder and rename it to "base-content"
2. Delete your "js" folder and link to it (we will add it back later)
3. Add base content markup to your index.html file and base content styles to your style.css file:
   • Base Typography
     • Body, Headings, Paragraphs, Links, Lists, Blockquotes, & Helpers
   • Base Media
     • Images
   • Base Components
     • Buttons

Download Zip View Source

Note: You might notice some additional css that may not be represented within the markup or addressed within the video lesson, such as horizontal rules (hr) and various helper classes. These exist within the SiteBase core and while they may not required for all projects, they are included here as an example for how one could choose to extend and customize SiteBase.

Note: You might also notice some differences between the markup shown within the video lesson and the markup provided within the source code. These are changes that have been made in the years safter the video lesson was recorded.

Some notable content-related updates/changes:

• For all inline images (img tags) it is now recommended that you also include width="" and height="" attributes. This helps to eliminate Cumulative Layout Shift (CLS).

Screenshot:

View Demo View Video Lesson

Description:

Make your base responsive by setting up media queries targeting different screen sizes and use a simple grid for the layout of your content.

1. Duplicate your "base-content" folder and rename it to "base-layout"
2. Remove all content from index.html and add "demo" grid markup
3. Add a simple reset, media queries, and a simple grid to your style.css file
   • Simple Reset (set all elements to box-sizing: border-box and remove your default body margins)
   • Media Queries (with body font-size settings and a "container" with a fixed width for large screens and fluid for small screens)
   • Custom Grid (multiple columns for large screens, stacked columns for small screens)

Download Zip View Source

Screenshot:

View Demo View Video Lesson

Description:

Use semantic HTML5 elements to set up a common site structure including a site header, footer, navigation, and main content area.

1. Duplicate your "base-layout" folder and rename it to "base-site"
2. Remove all content from index.html and add base structural site markup:
   • Header, Footer, Navigation, Main Content Areas (e.g. Hero Section, 3-Column placeholder content)
3. Add base structural site styling your style.css file
   • Base Site Structure
     • Header, Logo, Footer, Sections
   • Base Navigation
     • Header Nav, Footer Nav

Download Zip View Source

Screenshot:

View Demo View Video Lesson

Description:

Use Javascript to make a a simple toggle-style main navigation for small screen sizes.

1. Add back a "js" folder and script.js file
2. Add a "menu" element to your main navigation.
3. Add a custom JavaScript function that will change the value of a custom data-attribute from "open" to "closed" to open and close the main navigation on smaller screens.
4. Style the menu to look like a three-bar navicon.

Download Zip View Source

UPDATE: In 2022, the markup for the menu-button was updated from a div to a button element. To implement this, a few new lines of css were added to .menu-button: a reset of the border (border: none;) and the back-ground-color (background-color: transparent;). FYI.

UPDATE: In 2021, the JavaScript toggle-nav function was re-written to change the value of a data-attribute instead of toggling a class. Most of the examples provided have been updated with this new approach, but as a heads up: you might come across links to older examples that used a class toggling system. FYI.

Screenshot:

View Demo View Video Lesson

Description:

Create sub pages that are well suited for specific content, such as an about or post page with long form content (e.g. articles for reading) or a traditional two-column sub page with a main content area and sidebar with a sub nav. Other sub page examples include a contact page with a simple contact form, a post/product/image listing page, and a product/feature detail page.

1. Update the index.html page site navigation to link to the following example sub pages;
   • about.html, contact.html (optional: products.html, product-detail.html)
2. Copy/paste the index.html page and to create each of the above example sub pages
3. Potential new features/components to consider when adding sub pages and sub page content:
   • Articles, forms, inline page anchors, responsive grids for lists and thumbnail images, and popular design patterns and UI components such as modal tabs, overlays, carousels, and accordians/collapsible panels.

Download Zip View Source

Screenshot:

About Pg Demo Contact Pg Demo Sub Pg w/ Sidebar Demo About Pg. Video Lesson Contact Pg. Video Lesson

Description:

Create a single page web site with multiple sub sections that can be accessed either via the inline page anchors in the site navigation or by scrolling the long, vertical layout of the page.

1. Working with one main index.html file, update the site navigation to link to page anchors (ID's) for each of the main sub sections (e.g. a href="#section1" or href="#about")
2. Add ID's to all main sub sections (e.g. section id="section1" or id="about")
3. Once the page anchors are tested and working, use javascript to add animation
   • add this scroll.js file to your js folder, or use the original anchor-scroll js code from Benjamin De Cock
   • add a link to scroll.min.js file at the bottom of your html file
   • add a class="scroll" to each link that will utilize scroll.js

Download Zip View Source

Screenshot:

View Demo View Single Page Site Video Lesson

Description:

In this lesson, we will convert SiteBase Static into Sitebase Sassy by working backwards, starting with the static css stylesheet and converting the single-file CSS system into an organized multi-file SASS system.

1. Setup a local front-end web development environment to compile SASS. In this step, we  will use a Prepros, a GUI-based front-end compiler. In another lesson, we will use Gulp.
2. Establish a custom organizational file system using SASS partials that embraces best practices and strategies from popular CSS methodologies (e.g. SMACSS).
3. Convert the CSS to SASS by reverse engineering the original, singular CSS file and separating it into a modular system of multiple SASS partial files. The new SCSS files will embrace SASS features to improve the coding experience, such as variables and nesting.

Download Zip

Screenshot:

View Demo Related Lesson