Classes | Color Pick | Fonts | Animations
A Simple, No-Fuss CSS Framework for Everyone
Not everyone wants to dive deep into the complexities of CSS. Some developers and designers just want a straightforward way to create beautiful, responsive websites without mastering advanced techniques or dealing with excessive configurations.
That is why we built QuickCSS: a lightweight, intuitive CSS framework that keeps things simple. Instead of overwhelming you with intricate systems, QuickCSS provides the essentials clean, basic CSS that just works. Whether you're a beginner, a busy developer, or someone who prefers minimalism, QuickCSS helps you build professional, mobile-friendly websites with ease.
No steep learning curve. No unnecessary bloat. Just simple, effective styling so you can focus on what really matters bringing your ideas to life.
Three Ways to Use QuickCSS
Merge with Your Custom CSS
Copy the entire QuickCSS file contents and combine them with your own custom CSS file.
Use the QuickCSS Stylesheet Link
<link rel="stylesheet" href="https://quickcss.petek.co.za/quickcss.css">
Download the Complete Zip Folder
Download the full QuickCSS package as a zipped folder to your computer for offline use.
<class="cont-10">
<class="cont-15">
<class="cont-20">
<class="cont-25">
<class="cont-30">
<class="cont-35">
<class="cont-40">
<class="cont-45">
<class="cont-50">
<class="cont-55">
<class="cont-60">
<class="cont-65">
<class="cont-70">
<class="cont-75">
<class="cont-80">
<class="cont-85">
<class="cont-90">
<class="cont-95">
<class="fw-100">
<class="fw-200">
<class="fw-300">
<class="fw-400">
<class="fw-500">
<class="fw-600">
<class="fw-700">
<class="fw-800>
<class="fw-900">
<class="font-thin">
<class="font-extralight">
<class="font-light">
<class="font-normal">
<class="font-medium">
<class="font-semibold">
<class="font-bold">
<class="font-extrabold>
<class="font-black">
Grid Columns
<class="grid">
<class="grid-cols-1>
<class="grid-cols-2">
<class="grid-cols-3">
<class="grid-cols-4>
<class="grid-cols-5">
<class="grid-cols-6">
<class="grid-cols-7">
<class="grid-cols-8">
<class="grid-cols-9">
<class="grid-cols-10>
<class="grid-cols-11">
<class="grid-cols-12">
Grid Rows
<class="grid-rows-1">
<class="grid-rows-2">
<class="grid-rows-3">
<class="grid-rows-4>
<class="grid-rows-5">
<class="grid-rows-6">
<class="grid-rows-7>
<class="grid-rows-8">
<class="grid-rows-9">
<class="grid-rows-10>
<class="grid-rows-11">
<class="grid-rows-12">
<class="w-screen">
<class="w-screen-sm">
<class="w-screen-md">
<class="w-screen-lg">
<class="w-screen-xl">
<class="w-screen-2xl">
<class="w-screen-3xl">
<class="w-screen-4xl">
<class="w-screen-5xl">
<class="w-screen-6xl">
<class="w-screen-7xl">
<class="w-screen-8xl">
<class="w-screen-9xl">
<class="w-screen-10xl">
<class="con-10">
<class="con-15">
<class="con-20">
<class="con-25">
<class="con-30">
<class="con-35">
<class="con-40">
<class="con-45">
<class="con-50">
<class="con-55">
<class="con-60">
<class="con-65">
<class="con-70">
<class="con-75">
<class="con-80">
<class="con-85">
<class="con-90">
<class="con-95">