Tailwind CSS Framework

Monter CSS Framework is based on the popular CSS framework Tailwind CSS.

OxyMade CSS Framework is based on Tailwind CSS utility classes. We love Tailwind and we think Tailwind is the future of CSS.

We have created an optimized Tailwind CSS experience to work with Oxygen builder. At first look our framework, just like Tailwind, might look over whelming for a few, but once you get used to it, you just write classes like you write css properties.

1. Structure:

Here is some information on how and where you can find more info about our framework:

  1. Our grid and responsive utilities are stored in a CSS stylesheet inside Oxygen stylesheets.

  2. Most of our utility classes like, paddings, margins, width, height, text sizes etc, are created as native Oxygen classes & all these classes are stored in OxyMadeCSSFramework folder.

  3. Our design set specific classes like buttons, avatars, headings, icons etc are stored in OxyMadeFramework Extras folder.

  4. We call all the css classes we have in OxyMadeFramework folder as utilities, and generally you don’t need to change them at all. So we have locked them and they are not meant to be edited in general.

2. Benefits:

Here are a few benefits of using Monster framework:

  1. Our framework is based on the most popular and trending CSS framework Tailwind.

  2. With a utility classes powered framework like ours, you don’t need to remember any class name at all.

    For ex: p is for padding, px is for padding-left & padding-right, py is for padding-top & padding-bottom, pt is for padding-top, pb is for padding-bottom, pl is for padding-left, pr is for padding-right

    And p-1 is a class name for padding: 4px; css property. In the same way, p-2 is for 8px padding, p-3 is for padding 12px. Also pb-1 is a class to apply padding-bottom: 4px; css property to an element.

  3. The framework is based on a proper & a popular 4px/8px spacing system. You can find every spacing class property can be divided by 4 to make it look uniform.

  4. We have a lot of responsive classes to quickly design for responsive screens as well. Just adding sm- in front of a class name makes it responsive for sm/mobile breakpoint.

  5. You are literally learning to write the best Tailwind CSS framework, which will be helpful for you and your career to design with HTML.

  6. A well maintained and most updated framework with over 600+ readymade classes.

This post will be updated with more info as we develop it further.

← Welcome
Color system overview →