PixelGrid X

x-class

Info

• The x-class is the grid column.
• Besides the x it has a number (like 480) which displays how many pixels wide the class is.

What to do

• Add styles to the x-class if you like, but only if it’s relevant to the whole grid column.
• When adding other x-classes, add them directly within an x-class, never inside a box-class. If you do, the grid will not function properly.

Warnings

• Never add padding or margins to the x-class. If you do, the grid will not function properly. Add it to the box-class instead.

box-class

Info

• The box is the container of all HTML code inside the box.
• When adding HTML, the box class is required to not affect the size of the containing x-class.

What to do

• Write all HTML code inside the box.
• You can add more than one box into a grid column.
• Add extra classes or IDs if you like.

Warnings

• Never add x-classes inside a box-class. Add them inside another x-class instead.

head-class

• The head class could be used as a title of the box.
• This class is optional.

body-class

• The body class is used for the box body content.
• This class is optional.

foot-class

• The foot class could be used as a footer of the box.
• This class is optional.