PixelLayer UI

Grid Framework

This framework uses a 12-column responsive grid. You can define column widths for different devices using col-dt-*, col-tab-*, and col-mob-*. Replace * with a number from 1 to 12.

Background Color

To apply a background color using your PixelLayer UI utility classes, simply add the corresponding class to any HTML element. For example, adding .bgc-primary will apply the primary brand color as the element’s background. These utility classes are predefined, reusable, and fully customizable via your Shopify app admin panel. You don’t need to write any extra CSS—just use the class on buttons, cards, sections, or any other elements. This approach makes your design scalable, consistent, and easy to maintain across your store.

Tip: In .bgc-primary, bg means background, c means color, and primary refers to the primary color code defined in your SCSS variables.

Text Color

To apply a text color using your PixelLayer UI utility classes, simply add the corresponding class to any HTML element. For example, adding .tc-primary will apply the primary brand color to the element’s text. These utility classes are predefined, reusable, and fully customizable via your Shopify app admin panel. You don’t need to write any extra CSS—just use the class on headings, paragraphs, buttons, or any other text elements. This approach makes your design scalable, consistent, and easy to maintain across your store.

Tip: In .tc-primary, tc means text color, and primary refers to the primary color code defined in your SCSS variables.

Border

1. Border Width Utilities (.bw-*)

Explanation (General):
To apply a border width using your PixelLayer UI utility classes, simply add the corresponding .bw-* class to any element. For example, .bw-2 applies a 2px border. These classes are predefined and reusable.

Tip: bw = border width, the number indicates the pixel size.

2. Border Style Utilities (.bs-*)

Explanation (General):
Use .bs-* classes to define the border style of an element. For example, .bs-dashed will make the border dashed. These are reusable and easy to maintain.

Tip: bs = border style.

Font Size

PixelLayer UI allows you to set font sizes from 4px to 80px using utility classes. You can apply different sizes for desktop, tablet, and mobile. These classes are predefined and reusable. Just add the class to headings, paragraphs, buttons, or any text element—no extra CSS needed. This approach ensures your typography is scalable, consistent, and responsive across your store.

Tips:

• dt-font* → Desktop font size

• tab-font* → Tablet font size

• mob-font* → Mobile font size

• The number after the class represents the font size in pixels (e.g., 16 → 16px)

1. Desktop Font Sizes

2. Tablet Font Sizes

3. Mobile Font Sizes

Font Weight

PixelLayer UI allows you to apply font weight easily using utility classes from 100 to 900. These classes are predefined and reusable. Simply add the class to any text element—headings, paragraphs, buttons, or labels—to control font thickness. This ensures your typography remains scalable, consistent, and visually appealing across your store.

Tips:

• fw-* → Font weight

• Number after fw- (100 → 900) represents the weight value in CSS

• Use these classes to create thin, normal, bold, or extra-bold text easily

Font Style

PixelLayer UI provides font-style utility classes to control the style of text. You can easily switch text between normal, italic, or oblique without writing extra CSS. These classes are predefined and reusable. Apply them to any heading, paragraph, or label to make your typography consistent and visually appealing.

Tips:

• fs-* → Font style

• .fs-normal → Default normal text

• .fs-italic → Italicized text

• .fs-oblique → Oblique text

• Combine these with font-size and font-weight utilities for full control over typography.

Line Height

PixelLayer UI provides line-height utility classes to control the spacing between lines of text. You can set line height from 4px to 80px in multiples of 4px using .lh-* classes. These classes are predefined and reusable. Apply them to headings, paragraphs, or any text element for consistent, readable, and visually balanced typography.

Tips:

• lh-* → Line height

• The number after lh- indicates the line height in pixels

• Combine with font-size, font-weight, and font-style utilities to fully control text appearance

Padding

PixelLayer UI provides padding utility classes to quickly add spacing inside elements. You can apply padding in all directions, individually on top, bottom, left, right, or horizontally/vertically, from 5px to 100px in multiples of 5px. These classes are predefined and reusable. Just add the class to any container, card, or section for consistent spacing across your store.

Tips:

• dt-p-* → Desktop padding

• tab-p-* → Tablet padding

• mob-p-* → Mobile padding

