Webdev basics

Intro

Cradle is a server-side rendered (SSR) or server-side generated (SSG) website and ecommerce software. This means that the system uses the server to do the rendering and serves the website as a multipage application (MPA) by default. In Cradle CMS Liquid is the templating language for adding in dynamic content and logic.

As the system also can output objects in JSON-format it is possible to create websites as a single-page applicaion (SPA) or in a hybrid approach.

Progressive enhancement is a good strategy to utelize as it is the easist way to create accessible, failproof and performant solutions. It puts emphasis on web content and HTML first, continues with CSS for styles and layout and in a final step functionality is added with JS. The strategy creates robust websites and focuses with getting the most important parts right first.

Techniques

Language	Description	Example
HTML	Hyper text markup language - the basis of the page which holds the content	`<div>`, `<p>` and `<header>`
CSS	Cascading Style Sheet - dictates the layout and styles	`color: red;`, `display: grid;` and `height: 100%;`
JS	JavaScript - adds in the functionality
Liquid	Templating language used in Cradle software
JSON	Lightweight format for data

HTML - the basis

The HTML elements are of different types that will have default behaviours, examples of different types: sectional blocks, content or inline elements.

Reference: HTML element reference - Mdn web docs

Semantic markup

It is advisable to use semantic markup whenever possible, in short this means to use html-elements that describe the use, for example using an <article> element instead of a <div> element. Examples of commonly used html elements for creating semantic markup:

 <article>, <aside>, <figcaption>, <figure>, <footer>, <header>, <main>, <nav>, <section> and <time>

Layout with sectional blocks

Sectional HTML blocks creates sections of the page to place content in and by using HTML elements with semantical meaning, such as, <header>, <nav> and <aside>, machines will have an easier time to understand the structure and content of the site.

A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times.

Mdn, "HTML: A good basis for accessibility"

Blocks layout for an article page — Semantic markup for an article.

Example of main layout

Example of a barebone main layout-file, theme.liquid, for a site using Cradle CMS.

More themes can be found on the Github page for Cradle CMS.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>
            {{ site.name }} {% if meta.title != blank and meta.title != site.name %} | {{meta.title}}{% endif %}
        </title>    
        <meta name="description" content="{{ metaDescription | escape }}" />
        <meta name="keywords" content="{{ metaKeywords | escape }}" />
        <link rel="canonical" href="{{ canonicalUrl }}" />
        <link rel="stylesheet" type="text/css" href="{{ 'site.css.liquid' | asset_url }}"
    </head>
    <body id="{{ meta.title | handle }}" class="template-{{ template | replace: '.', ' ' | split: ' ' | first | handle }}">
        <header>
            <h1>{{ site.name }}</h1>
        </header>
        <main>
            {{ contentForLayout }}
        </main>
        <footer>
            <p>Copyright © {{ site.name }}</p>
        </footer>
    </body>
</html>

A way to check how the markup works for someone with a screen reader, without using a screen reader, is to use terminal browser Lynx.

Inline elements

Inline elements are HTML elements used in the flow of text, such as for a link, bold or italics. These elements have the default display type inline.

These elements are commonly added by the body text editor, such as a RTE (rich rext editor) or Markdown editor.

Element attributes

Most commonly used are classnames and ids.

CSS - styles and layout

Today modern CSS and HTML handles much of the functionality for website behaviour, layout and styling.

It is important to keep track of how well specific CSS and HTML features are supported by different browsers, Can I use? provides browser support tables.

Styles are usually gathered in a CSS-file, but can also be included in the HTML document within <style> tags or in the element with as an attribute. Commonly styles are added for an HTML element type, id or classname.

CSS frameworks

To start off with an initial styling It is common practise to include a CSS-framework to a webproject. They come in different flavours, spanning from classless and only styling the HTML-markup, to include a gridsystem and classes for components of websites or completely class-based for each CSS-rule.

Examples of CSS-frameworks

ok.css - classless framework styling HTML-markup
BeerCSS - combines styling on HTML-markup and attributes with classes
Tailwind - class-based for CSS-rules
DaisyUI - builds ontop of Tailwind adding themes and classes for components

Important to note is that both Tailwind and daisyUI requires a buildstep to produce the final output for the CSS, the themes for Cradle built with these frameworks contains a developer mode as well as a make file to make it easier to generate the final CSS.

Display types

All HTML elements will have a default display type for the flow layout and the layout of the children. But the display type, and thus the flow of the element, can be changed.

Example with display types

The following HTML, a section with five divs, has default display type of block. Changing the display type to flex or grid will change the layout.

<section class="box">
    <div class="small-box" style="background-color: #c05780;"><p>1st</p></div>
    <div class="small-box" style="background-color: #ff828b;"><p>2nd</p></div>
    <div class="small-box" style="background-color: #e7c582;"><p>3rd</p></div>
    <div class="small-box" style="background-color: #00b0ba;"><p>4th</p></div>
    <div class="small-box" style="background-color: #0065a2;"><p>5th</p></div>
</section>

display: block; /* default */

display: flex;

display: grid;

Flexbox resources

A display type set to flex enables a lot of possibilities but can at the same time be a bit confusing, the following resources can provide help:

Placing content horizontally and vertically

With display types flex and grid the content bahaviour is styled along x- and y-axes with justify-content/items/self and align-content/items/self, and in the case of display type flex it is also dependent of the flex-direction.

Property values for align-content and justify-content
start, end, center, space-evenly, space-around, space-between, strech

Horizonally placing content

Display type	Axis name	Property	Example
Grid	Inline / Row axis	justify-content	`justify-content: start;`
Flex-row	Main axis	justify-content	`justify-content: start;`
Flex-column	Cross axis	align-content	`align-content: start;`

Verically placing content

Display type	Axis name	Property	Example
Grid	Block / Column axis	align-content	`align-content: start;`
Flex-row	Cross axis	align-content	`align-content: start;`
Flex-column	Main axis	justify-content	`justify-content: start;`

Horizontally placing content in `display: grid;`

With set width and height on the children

display: grid; 
grid-template-columns: 100px 100px 100px;
grid-auto-rows: 100px;
justify-content: start /*example*/;
align-content: center;

justify-content: start;

justify-content: center;

justify-content: space-evenly;

justify-content: space-between;

Responsive grid with `display: grid;`

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  grid-auto-rows: 50px; /* only needed if the grid items lacks height */
  gap: 1rem; /* usually we want a gap between the grid items */
}

JS - for functionality

Typical functionality that requires javascript:

AJAX-cart
Image slider

Website tests

PageSpeed Insights from Google
WebPageTest from Catchpoint

References

Can I use? - Browser support tables
Mdn webdeveloper guides - One of the most comprehesive and best guides on webstandards
Codepen - Online community for displaying code snippets for web development.