The style panel is where you can customize the look of your website.

You can style individual elements, or save styles as classes and reuse them throughout your project.

Whether you want to change the layout, typography, spacing, size or color of an element, you can do it all in the Style panel.

The style panel is not enabled for all users by default. Give other users permission to use it if you need help with the design of your website.

Applying Styles

To open the style panel click on an item on the page. To select a nested element make another click on the nested element. Now you can apply styles using the Style Panel interface.

Deleting Styles

Hold down the Alt key and Click on label to reset/remove a css rule.

Classes

CSS classes enable you to apply unique style properties to groups of HTML elements or PAGEGRID items.

Creating or applying a class

You can add custom classes to any PAGEGRID item on your page. Type a class name in the selector field and press the "return" or "space" key. The class will be added to your item.

Assigning values to a class

Click on a class to activate it. The class will turn blue. All the styles you apply now will be added to that class.

Updating a class

Right click a class in the Style Panel and click "update class". All CSS properties of an item will be copied to that class.

Deleting a class

Right click a class in the Style Panel and click "delete class".

Breakpoints

Customize your designs for small and large screens using PAGEGRID's built-in responsive breakpoints. You can switch between different breakpoints using the device icons located in the top menu bar. Layout changes made by dragging/resizing or styles set via the style panel are applied only to the selected breakpoint.

	Base Styles set on the base breakpoint will affect all screen sizes (cascade up and down).
	Medium Styles set on the medium breakpoint will affect screens smaller then 960px and will be carried over to the mobile breakpoint. You can override any styles inherited from a higher breakpoint.
	Mobile Styles set on the mobile breakpoint will affect screens smaller then 640px. You can override any styles inherited from a higher breakpoint. By default, grid elements are automatically stacked and span all columns.
	Large Styles set on the large breakpoint will affect screens larger then 1600px. You can override any styles inherited from the base breakpoint.