• -t, -b, -l, -r → Top, Bottom, Left, Right

• -x → Left + Right, -y → Top + Bottom

• Number after the class represents padding in pixels
  

Desktop Padding

Some Directional Padding Examples Desktop

Tablet Padding

Some Directional Padding Examples Tablet

Mobile Padding

Margin

PixelLayer UI provides margin utility classes to quickly add spacing outside elements. You can apply margin in all directions, individually on top, bottom, left, right, or horizontally/vertically, from 5px to 100px in multiples of 5px. These classes are predefined and reusable. Use them on cards, sections, or containers for consistent spacing across your store.

Tips:

• dt-m-* → Desktop margin

• tab-m-* → Tablet margin

• mob-m-* → Mobile margin

• -t, -b, -l, -r → Top, Bottom, Left, Right

• -x → Left + Right, -y → Top + Bottom

• Number after the class represents margin in pixels

Desktop Margin

Some Directional Margin Examples Desktop

Letter Spacing

PixelLayer UI provides letter-spacing utility classes to control the spacing between characters in text. You can apply letter spacing from 0px to 10px using .ls-* classes. These classes are predefined and reusable. Apply them to headings, paragraphs, or labels to make typography readable, balanced, and visually appealing.

Tips:

• ls-* → Letter spacing

• dt-ls-* → Desktop letter spacing

• tab-ls-* → Tablet letter spacing

• mob-ls-* → Mobile letter spacing

• Number after ls- represents spacing in pixels

• Combine with font-size, font-weight, font-style, and line-height utilities for full typography control

Letter Spacing Utilities (Desktop)

Text Align

PixelLayer UI provides text alignment utility classes to control the horizontal alignment of text. You can align text to the left, center, right, or justify. These classes are predefined and reusable. Apply them to headings, paragraphs, or any text container for consistent typography alignment across your store.

Tips:

• text-* → Text alignment

• dt-text-* → Desktop text alignment

• tab-text-* → Tablet text alignment

• mob-text-* → Mobile text alignment

• Use these classes on paragraphs, headings, buttons, or div containers

• Combine with font-size, font-weight, font-style, and line-height for complete text styling

Text Align Utilities (Desktop)

Text Decoration

PixelLayer UI provides text-decoration utility classes to control the decoration of text. You can apply underline, line-through, or remove all text decoration with simple classes. These classes are predefined and reusable. Apply them to headings, paragraphs, links, or buttons for consistent text styling.

Tips:

• td-* → Text decoration

• .td-underline → Adds underline

• .td-line-through → Adds line-through

• .td-none → Removes all text decoration

• Use in combination with font-size, font-weight, font-style, letter-spacing, and text-align for full typography control

Text Transform

PixelLayer UI provides text-transform utility classes to control capitalization of text. You can convert text to uppercase, lowercase, capitalize each word, or leave it as normal. These classes are predefined and reusable. Apply them to headings, paragraphs, buttons, or labels for consistent text styling across your store.

Tips:

• tt-* → Text transform

• .tt-uppercase → Converts text to uppercase

• .tt-lowercase → Converts text to lowercase

• .tt-capitalize → Capitalizes the first letter of each word

• .tt-normal → Removes any text transformation, keeping original text

• Combine with font-size, font-weight, font-style, letter-spacing, and text-align for complete typography control

Display

PixelLayer UI provides display utility classes to control the display behavior of elements. You can quickly switch elements to block, inline, inline-block, flex, inline-flex, grid, table, or none. These classes are predefined and reusable. Apply them to divs, containers, images, or any HTML element to control layout and visibility responsively.

Tips:

• dt-* → Desktop display

• tab-* → Tablet display

• mob-* → Mobile display

• .dt-none → Hide element

• .dt-flex, .dt-inflex → Use for flexbox layouts

• .dt-grid → Use for grid layouts

• Combine with margin, padding, alignment, and width utilities for flexible layout design

Display Utilities (Desktop)

Flex Direction

PixelLayer UI provides flex-direction utility classes to control the main axis direction of flex containers. You can set a flex container to row, row-reverse, column, or column-reverse. These classes are predefined and reusable. Apply them to a flex container to control layout flow of child elements.

