CSS Helpers

StepOne offers a comprehensive set of CSS helper classes that can greatly simplify your web development workflow and help you achieve consistent and visually appealing designs. These helper classes allow you to easily modify display properties, control margins and paddings, manage responsive visibility, set text and background colors, and more. Let's explore the CSS helpers provided by StepOne.

Display Utilities

StepOne provides a range of display utility classes that enable you to control the visibility and positioning of elements on your web page. These classes can be used to show or hide elements on specific screen sizes or toggle their display behavior.

• .d-none - Hides an element on all screen sizes.
• .d-block - Displays an element as a block-level element.
• .d-inline - Displays an element as an inline-level element.
• .d-inline-block - Displays an element as an inline-block element.
• .d-sm-none, .d-md-none, .d-lg-none, .d-xl-none - Hides an element on specific screen sizes.
• .d-sm-block, .d-md-block, .d-lg-block, .d-xl-block - Displays an element as a block-level element on specific screen sizes.

Margins and Paddings

StepOne includes classes for managing margins and paddings on elements. These classes provide predefined values for consistent spacing and help create visual separation between elements.

• .m-1, .m-2, .m-3, ... - Adds margin to an element with various predefined values.
• .p-1, .p-2, .p-3, ... - Adds padding to an element with various predefined values.
• .mx-auto - Centers an element horizontally by setting the left and right margins to auto.
• .my-auto - Centers an element vertically by setting the top and bottom margins to auto.

Responsive Visibility

StepOne offers classes to control the visibility of elements based on different screen sizes. These classes allow you to show or hide elements selectively, depending on the viewport width.

• .visible-sm, .visible-md, .visible-lg, .visible-xl - Makes an element visible on specific screen sizes.
• .hidden-sm, .hidden-md, .hidden-lg, .hidden-xl - Hides an element on specific screen sizes.

Text Colors

StepOne provides classes for setting text colors. These classes can be used to quickly apply predefined text colors to elements.

• .text-primary - Sets the text color to the primary color defined by StepOne.
• .text-secondary - Sets the text color to the secondary color defined by StepOne.
• .text-success, .text-info, .text-warning, .text-danger - Sets the text color to specific predefined colors.

Background Colors

StepOne also includes classes for setting background colors. These classes allow you to easily apply predefined background colors to elements.

• .bg-primary - Sets the background color to the primary color defined by StepOne.
• .bg-secondary - Sets the background color to the secondary color defined by StepOne.
• .bg-success, .bg-info, .bg-warning, .bg-danger - Sets the background color to specific predefined colors.

These CSS helper classes provided by StepOne can significantly streamline your development process and help you achieve consistent and visually appealing designs. By utilizing these classes, you can easily control the display behavior, manage spacing, adjust responsive visibility, and apply text and background colors to elements on your web pages.