Getting started

Introduction

The whole component set is build on the astrojs framework. Thus, you can only use it in combination with astrojs. A dedicated css and js file collection is already "under construction", but it gonna take a while, since the code is currently optimized for astrojs and not for a vanilla web environment.
At this page you're gonna see how you can install the component set and learn a bit about some basic principles guiding you through this set.

Installation

First of all, there's no real installation process. It's more or less a put-in-place process for the required files. So here's the step-by-step guide:

  1. Install astrojs and create a new project without a theme (Guide)
  2. Go to the GitHub repository and download the wfo directory with the astro components inside from the main branch
  3. Place the unpacked wfo directory somewhere in the src directory of your astro project

But wait, there is more. You also must set up a globally applied css file, with the following content. Modifications on this are described further down the page.

/*General settings*/
body {
margin: 0;
padding: 0;
font-family: Inter, Calibri, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;

--font-size: 16px;

font-size: var(--font-size);
color: var(--text);
background-color: var(--background);
}

/*Light mode*/
@media (prefers-color-scheme: light) {
:root {
--text: #000000;
--background: #f4f4f4;
--nav-background: #f4f4f4;
--footer-background: rgba(16, 16, 16, 0.1);
--primary: #6f18a5;
--secondary: #c3c3c3;
--accent: #4274d0;
}
}
/*Dark mode*/
@media (prefers-color-scheme: dark) {
:root {
--text: #efefef;
--background: #000000;
--nav-background: #000000;
--footer-background: rgb(16, 16, 16);
--primary: #9e46e4;
--secondary: #5c5c5c;
--accent: #3976df;
}
}

::-moz-selection {
background-color: var(--secondary);
color: var(--text);
}
::selection {
background-color: var(--secondary);
color: var(--text);
}

/*Helper classes*/
.sticky {
position: sticky;
}
.highlight {
background: linear-gradient(120deg, var(--primary), var(--accent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.stand-out {
font-size: 5em;
margin: 0;
padding: 0;
}
.standard-padding {
padding-left: 15%;
padding-right: 15%;
}
.standard-margin {
margin-left: 15%;
margin-right: 15%;
}
.slim-padding {
padding-left: 40px;
padding-right: 40px;
}
.slim-margin {
margin-left: 40px;
margin-right: 40px;
}
@media screen and (max-width: 810px) {
.standard-padding, .slim-padding {
padding-left: 20px;
padding-right: 20px;
}
.standard-margin, .slim-margin {
margin-left: 20px;
margin-right: 20px;
}
}

.fade-in {
opacity: 0;
transform: translateY(0.25em);
transition: opacity 0.75s ease, transform 0.75s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0em);
transition: opacity 1.5s ease, transform 0.75s ease;
}

/*Basic formatting*/
img {
max-width: 100%;
border-radius: 16px;
}
a {
color: var(--accent);
}
.format h1 {
margin: 4rem 0 1.875rem 0;
}
.format h2 {
margin: 3rem 0 1rem 0;
}
.format h3 {
margin: 1.5rem 0 0.5rem 0;
}
.format h4 {
margin: 1rem 0 0.5rem 0;
}
.format p {
margin: 0.5rem 0;
text-align: start;
opacity: 0.8;
line-height: 1.6;
max-width: 80ch;
}
.format ul {
margin: 0.5rem 0 0.24rem 0;
padding-left: 32px;
opacity: 0.8;
line-height: 1.6;
max-width: 80ch;
} .format ol {
margin: 0.5rem 0 0.25rem 0;
padding-left: 32px;
opacity: 0.8;
line-height: 1.6;
max-width: 80ch;
}

Aside form this, there's also a globally applied js file you should add to complete the component set. Here's the code:

class wfo {
static Scroll(element) {
document.querySelector(element).scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

static CheckboxChecked(checkbox) {
return document.querySelector(checkbox).checked;
}

static scrollWatcher() {
const elements = document.querySelectorAll('.fade-in');

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const rect = entry.boundingClientRect;
if (!entry.isIntersecting && (rect.bottom > window.innerHeight) && entry.target.classList.contains('visible')) {
entry.target.classList.remove('visible');
} else if (entry.isIntersecting && !entry.target.classList.contains('visible')) {
entry.target.classList.add('visible');
}
});
}, {
threshold: 0.05
});

elements.forEach(element => {
observer.observe(element);
});
}
}

document.addEventListener("DOMContentLoaded", () => {
wfo.scrollWatcher();
});

document.addEventListener('astro:page-load', () => {
wfo.scrollWatcher();
});

Now you're ready to use web:frameone. To use a component, you just must import the corresponding .astro file in the frontmatter of your astrojs page, and you're ready to go. It's essentially how normal astrojs components would work.

Other important things

The interfaces mentioned all over the documentation are just like HTML attributes and are used in the same way. You can use them directly on the web:frameone components as described in the documentation.

Some components like the navigation bar and the footer heavily depending some customization. Just feel free and modify the components, so that they perfectly fit in your project. Aside from that, feel free to contribute to the GitHub repository if you have an idea, that would make the framework a bit better.

The global.css file

All the major colors that you can see in the framework are defined in the global.css file. On the top, in the body section are some standard settings, like the font size and the font family. Directly beneath this, you can find the color settings for the dark- and light-mode. When you want to look up, if a certain component uses a specific color, you just must look up for the css variables defined in the global.css file.

After the general settings and color settings, there are some helper classes. They all have a different use to make the styling of websites a little bit easier. Here's a quick list:

  • sticky: sets the position of an element to sticky
  • highlight: makes the text color a gradient from the primary color to the accent color
  • stand-out: makes a text very big
  • standard-padding: applies a responsive padding to an element for improved legibility
  • standard-margin: is just like the standard-padding, except for it's a margin
  • slim-padding: applies a small responsive padding to an element for bolt designs
  • slim-margin: is just like the slim-padding, except for it's a margin
  • fade-in: applies a little fade in animation when an element with this class enters the screen through the bottom screen boundary
  • format: applies certain text formatting to all children of the element on which the class is applied

Additionally, there is some basic styling, such as images can only be 100% in width and have a border radius of 16 pixels, and that links are generally colored in the defined accent color.

The global.js file

The global.js file isn't very important for the functionality of the component set, but it provides some helpful functions in some cases. Here's a list of them again:

  • wfo.Scroll(element to scroll to): makes a smooth scroll to the provided element (just use a css query selector)
  • wfo.CheckboxChecked(checkbox to check): return true or false weather checkbox is checked or not (just use a css query selector again)

Maybe these functions help you, maybe not, but at least they are a nice-to-have.