Tips:

• fd-* → Flex direction

• .fd-row → Arrange children horizontally (default)

• .fd-row-reverse → Arrange children horizontally in reverse order

• .fd-col → Arrange children vertically

• .fd-col-reverse → Arrange children vertically in reverse order

• Use in combination with flex, spacing, alignment, and display utilities for responsive layouts

Flex Wrap

PixelLayer UI provides flex-wrap utility classes to control how child elements wrap inside a flex container. You can allow elements to wrap to the next line, prevent wrapping, or reverse the wrap order. These classes are predefined and reusable. Apply them to flex containers to control responsive layouts for rows of content.

Tips:

• fw-* → Flex wrap

• .fw-wrap → Allows children to wrap onto multiple lines

• .fw-nowrap → Prevents children from wrapping, keeping them on a single line

• .fw-wrap-reverse → Wraps children but reverses the order of the wrapped lines

• Use with .dt-flex, flex-direction, justify-content, and align-items for complete control

Justify Content

PixelLayer UI provides justify-content utility classes to control the horizontal distribution of items inside a flex container. You can align items to the start, center, end, or distribute space between/around/evenly. These classes are predefined and reusable. Apply them to a flex container to create precise layout alignment for rows of elements.

Tips:

• jc-* → Justify content

• .dt-jc-start → Align children to the left (flex-start)

• .dt-jc-center → Center children horizontally

• .dt-jc-end → Align children to the right (flex-end)

• .dt-jc-between → Distribute children with equal space between them

• .dt-jc-around → Distribute children with equal space around them

• .dt-jc-evenly → Distribute children with equal space evenly

• Responsive classes:

  • .tab-jc-* → Tablet-specific justify content

  • .mob-jc-* → Mobile-specific justify content

• Usage tip: Always combine with .dt-flex and optionally with flex-direction (.fd-*) and flex-wrap (.fw-*) for full layout control.

Justify Content Utilities (Desktop)

Justify Content Utilities (Tablet)

Justify Content Utilities (Mobile)

Align Items

PixelLayer UI provides align-items utility classes to control the vertical alignment of child elements inside a flex container. You can align children to the top, center, bottom, stretch, or baseline. These classes are predefined and reusable. Apply them to flex containers to create precise vertical alignment for rows or columns of elements.

Tips:

• ai-* → Align items vertically

• .dt-ai-start → Align children to the top (flex-start)

• .dt-ai-center → Center children vertically

• .dt-ai-end → Align children to the bottom (flex-end)

• .dt-ai-stretch → Stretch children to fill container height

• .dt-ai-baseline → Align children along their text baseline

• Responsive classes:

  • .tab-ai-* → Tablet-specific vertical alignment

  • .mob-ai-* → Mobile-specific vertical alignment

• Usage tip: Always combine with .dt-flex, flex-direction (.fd-*), and flex-wrap (.fw-*) for full control of child alignment.

Align Items Utilities (Desktop)

Align Items Utilities (Tablet)

Align Items Utilities (Mobile)

Position

PixelLayer UI provides position utility classes to control the positioning of elements. You can set elements to static, relative, absolute, fixed, sticky, or initial. These classes are predefined and reusable. Apply them to any element to control its placement within the page or relative to its container.

Tips:

• pos-* → Sets the CSS position property

• .dt-pos-static → Default static position

• .dt-pos-relative → Position relative to its normal place

• .dt-pos-absolute → Position relative to the nearest positioned ancestor

• .dt-pos-fixed → Fixed to viewport, does not scroll

• .dt-pos-sticky → Sticks when scrolling past a threshold

• .dt-pos-initial → Resets to default initial value

• Responsive classes:

  • .tab-pos-* → Tablet-specific positions

  • .mob-pos-* → Mobile-specific positions

• Usage tip: Combine with top, right, bottom, left utilities for precise placement.

Position Utilities (Desktop)

Position Utilities (Tablet)

Position Utilities (Mobile)

Center Content

PixelLayer UI provides center utility classes to quickly center elements horizontally, vertically, or both. These classes are predefined, reusable, and fully customizable. Use them on positioned elements to easily center them inside their parent container without writing custom CSS.

