Contents

Definitions(README)Component documentationLayout documentationThemesUpdatesMobile Support

Using skybord.xyz css

The design is very human, very easy to use

Have you ever for some reason wanted to use the ✨amazing✨ stylesheets from this website in your own projects? No problem! This post is a full documentation on how it works and how you can use it and blah blah blah blah

I use this stylesheet literally everywhere and at times I may make changes. If you want to change something make a PR and use the source mentioned below as the single source of truth.

Definitions(README)

The CSS for this website specifically has two parts:

  • Component Styles: Styles for components e.g Cards and Buttons found at the Test Page.
  • Everything else: Navbar, Content, Content Header, Content Body, and everything else thats not mentioned above or before.

They are available in this directory as components-style.css and style.css.

Component documentation

Check out the Test Page for now. Just use inspect elements to check what classes etc they have

Layout documentation

You can again just inspect element this website, or look at the simple example shown below for reference.

There are specific rules about headings in content header and body but i forgot

<div class=navbar></div> <!-- The entire navbar -->
<div class="side-contents"></div> <!-- Shows up next to contents,
          if this is present the positioning of contents will change automatically -->
<div class=content><!-- The thing in the middle -->
    <div class="content-header"></div> <!-- Content header -->
    <div class="content-content"></div> <!-- Content body -->
</div>
<div class="footer is-center"> <!-- Static footer --> </div>

My content isn't taking up the screen!

If you put the above code as is into a document with skybord.css set up, you will realise that the content will not take the rest of the page if it is empty. You will have to either make sure the content is longer than the page or do some maths and put down a set height.

Themes

On the top of your everything else styles is a definition of colours used with the css. If you hate skybord.css's black and white you can change it to anything else, for example add a little blue to your background or a little red to your foreground.
Beautiful Theme
Does this terrify you?

Below are a list of all the variables and what they affect.

Name Desc
Background Primary The darkest back background of the page.
Background Secondary The middle background for contents, for example the contents of a post.
Background Tertiary The lightest background for interactive components(buttons etc) and for the content header.
Foreground Primary Texts, titles, everything
Foreground Secondary Secondary texts where necessary
Foreground Border Borders
Colour properties I forgot what they are used for but practically useless

Updates

This stylesheet definitely will have updates and changes depending on my mood, sometimes even an overhaul. Again, using the version from this repo for better accuracy.

Mobile Support

The top navbar right-side contents will DISAPPEAR on mobile! This is because this guide only covers the css and includes no scripting. Please be sure to include your own mobile implementation.

Apart from the above, skybord.xyz css has out of the box mobile support, which you probably can tell if reading on mobile.

If using the sidebar, it will instead appear at the top of the page on a small enough screen, similar to Github's.