ZindaCSS

Responsive code with ZindaCSS

ZindaCSS lets you make your website responsive, without writing any CSS

Hide objects on devices

You can choose to hide objects on certain devices.
If I want any component(image, nav, divs etc.), to not be visible on phones, then all I need to do is add the class:

<div class="phone-nodisplay">TEST</div>
Similarly for tablets:
<div class="tablet-nodisplay">TEST</div>
For Desktops:
<div class="desktop-nodisplay">TEST</div>
Note: It is highly recommended that you make your websites mobile first, which means making the website as if it should be used for only phones, then adding responsive features to make it accessible to desktop and tablet.

Margins, paddings, and width

To set the width of an element based on the device, use the following syntax

<div class="device-width|margin|padding-number">TEST</div>
Example:
To give an object a width of 30% in phone, height of 50% in tablets, and 80% in desktops:
<div class="phone-width-3 tablet-height-5 desktop-width-8">TEST</div>
To find out more about properties for paddings, margins, and width visit the respective documentation.

The following are the values for class names:
device-margin-Number from 1 to 10
device-margin-left-Number from 1 to 10
device-margin-right-Number from 1 to 10
device-margin-top-Number from 1 to 10
device-margin-bottom-Number from 1 to 10
device-margin-x-Number from 1 to 10
device-margin-y-Number from 1 to 10

device-padding-Number from 1 to 10
device-padding-left-Number from 1 to 10
device-padding-right-Number from 1 to 10
device-padding-top-Number from 1 to 10
device-padding-bottom-Number from 1 to 10
device-padding-x-Number from 1 to 10
device-padding-y-Number from 1 to 10

device-width-Number from 1 to 10
device-height-Number from 1 to 10