Tips:

• center-* → Centers elements

• .center-all → Centers element both horizontally and vertically

• .center-x → Centers element horizontally only

• .center-y → Centers element vertically only

• Always use with positioned elements (relative, absolute, fixed, sticky)

• Usage tip: Combine with .dt-pos-* to control the element’s position.

PixelLayer UI provides center utility classes to quickly center elements horizontally, vertically, or both. These classes are predefined and reusable. Use them on positioned elements to easily center them inside their parent container without writing custom CSS.

Tips:

• center-* → Centers elements

• .center-all → Centers element both horizontally and vertically

• .center-x → Centers element horizontally only

• .center-y → Centers element vertically only

• Always use with positioned elements (relative, absolute, fixed, sticky)

• Usage tip: Combine with .dt-pos-* to control the element’s position.

Width

PixelLayer UI provides width utility classes to quickly set element widths in pixels, percentages, or viewport units. These classes are predefined and reusable. Simply apply the class to any block-level or inline-block element to control its width.

Tips:

• .w-* → Sets element width

• .w-auto → Automatic width based on content

• .w-fit → Fit content width

• .w-0, .w-25, .w-50, .w-75, .w-100 → Width in percentage

• .w-vw-* → Width in viewport width units (vw)

• Combine with padding/margin utilities for responsive layouts

Height

PixelLayer UI provides height utility classes to quickly set element heights in pixels, percentages, or viewport units. These classes are predefined and reusable. Simply apply the class to any block-level element to control its height.

Tips:

• .h-* → Sets element height

• .h-auto → Automatic height based on content

• .h-0, .h-25, .h-50, .h-75, .h-100 → Height in percentage

• .h-vh-* → Height in viewport height units (vh)

• Combine with width or padding utilities for flexible layouts

Overflow

PixelLayer UI provides overflow utility classes to control how content behaves when it exceeds the container. These classes work for both horizontal and vertical overflow, and can be applied to any block-level element.

Tips:

• .ov-* → Controls overall overflow

• .ovx-* → Controls horizontal overflow (overflow-x)

• .ovy-* → Controls vertical overflow (overflow-y)

• Use .ov-auto for scrollbars that appear automatically when needed.

• Combine with width, height, or max-height utilities for better effect.

Border Radius

PixelLayer UI provides border radius utility classes to quickly apply rounded corners to any element. You can use small, medium, large, full, or circular radii, as well as target individual corners. These classes are predefined and reusable.

Tips:

• .br-* → Sets overall border radius

• .br-t-*, .br-b-*, .br-l-*, .br-r-* → Sets top, bottom, left, right corners individually

• .br-tl-*, .br-tr-*, .br-bl-*, .br-br-* → Sets specific single corner radius

• .br-full → Fully rounded (pill)

• .br-circle → Perfect circle (works on square elements)

• Combine with background, width, height, and border utilities for stylish UI components

PixelLayer UI provides border radius utility classes to quickly apply rounded corners to any element. You can use small, medium, large, full, or circular radii, as well as target individual corners. These classes are predefined, reusable, and fully customizable via your Shopify app admin panel.

Tips:

• .br-* → Sets overall border radius

• .br-t-*, .br-b-*, .br-l-*, .br-r-* → Sets top, bottom, left, right corners individually

• .br-tl-*, .br-tr-*, .br-bl-*, .br-br-* → Sets specific single corner radius

• .br-full → Fully rounded (pill)

• .br-circle → Perfect circle (works on square elements)

• Combine with background, width, height, and border utilities for stylish UI components

Box Shadow

PixelLayer UI provides box shadow utility classes to quickly add depth and elevation to your elements. You can apply small, medium, or large shadows without writing custom CSS. These classes are predefined and reusable.

Tips:

• .sh-sm → Subtle small shadow

• .sh-md → Medium shadow for cards or panels

• .sh-lg → Large shadow for highlighted elements

• Combine with border radius, padding, and background utilities for modern UI components

Opacity

PixelLayer UI provides opacity utility classes to control the transparency of any element. You can apply opacity in 10% increments from fully transparent to fully opaque. These classes are predefined and reusable.

Tips:

• .op-* → Sets element opacity

