sta.css : basics

Basics

This page shows the basic uses of this framework. If you want a more detailed explanation of each class, take a look at the wiki.

Here are the basic CSS classes found in this framework.

Body: Centers elements on page, sets font, and sets background.
Nav: The nav bar holds all of the relevant links at the top of the page.
Width: Controls the max-width of given elements.
Boxes: Basic containers with internal padding that can be used for text and media.
Media: Full width borderless containers for images, videos, and iframes.
Code: Display code easily.
Buttons: Button styles can be applied to links or buttons.
Footer: The footer holds crediting and contact info at the bottom of the page.

Body

The .body class controls the background(color and image), centers child elements, and controls the default font and text color. This entire page is an example of the .body class.

Code

<body class="body">
  ...
</body>

Nav

The .nav class allows you to create nav bars on the page. The links are automatically spaced away from each other and the #current-page id allows you to bold the current page. Links are underlined when hovered over. It shares the same background as the .footer class.

Example

Code

<nav class="nav">
    <a href="#example-url">Page 1</a>
    <a id="current-page" href="#example-url">Page 2</a>
    <a href="#example-url">Page 3</a>
    <a href="#example-url">Page 4</a>
</nav>

Width

Almost anything can be sized using the max-width properties but they are most frequently used with the classes .box and .media. There are six default sizes that go from smallest to largest: .w0 .w1 .w2 .w3 .w4 .w5. Additionally, there is the .wfull class which sets the max-width to 100%.

Example

.w1

.w3

.w5

Code

<div class="box w1">
    <h3> .w1 </h3>
</div>
<div class="box w3">
    <h3> .w3 </h3>
</div>
<div class="box w5">
    <h3> .w5 </h3>
</div>

Boxes

Boxes are basic containers with internal padding that can be used for text and media. There are two main types of classes: .box and .box.clear. All boxes have <h1> and <h2> tags automatically centered. Child .box and .media classes automatically have a max-width of 100%.

Example

.box.clear

Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.

.box

Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.

.box > .box

Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.

Code

<div class="box clear w2">
    <h3> .box.clear </h3>
    Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.
</div>

<div class="box w2">
    <h3> .box </h3>
    Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.
    <div class="box">
        <h3> .box > .box </h3>
        Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.
    </div>
</div>

Media

The .media class styles a borderless media container. It is built to be used with the <img>, <video>, and <iframe> tags.

Example

Code

<img class="media w2" src="https://picsum.photos/700/100"/>
<br>
<iframe class="media w2" width="480" height="360" src="https://www.youtube.com/embed/J---aiyznGQ?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Code

The .code class allows you to style bits of code. It is applied automatically to all <code> tags that are inside a container that uses the .box class. Additionally, there are custom .box.code containers for multiple lines of code that are best built with the <pre> tag.

Example

Lorem consectetur elit.

Etiam nibh enim, luctus ac faucibus sit amet, molestie nec ex.

Mauris commodo tincidunt vestibulum. Morbi faucibus vulputate mollis. Duis sed dui condimentum lacus ultrices porta in eget est.

Code

Lorem <span class="code">consectetur</span> elit.
<div class="box w2">
   Etiam nibh enim, luctus ac <code>faucibus</code> sit amet, molestie nec ex.
   <pre class="box code">
Mauris commodo tincidunt vestibulum. Morbi faucibus vulputate mollis. Duis sed dui condimentum lacus ultrices porta in eget est.</pre>
</div>

Buttons

The main button is created using the .btn class. There are four default hover effects: .btn.dark, .btn.light, .btn.border, and .btn.lines. Each of these can be seen below. Anything that is clickable can be styled to look like a button.

Example

.btn .btn.dark .btn.light .btn.border .btn.lines

Code

<div class="box w1">
    <span class="btn">.btn</span>
    <span class="btn dark">.btn.dark</span>
    <span class="btn light">.btn.light</span>
    <span class="btn border">.btn.border</span>
    <span class="btn lines">.btn.lines</span>
</div>

Footer

The .footer class creates a footer for the page and its background and width match those found in the .body class. This space is used for crediting and branding.

Example

Code

<footer class="footer">
    Year&copy; Last Name<br> Find more of my work on Github.
</footer>