267 Internet Technologies
Web Developer & Design, SEO, Mobile, E-Commerce Software and Social Media

267.marpad

Get the lowdown on the key pieces of Marpad's infrastructure, including our approach to easy, useful, faster and RESPONSIVE web development.

Overview

MarPad makes margin and padding features easier in the CSS, It is a smart class that you can assign up to (default) "150px" by using "class" only in HTML without having to write CSS.
You can assign the margin, padding property to (right, left, top and bottom) singular or plural to HTML element at the same time. And Marpad supports RESPONSIVE!

First Example

<div class="m-10">
   <h4>It's Simple to Use!</h4>
</div>
m-10 meaning {margin : 10px;} in CSS code for all devices and resolutions.

Mobile First

we added optional mobile friendly styles for key aspects of the Marpad. With the Marpad, we've supported the project to be mobile friendly from the start.
Instead of adding on optional mobile styles, they're baked right into the core. In fact, Marpad is mobile first like a Bootstrap!

You can add and use md, sm, xs media queries codes.
md (medium) = to tablet devices and over
sm (small) = tablet devices and over
xs (xsmall) = only mobile phones

Go Usage

Responsive Utilities

For faster mobile-friendly development, use these utility classes for margin and padding element by device via media query.

Extra small devices
Phones (<768px) 		Small devices
Tablets (≥768px) 		Other devices
Desktops (≥992px)
.m-xs-20
.m-sm-20
.m-md-20
.m-20 
<div class="p-80 p-xs-15 px">
    <b class="m-15 my">Live Marpad Demo!</b>
</div>
Live Marpad Demo!

Examples

Using margin or padding by writing CLASS on HTML Elements.

Simple Using

<div class="p-10 m-5">Marpad!</div>
This means that in CSS 
div {
   padding:10px;
   margin:5px;
}

Coordinates

Using (x,y) Coordinates. Meaning, x = [left and right], y = [top and bottom]
For this usage adding new class. mx, my, px, py 

<div class="p-10 px m-5 my">Marpad!</div>
This means that in CSS 
div {
   padding:0 10px;
   margin:5px 0;
}

Single Direction

Using Single-direction (m)argin or (p)adding declarations. (t)op, (r)ight, (b)ottom, (l)eft

.mtmargin-top
.mrmargin-right
.mbmargin-bottom
.mlmargin-left
margin
.ptpadding-top
.prpadding-right
.pbpadding-bottom
.plpadding-left
padding
 
<div class="p-10 pl m-5 mb">Marpad!</div>
This means that in CSS 
div {
   padding:0;
   padding-left:10px;

   margin:0;
   margin-bottom:5px;
}

Resposive Examples

Only -xs- is used below.

There will be 15px margin-bottom space in the mobile device. 
<b class="m-xs-15 mb">Live Marpad Demo!</b>
<b>Marpad Is Responsive!</b>
Live Marpad Demo! Marpad Is Responsive!

Below -sm- and -xs- are used at the same time.

There will be 80px padding-left and padding-right space in the all device except mobile. 
<div class="p-sm-80 p-xs-15 px">
    <b class="m-15 my">Live Marpad Demo!</b>
</div>
Live Marpad Demo!

Below -md- and -sm- and -xs- are used at the same time.

There will be 150px padding-left and padding-right space in -md-, 80px in -sm- and 15px in -xs- 
<div class="p-md-150 p-sm-80 p-xs-15 px">
    <b class="m-15 my">Live Marpad Demo!</b>
</div>
Live Marpad Demo!

Using auto feature of margin and inherit feature of padding below.

There will be auto margin-left and margin-right space in the all device except mobile. This definition for padding p-auto, p-xs-auto etc. Will get the value of inherit with use. 
<b class="m-sm-auto">Live Marpad Demo!</b>
<!--<b class="m-auto">Another Example For all resolution!</b>-->
Live Marpad Demo!

Download Marpad Source Code

Marpad CSS

Compiled and minified CSS with media queries. No docs or original source files are included.

Download Marpad

Marpad.js

Developable open source javascript function. No docs or original source files are included.

Download Marpad.js

License FAQs

Marpad is released under the 267 license and is copyright 2016 267 IT. Boiled down to smaller chunks, it can be described with the following conditions.

Descriptions and Notes

Marpad is opensource consists of CSS code.
Marpad was built to create space-saving, fast solutions. There is a limit to the definition of values for this. Supports 0 to (default) 150 px.
Use a 0, 1, 2...18, 19, 20, 25 to 5++ then using Marpad code class. Also you can change it using Marpad.js.
marpad.css v0.9.0 | 267 License | 267.com.tr/Marpad