Skip to content
This repository has been archived by the owner on Oct 16, 2023. It is now read-only.

Using chordcss

Jump to bottom
werdl edited this page Jan 20, 2023 · 40 revisions

chordcss

Sounds great - how do I start?

Well - we made some example webpages written in chordcss, and also a tutorial!

To find the code used in this tutorial, go to this page.

Prerequisites to using chordcss

  • A basic understanding of vanilla CSS and HTML, if you're new to webdev try w3schools, their tutorials are great!
  • Installation on your website, if you haven't done so already check out this tutorial
  • An appetite to get coding your soon-to-be awesome website!

Let's get going!

Step 1 - inserting a body class

  • With chordcss, we provide a number of solutions for the base website theme, because dark mode is also a valid choice.
  • Also we have built-in light/dark mode depending on browser preference.
  • So now, pick a theme from our below options:
c-bg-auto-monochrome
  • Pure black text
  • Pure white background
  • Variant on browser theme
c-bg-auto
  • Pure black text
  • A tastefully cream background
  • Variant on browser theme
c-bg-black
  • Pure white text
  • Pure black background
c-bg-light
  • Pure black text
  • A nice, warm background
c-bg-white
  • Pure black text
  • Pure white background

Step 2 - Colours

  • chordcss has many colours on offer - each major colour has at least 3 and normally five different colour variants
  • We store these hexadecimal values in the :root{} css element
  • To add them to your code, you'll need some client-side CSS
  • First add a <style> element.
  • In this you want to put the name of the colour you want to use - say dark orange.
  • We have a list of basic color codes

Color codes

  • r for red
  • g for green
  • y for yellow
  • b for blue
  • bl for monochrome
  • pu for purple
  • or for orange
  • and a set of lg values: lg-10, lg-25, lg-50, lg-75 and lg-100
Each colour has a light and dark variant, for example dr is darkred, lor is lightorange etc.

Adding the colours to your code

  • So in your <style> element, you'll want to create a new CSS tag
  • Remember, all variables are prefixed by --c-
  • Say if we wanted to make this <a href="#" id="link">chordcss is awesome!</a> blue
  • We would put this into our <style> element:
#link {
color: var(--c-b);
}
  • Now play around with the colours a bit, add some content to your webpage.
  • Here's some stuff I made earlier:
<html lang="en">
<head>
    <style>
#link {
    color: var(--c-b);
}
#h1
{
    color: var(--c-dor)
}
#hi
{
    color: var(--c-lpu)
}
    </style>
    <link rel="stylesheet" href="https://getchord.ml/main.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chordcss Example 1</title>
</head>
<body class="c-bg-b">
    <h1 id="h1">Hello World!</h1>
    <a href="#" id="link">chordcss is awesome!</a>
    <h3 id="hi">Hi!</h3>
</body>
</html>

Step 3 - Icons!

  • chordcss has a built-in icon framework.
  • The icons are partly designed by our deisgner friends and partly found on other GitHub projects.
  • Below is a list of icon classes:

List of icons

  • ci-house
  • ci-github
  • ci-file
  • ci-lock
  • ci-css3
  • ci-html5
  • ci-img

Using icons on your website

  • The first step is to install the framework in the usual way, here the dev version has the best icons support, as the new icons are always seen here first!
  • Then you can use a html element to invoke them
  • I recommend the i class for consitency across websites, but its up to you really.
  • Then add a class, and watch in wonder as the css does the rest!
  • Example:
<i class="ci-github"></i>
  • The ci stands for chord icons

Behind the scenes - icons

  • Our icons are made in Inkscape or on GitHub in SVG format, then turned into a font using FontForge.
  • We then add them in through @fontface
  • And we use the ::before pseudo-element to add in content and some pre-built font settings
  • We use the .otf file type to store our fonts, in /fonts

Step 4 - Navbar

  • chordcss has great navbar support
  • It's pretty much just a case of chuckng in a class!

Add Your Navbar

  • Add some navbar code
<link rel="stylesheet" href="https://getchord.ml/main.css">
<div class="c-nav">
<a href="#">Hello</a>
<a href="#">World</a>
</div>
  • Basically we just made our navbar div have the class c-nav
  • Pretty easy right!
  • This creates a basic and yet customisable navbar.
  • You can add background colors and the like in your CSS.
  • Check out the getchord.ml page for a navbar example.

Step 5 - Headings

  • Give our page some responsive headings!
  • To make a header width-responsive, use classes c-h1w, c-h2w etc.
  • And to make it height-responsive, use c-h1h, c-h2h etc.
  • Examples:
<div class="c-h3h">Hello World</div>
  • The above code makes 'Hello World' a h3 based on height
<div class="c-h5w">Hi Mum!</div>
  • The above code shows Hi Mum! in a h5 based on width

This tutorial's source code is here: this page.

© 2023 GoneRogue under the GNU-GPL License.

Clone this wiki locally