• .op-0 → Fully transparent

• .op-50 → 50% opacity

• .op-100 → Fully opaque

• Combine with background, text, and shadow utilities for visual effects

z Index

PixelLayer UI provides z-index utility classes to control the stacking order of elements. You can bring elements forward or push them backward relative to other elements in your layout. These classes are predefined and reusable.

Tips:

• .z-* → Sets z-index value

• Lower numbers (0, 1) → Elements appear behind others

• Higher numbers (500, 999, z-max) → Elements appear on top

• Combine with position utilities (.dt-pos-*) to make stacking effective

Cursor

PixelLayer UI provides cursor utility classes to quickly change the mouse pointer style over any element. These classes make your UI more interactive and give users visual feedback without writing extra CSS.

Tips:

• .cur-* → Apply different cursor types

• .cur-pointer → Hand pointer for clickable elements

• .cur-default → Default arrow pointer

• .cur-move → Indicates draggable elements

• .cur-na → Shows element is not interactive

• .cur-text → Indicates text selection

Visibility

PixelLayer UI provides visibility utility classes to control whether an element is visible or hidden on the page. These classes are useful for toggling content without removing it from the DOM.

Tips:

• .vis-* → Sets element visibility

• .vis-visible → Element is fully visible

• .vis-hidden → Element is hidden but still occupies space

• .vis-collapse → Collapses the element (used mainly for table rows/columns)

• Combine with display, opacity, or z-index utilities for advanced UI effects

Object Fit

PixelLayer UI provides object-fit utility classes to control how images or videos fill their containers. These utilities make your media elements responsive and consistent without extra CSS.

Tips:

• .obj-* → Controls how media fits inside its container

• .obj-cover → Fills container and crops overflow (best for backgrounds)

• .obj-contain → Fits entire image inside container without cropping

• .obj-fill → Stretches image to fill the container

• Combine with width and height utilities for responsive layouts

List Style

PixelLayer UI provides list style utility classes to control how lists appear. You can change bullet types, numbering styles, and list positions without writing extra CSS. These classes work for <ul> and <ol> lists.

Tips:

• .lst-* → Sets the bullet or number style

• .lst-none → Removes bullets or numbers

• .lst-disc, .lst-circle, .lst-square → Different bullet styles for unordered lists

• .lst-decimal, .lst-lower, .lst-upper → Numbered lists with various styles

• .lst-in, .lst-out → Adjust list item position inside or outside the container

• Combine styles like .lst-disc-out or .lst-decimal-in for full control

Table

PixelLayer UI provides table utility classes to control layout, borders, row styles, and hover effects. Use these classes to quickly style tables in Shopify Dawn or WordPress projects without extra CSS.

Tips:

• .tbl-* → Controls table layout and borders

• .tbl-auto / .tbl-fixed → Auto or fixed table layout

• .tbl-b-0 / .tbl-b → Remove or add table borders

• .tbl-collapse / .tbl-separate → Control border collapse behavior

• .tbl-cell-b → Add borders to individual table cells

• .tbl-strip → Striped rows

• .tbl-hover → Row hover effect for better interactivity

Privacy Policy

Effective Date: [31st March 2026]

PixelLayer (“we”, “our”, “us”) respects your privacy. This Privacy Policy explains how we collect, use, and protect information when you use our Shopify app.

1. Information We Collect

• Shop Information: Store name, domain, and basic shop data required to run the app.
• Customization Data: Theme color settings, layout preferences, and container/padding adjustments.
• Usage Data: App usage metrics to improve functionality.

2. How We Use Information

• To provide and maintain the app’s functionality.
• To save your theme and layout settings.
• To communicate important updates or issues with the app.

3. Data Sharing

• We do not sell or share your personal information with third parties, except as required by law or Shopify platform needs.

4. Data Security

• We implement reasonable measures to protect your data from unauthorized access, alteration, or loss.

5. Your Choices

• You can delete your app data by uninstalling the app from your Shopify store.
• Contact us at [support email] for data removal requests.

6. Changes to This Policy

• We may update this Privacy Policy occasionally. We encourage you to review it periodically.

Contact Us

• Email: info@dharapixel.com
• Website: dharapixel.com