Skip to main content

The Introduction

Welcome to the CSS Framework documentation - Valclass! This website will give you an introduction to 90% of Valclass concepts that might encourage you to use it every day

Getting Started​

Get started by getting a cdn link.

danger

It is highly recommended that you have already mastered vanilla CSS beforehand.

What you'll need​

We provide 2 CDN links in Valclass, each with a different function. The first link is intended for using utilities, while the second link provides instant features of Valclass.

Utilities
<script src="https://cdn.jsdelivr.net/gh/khoirulhudaa/valclass/valclass.js"></script>
Features
<script src="https://cdn.jsdelivr.net/gh/khoirulhudaa/valclass/component-features.js"></script>
info

Or try a better Valclass experience by downloading it yourself.

Note Place all these CDN links before the </body> tag inside the <script>.

Template Code​

Run the development server:

HTML
<!DOCTYPE html>
<html lang="en">
    <head>  
        <!--All meta--> 
        <meta charset="utf-8">

        <!--Title Browser Tab--> 
        <title>@valclass</title>
    </head>
                
    <body>
      <h1 class="v-mt-100px v-font-poppins v-font-sz-50px v-color-green">
          Hi, my name is Valclass 
      </h1>

      <p class="v-pst-relative v-font-poppins">
          Valclass speeds up website development for web developers.
      </p>

      <!--include the script to connect with valclass--> 
      <!--Link for Utilities-->
      <!--Link for Features (Optional)-->
    </body>
</html>

Meta tag​

Valclass was also developed to ensure a user-friendly and improved web interface. To ensure proper rendering and touch zoom on all devices, add the responsive viewport meta tag to your <head>.

SEO keywords
<meta name="keywords" content="web development, Docusaurus, Valclass">
Character encoding
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Browser compatibility
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Responsive design
<meta name="viewport" content="width=device-width">
Page description
<meta name="description" content="example">
Page author
<meta name="author" content="Your Name">