Unzip the Files
When you first download the framework, it will be zipped up. Go ahead and unzip the css files, and place them in a new CSS folder.
Claim Your Copy of ChampCSS
are you ready to take your web production game to the next level? Grab your copy today! It is absolutely free, you don’t even to enter in your email address.
Grab Your CopyGet Started in 3 Simple Steps
Theme your Site
Go into the utils file in ChampCSS. Here, you are in ful control over your site's theme. Once you customize ChampCSS, you are good to go.
Build Your Site
With variables, fluid type and spacing, and utility classes, you are able to build your website projects at lightning speed.
Features That Will Elevate Your Production Game
Discover the powerful features of ChampCSS. Once you discover the unprecedented power of this framework, you will be waiting to implement it on every single site you build.
A Varible-First Workflow
ChampCSS doesn't care about what your HTML looks like. Say goodbye to useless class names that clog up your markup. Use custom class names, and hook into ChampCSS via the extensive library of variables.
Extensive Color Management
With a partial approach, editing and manipulating colours across the website is a breeze. Just update your values, and it is going to update all the built-in variations of the colour.
Fluid Type and Spacing
With fluid type and spacing features, you are instantly able to ensure that your content looks good across multiple platforms. This reduces the need for stuff every element into a media query, and leaves more time for you to do more important things.
Grid Support
ChampCSS makes it effortless to integrate CSS grid content into your website production. With 5 pre-defined fluid templates, gap variables, and even some quick utility classes, you are able to build grids with ease.
Semantic Variables
Semantic variables makes it super safe to adjust styling content on your website. Whenever possible, everything is mapped to a logical use case, so you can quickly retheme a site.
A Sensible Reset
Creating a reset is a huge pain. It’s hard to know which styles would reset user agent styles. I have taken all guesswork out of the equation, and included a reset stylesheet that’ll work out of the box..
How would You Use ChampCSS?
For Quick Labs
For times when you are just playing around in a lab environment, and you don’t want to worry about creating a system, you can just plug into ChampCSS, and it will take care of the rest.
For Full Website Builds
When you are building out full websites, ChampCSS is a no-brainer. Everything is already frameworked for you, so you can dive into the web production phase without any delay.
Help Improve ChampCSS
ChampCSS is intended to be built by community. We all use the product, so why not involve the community into the evolution? If you find a bug, or need a feature, you should fill out the contribution form.
