product.css
Build beautiful responsive websites with the help of product.css

View Code (version 1.1)

CSS is now a lot easier

All you need to do is use a few pre-defined classes, make minute changes and its done.
product.css takes care of the complex css codes so you can focus on the other parts of your website.

Open Source

device_hub
product.css is an open source project. Any developer from the world can contribute to it.

MIT LICENSE

security
The MIT license is a simple and permisive license originating at the Massachusetts Institute of Technology. It allows every person to deal with the software without any restrictions.
License

GitHub

product.css is maintained and developed on GitHub.
View on GitHub

Demo 1 - Navigation Bar

<link href="product.css" type="text/css" rel="stylesheet">

<nav class="p_nav">
  <ul class="width-12">
    <li class="width-3">Menu item</li>
    <li class="width-3">Menu item</li>
    <li class="width-3">Menu item</li>
    <li class="width-3">Menu item</li>
  </ul>
</nav>
        

Demo 2 - Grid layout

<link href="product.css" type="text/css" rel="stylesheet">

<div class="p_part">
  <div class="width-4">
    <p>
    The class p_part sets the width to 100% and has a height of 500px,
    This class can be used to break website into parts or sections.
    </p>
  </div>

  <div class="width-4">
    <p>
    Class width-4 divides the section into 3 equal parts.
    </p>
  </div>

  <div class="width-4">
    <p>
    This grid is 1/3 of the total width.
    </p>
  </div>
</div>
        

The class p_part sets the width to 100% and has a height of 500px; This class can be used to break website into parts or sections. In this demo p_part is given white background color to show the exact dimensions.You can change it as per your wish.

Class width-4 divides the section into 3 equal parts. They are given a red background for better understanding.

This grid is 1/3 of the total width.