Bibliotek / Info
↗
Vedøy CSS v1.4.0

Vedøy CSS

Et responsivt CSS- og JavaScript-bibliotek for å bygge nettsider og webapper med ferdige komponenter, layout, skjema, tabeller, overlays og appmønstre.

Last ned CSS

Quick start

Legg Vedøy CSS inn i et HTML-dokument med CDN. JavaScript-filen er valgfri, men trengs for interaktive mønstre som tabs, modaler, dropdowns og disclosure.

CSS via CDNPlasser i <head>.
<link rel="stylesheet" href="https://css.vedoystudio.no/vedoy.css">
JavaScript via CDNPlasser før </body> eller bruk defer.
<script src="https://css.vedoystudio.no/vedoy.js" defer></script>

Installasjon med NPM

Bruk NPM når biblioteket skal versjoneres sammen med et React-, Next-, Vue- eller annet frontend-prosjekt.

Package installImporter CSS og start hjelpefunksjonene.
npm install vedoy-css

import 'vedoy-css/vedoy.css';
import Vedoy from 'vedoy-css';

Vedoy.init();

Innhold

Biblioteket er delt i praktiske moduler. Åpne dokumentasjonen for eksempler, forklaringsnivåer og kode for hver del.

Layout

Containere, grid, stack, spacing, responsive visibility og app shell.

Komponenter

Knapper, kort, badges, tabs, breadcrumbs, dropdowns, lister og progress.

Skjema

Inputs, textarea, select, checkbox, radio, range, validering og opplasting.

Data

Tabeller, states, API-visning, CRUD-mønstre og tom-/feiltilstander.

Overlays

Modal, drawer, tooltip, popover og offcanvas med fokusflyt.

Maler

Dashboard, admin, innlogging, onboarding, checkout og prising.

Vedøy Motion

Vedøy Motion er et valgfritt tillegg for animasjoner. Det gir fade, slide, reveal, hover, loading, stagger og redusert bevegelse som standard.

Motion CDNLegg til når prosjektet trenger animasjon.
<link rel="stylesheet" href="https://css.vedoystudio.no/vedoy-motion.css">
<script src="https://css.vedoystudio.no/vedoy-motion.js" defer></script>
Motion HTMLBruk klassene direkte på elementene.
<article class="vd-card vd-motion-fade-up">
  Innhold
</article>

<ul class="vd-motion-stagger">...</ul>

Neste steg

Start med kjernepakken, åpne komponentene i sidefeltet, og kopier kode fra eksemplene. Når grensesnittet trenger bevegelse, legg til Vedøy Motion.

V

Vedøy Studio

Hovedsiden for Vedøy Studio.

Gå til studio →

MIT-lisensiert kjerne. Vanlige HTML-, CSS- og JavaScript-filer. Bruk CDN, NPM eller kopier eksemplene inn i prosjektet.

Koden er kopiert