Scott's Stylesheets

The framework is divided into 5 CSS files and 1 JavaScript file (see sidebar).

Variables

The variables.css file initialises variables and values for the framework; this includes colours for the theme. The base colours are black, white and a chosen colour. For the sake of this demo, you can see the chosen colour changing in real-time. This implementation simplifies adding themes such as dark mode (click toggle dark mode to see effect).

Colour Scheme

I use a simple black and white colour scheme with a primary user-defined theme colour set via the --col-theme-hue property located on the :root element. You can see the hue property increment by the second.

Colour	Property	Background Class	Color Class	Value
Black (Constant)	`--col-const-black`	`.bg-const-black`	`.text-const-black`	#111
White (Constant)	`--col-const-white`	`.bg-const-white`	`.text-const-white`	#FFF
Black	`--col-black`	`.bg-black`	`.text-black`	#111
White	`--col-white`	`.bg-white`	`.text-white`	#FFF
Theme (Light)	`--col-theme-light`	`.bg-theme-light`	`.text-theme-light`	n, 75%, 55%
Theme	`--col-theme`	`.bg-theme`	`.text-theme`	n, 70%, 50%
Theme (Dark)	`--col-theme-dark`	`.bg-theme-dark`	`.text-theme-dark`	n, 65%, 45%

Layout

The layout.css file determines the position of elements.

Side Nav

The side-nav element .

Content

The content.css file determines how elements cascade (i.e. padding, margin), not their layout or position.

Quotes

Blockquote

The blockquote element is for block quotes like so:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Q

The q or quote element is for inline quotes like so: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.

Images

Go To Image Functions

The image element.

Forms

Fieldset Legend

Checkbox

Checkbox (disabled)

Checkbox (readonly)

Colour

Date

Datetime Local

File

List

Month

Number

Password

Radio:

Radio A Radio B

Range

Telephone

+(44)

Text

Time

URL

Week

Textarea with floating-label

Select

Select (multiple)

Lists

Lettered list:

List item
Another item

Ordered list:

List item
Another item

Unordered list:

List item
Another item

Tables

Table caption
Table Head	Table Head	Table Head
Table Data
Table Foot

Classes

The classes.css file contain classes to affect elements appearance.

Alignment

You can align text.

This text is aligned left via .text-start.

This text is aligned middle via .text-middle.

This text is aligned right via .text-end.

This text is justified via .text-justify so we need some filler to reach the end of the line to text-wrap.

Box

Sunt in culpa qui officia deserunt mollit anim id est laborum. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Line Clamp

.line-clamp-<n>

You can line clamp text with .line-clamp. The text will append an ellipsis if it overflows. The class itself is set to 3 lines by default, however, you can set the number of lines to clamp with .line-clamp-n, where n is equal to the number of lines to clamp.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Row

The .row uses display: flexbox; to position children elements. Rather than use the margin property to seperate elements, the gap property is utilised.

col-12

col-10

col-2

col-8

col-4

col-6

Text Case

The .text-capitalise class transforms text into capitalised case like so: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

The .text-lowercase class transforms text into lowercase like so: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

The .text-uppercase class transforms text into uppercase like so: Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Custom

The custom.css file is used to override rules and add themes. In fact, you can apply themes to components like the code block below.


        var x = 1;
        var x = 1;
        const y = 2;
        let z = 3;
        JavaScript

Functions

The functions.js file contains all JavaScript functions for this framework.

Console

The console functions are shorthands to remove console. notation required to log.

Log

log() is short for console.log().

Table

table() is short for console.table().

Warn

warn() is short for console.warn().

Warn

error() is short for console.error().

Cookies

Default Cookie

defaultCookie(cookieName, cookieDefaultValue) checks if a cookie is set, if not, the function sets the cookie and value. The purpose of this function is to not override a set cookie, but to always have a cookie set.

Get Cookies

getCookies() returns all cookies as an string.

Get Cookies Split

getCookiesSplit() returns all cookies as an array.

Log Cookies

logCookies() prints all cookies in the console.

Get Cookie

getCookie(cookieName) returns a cookie as a string.

Get Cookie Split

getCookieSplit(cookieName) splits a cookie and returns it as an array.

Set Cookie

setCookie(cookieName, cookieValue) sets - or if isset updates - a cookie and value.

Isset Cookie

issetCookie(cookieName) returns a Boolean, true if a cookie is set or false if not.

Log Cookie

logCookie(cookieName) prints a cookie in the console.

Get Cookie Value

getCookieValue(cookieName) returns a cookie value as a string.

Log Cookie Value

logCookieValue(cookieName) prints a cookie value in the console.

Images

Set Image Intrinsic Width

setImgIntrinsicWidth(id).

This function serves SEO. It sets the selected img maxium width to its intrinsic width.

Set All Image Intrinsic Width

setAllImgIntrinsicWidth().

This function applies the above function to all img elements.