DOCSEARCHbyAlgolia
Submit Docs

Framework V Documentation

website·Indexed 30 days ago

https://framework-v.vercel.app/docs/getStarted

Documentation for Framework V, a CSS utility framework. It provides core utilities for layout (v-d-, v-float-, v-pst-), typography (v-leading-, v-break-), borders (v-radius-, v-border-type-), interactivity (v-transition-, v-cursor-), and transforms (v-scale-, v-rotate-).

Tokens
20.8K
Snippets
151
Records
184
Agent score
73%

What's inside Framework V

  1. Prerequisites for using Valclass

    Before using Valclass, it is highly recommended that developers have mastered vanilla CSS. Experience with HTML, CSS, and utility-first frameworks like Tailwind CSS or Bootstrap is also suggested.

  2. Apply box-shadow utilities to elements

    Use the v-box-shadow-* utility classes to apply predefined CSS box-shadows to an element. For custom shadow requirements, use the framework's custom feature.
    <!-- Small shadow -->
<div class="v-box-shadow-sm"></div>

<!-- Medium shadow -->
<div class="v-box-shadow-md"></div>

<!-- Large shadow -->
<div class="v-box-shadow-lg"></div>

<!-- Extra large shadow -->
<div class="v-box-shadow-xl"></div>

  5. Align text using v-text utilities

    Use the v-text-* utility classes to control the horizontal alignment of text within an element. For custom alignment requirements, use the V-custom feature.
    <!-- Center align text -->
<div class="v-text-center">Centered text</div>

<!-- Left align text -->
<div class="v-text-left">Left aligned text</div>

<!-- Right align text -->
<div class="v-text-right">Right aligned text</div>

<!-- Justify text -->
<div class="v-text-justify">Justified text</div>

  6. Control element display with layout utility classes

    Use the v-d-*, v-table-*, or v-none utility classes to control how the browser calculates an element's total size and its layout behavior. For highly specific display requirements, use the custom feature.
    <!-- Example: Using flex display -->
<div class="v-d-flex">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

  7. Install ValClass UI via npm

    ValClass (Framework V) is a utility-first CSS framework that can be integrated into web projects, including ReactJS, to simplify styling using pre-defined classes such as v-pt-4, v-d-flex, text-center, and rotate-90.
    npm install valclass-ui

  8. Control element positioning with v-pst utilities

    Use the v-pst-* utility classes to define the CSS position property of an element. For custom positioning requirements, use the V-custom feature.
    <!-- Relative position -->
<div class="v-pst-relative"></div>

<!-- Absolute position -->
<div class="v-pst-absolute"></div>

<!-- Fixed position -->
<div class="v-pst-fixed"></div>

<!-- Sticky position -->
<div class="v-pst-sticky"></div>

<!-- Static position -->
<div class="v-pst-static"></div>

  9. Export content to Office files using v-helper

    Use the v-helper utility classes to enable exporting HTML content (tables or text) to Office formats. You must define the content to be exported using a template class and trigger the download using a corresponding office action class on a button.
    <!-- Define the content to be exported -->
<div class="v-template-excel">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</div>

<!-- Trigger the export to Excel -->
<button class="v-btn-green v-office-excel">
    Download Excel
</button>

  10. Divide elements into columns using v-col utilities

    Use the v-col-* utility classes to set the column-count of an element. These classes allow you to divide content into a specified number of columns. For custom column requirements, use the V-custom feature.
    <!-- 1 Column -->
<div class="v-col-1">...</div>

<!-- 2 Columns (includes 10px padding) -->
<div class="v-col-2">...</div>

<!-- 3 Columns (includes 10px padding) -->
<div class="v-col-3">...</div>

<!-- 4 Columns (includes 10px padding) -->
<div class="v-col-4">...</div>

  11. Control element cursor styles with v-cursor utilities

    Use the v-cursor-* utility classes to change the mouse cursor style when hovering over an element. For custom cursor requirements not covered by these utilities, use the v-custom feature.
    <!-- Pointer cursor -->
<div class="v-cursor-pointer">Hover me</div>

<!-- All-scroll cursor -->
<div class="v-cursor-all-scroll">Hover me</div>

<!-- Column resize cursor -->
<div class="v-cursor-col-resize">Hover me</div>

<!-- Progress cursor -->
<div class="v-cursor-progress">Hover me</div>