CSS Vars Framework & UI Kit

About

This project has one main purpose to use as fewer resources as possible Most templates are built using CSS frameworkd, Jquery, JS, Font awesome, and many other resources and that affects the page load speed. Please, visit https://cssvars.com

Specifications

Pure HTML CSS

Everything you need without JS. It's built for SEO purposes so it's the lightest and most powerful

Fast Loading

A small CSS file makes wonders. Just 9kb (minified + gzipped), other frameworks require 100's

Extendable with Variables

Easy to set your colors and fonts. Set your brand colors & fonts, sizes, style with variables and ready classes

Responsive & Mobile first

Much more than just a grid. Responsive images, videos, galleries, tables, menus, maps, frames, embeds

100's of Free UI Elements

All needed elements are ready. Typography, buttons, cards, icons, tabs, carousel, masonry, Flex gallery ...

100's of Free UI Elements

All needed elements are ready. Typography, buttons, cards, icons, tabs, carousel, masonry, Flex gallery ...

Scoped CSS

AgileCSS styles could be applied to a single element without breaking your existing code

Icons Included

Easy to use and style any SVG icon, no need for extra resources and icons frameworks

Free & Open Source

Built with love to be used. Free framework, UI elements, & themes. Download, use, enjoy & share

Contents

Base:

• Head code
• Variables, colors, size, rounded, padding, shadow on hover, bordered, top|half|bottom bordered
• Layouts, wide, full- width, boxed, 1,2,3,4 columns
• grid 1,2,3,4,5,6 columns
• typography

Basic Elements:

• Headings
• buttons
• Labels and budgets
• dividers
• Quotes
• Tables
• Pagination
• Alerts
• Promo boxes

Complex Elements:

• Menus
• Cards
• toggles and accordions
• Tabs
• Parallax
• process steps
• Maps

Visual elements:

• Carousel
• Slider
• Galleries
• lightbox
• Video embed
• Thumbnails

Form elements:

• Form elements
• data picker
• range slider
• Star rating
• Select picker
• select splitter
• radio and checkbox

Sections:

• Promo boxes
• Header
• Side Panel
• Page Header
• Footer
• Sections

Widgets:

• Pricing table
• Features list
• Testimonials
• Clients list
• Services list

Main Pages:

• Contact us
• Coming soon
• About us
• Team
• Faq
• Services
• Login and register
• Under maintenance
• 404
• sitemap
• User profile

Portfolio and Blog Pages:

• Portfolio showcase
• Portfolio single project
• Blog category
• Blog single post
• Author page

Shop and Event Pages:

• Job Opening
• Event list
• Single event
• Shop
• Shop single product
• cart
• Checkout

Home Pages:

• corporate
• Other companies
• Blog
• Shop
• Landing Pages

Other elements:

• Modal & Tooltips
• Charts
• Counters
• Icons
• Social icons
• sticky element
• Typewriting
• Animation
• Charts

Advanced:

• AMP
• Markup Structure Data
• Knowledge Graph
• Open Graph