Styling (CSS, Sass and Bootstrap)

Introduction

In 2shine, styling is made flexible and customizable, allowing developers to tailor the framework to fit specific design needs. There are two primary approaches for styling: using CSS variables for straightforward customization and leveraging Sass for more advanced, precompiled adjustments.

The first method, using CSS variables, is ideal for quick, dynamic changes that can be applied directly in the browser. This allows you to adjust key design elements like colors, typography, and component styles without needing to recompile your stylesheets. It's a fast and efficient way to modify Bootstrap's default appearance, whether you're working on individual elements or creating a consistent theme.

For more complex, project-specific customizations, Sass offers a deeper level of flexibility. It allows for the use of functions, mixins, and nesting, enabling advanced modifications before your CSS is compiled. This method is particularly useful when you need to tweak grid systems, spacing, or component behaviors that go beyond the capabilities of CSS variables.

This documentation will guide you through both approaches, helping you understand when to use each based on your customization needs. Whether you're looking for quick tweaks or comprehensive design overhauls, 2shine makes it easy to achieve the perfect look and feel.

CSS Variables

Over time, CSS variables have become significantly more powerful, allowing for greater flexibility and dynamic styling directly in the browser. Unlike Sass variables, which require recompilation, CSS variables can be modified at runtime without any build process. This makes it ideal for adapting design aspects like colors, fonts, border radii, and shadows in real-time, as demonstrated in the "Get Started" section.

When to Use CSS Variables

Bootstrap provides a set of predefined CSS variables for easy customization and theming. Since they are standard CSS, they don't require recompilation like Sass variables, making it quick and flexible to apply changes directly in the browser.

Use Bootstrap CSS variables when:

• You want to modify Bootstrap’s default styles without changing source files.
• You need a consistent design system using Bootstrap’s built-in theming features.
• You want to customize elements like colors, typography, spacing, or other component styles using simple CSS.

Sass Variables

Sass variables are more advanced than CSS variables, offering the ability to use nesting, functions, mixins, and complex operations. In Bootstrap, Sass variables allow for deeper customization of the framework, particularly before the CSS is compiled. This is useful for adjusting grid systems, spacing, and component-specific styles. However, changes made with Sass variables require recompilation to take effect.

When to Use Sass Variables

If a variable is not available in theme.css and cannot be customized with CSS variables, you can override Sass variables directly in the _custom-variables.scss file.

Use Sass variables when:

• You need to create custom styles that are not covered by CSS variables.
• You want to maintain DRY (Don't Repeat Yourself) principles by reusing values throughout your custom styles.
• You need to manage design tokens and other reusable values specific to your project.

TIP: Create your logic in Sass/Scss, but keep defined variables inside theme.css. This approach lets you use Sass without having to recompile when chaning the css variable.

Files and Purpose

For further customization, or things that don't support CSS variables, you can find various stylesheets in the src/scss folder.

1. _custom-variables.scss -> This file takes all your custom variables to overwrite existing ones.
2. _custom-pages.scss -> This file is can be used for defining page-specific customizations.
3. /components/*-> Contains styling configurations for various individual UI elements and functional components.
4. /layouts/*-> Contains all the different layout variations.
5. /modules/* -> Contains the DNNCentric Contact Form styles.

Usage

If you want to change a variable, first try to change it in theme.css. If the variable isn't defined there and there is no Bootstrap variable that can be accessed, make use of the _custom-variables.scss file. There you can directly override existing Sass variables or create your own.

Utils Folder

The utils folder contains utility styles that are meant to enhance and optimize the typography, and media-specific customizations. These utilities provide support for common styling tasks that don't necessarily belong to a specific component or layout but are essential for consistent, cross-site behavior.

Files in this folder:

• _print.scss – Styles for print media.
• _typography.scss – Global typography and text-related styling.

Layouts Folder

The layouts folder contains styling configurations for all the page layouts. Each layout file defines specific styling rules that apply to the specific layout. These layouts are adaptable to various themes or page designs and can be customized as needed.

Files in this folder:

• _layout-centered.scss – Defines the layout for a centered design, with customizations for the header, main content, and footer.
• _layout-default.scss – Contains the default layout styles, including margins, widths, and background settings for the main page elements.
• _layout-floatwideheader.scss – Customizes a layout with a wide, floating header and adjusted positioning for page elements.
• _layout-fullscreen.scss – Provides styles for a fullscreen layout, adjusting element widths and padding.
• _layout-header.scss – Contains styles for different header variations, such as left-aligned, centered, and other custom header positioning.
• _layout-landingpage.scss – Defines a layout specifically for landing page designs, including a fixed navigation bar and custom background handling.

Components Folder

The components folder contains styling configurations for various individual UI elements and functional components. These files focus on specific sections of the website, offering customization options for common features like the navigation, footer, breadcrumbs, and more. Each file within this folder provides targeted adjustments to elements across the layout.

Files in this folder:

• _base-layout.scss - Defines the foundational layout styles for the page structure
• _dnn-override.scss - DO NOT CHANGE THIS FILE: Contains overrides for DNN (DotNetNuke) components, third-party plugins, and modules.
• _fancybox.scss - Overrides default styles for the Fancybox plugin, used for lightbox functionality on the site.
• _footer.scss - Styles the footer element and its components.
• _nav-breadcrumb.scss - Defines the breadcrumb navigation's appearance and behavior.
• _nav-language.scss - Styles the language switcher navigation in the header.
• _nav-mobile-to-top.scss - Defines the behavior and styling for the "Back to Top" button, which appears when users scroll down the page.
• _nav.scss - Customizes the navigation bar styles, including both the main navigation and dropdowns.

Modules Folder

The modules folder contains the DNNCentric Contact Form styles.

Files in this folder:

• _dnncentric.scss – Contains all CSS rules for styling the DNNCentric Contact Form, including form fields, error messages, buttons, and responsive adjustments for smaller screens.

Themes like Light and Dark

2shine is not designed for multiple themes by default; however, you can implement theme support yourself using Bootstrap's theming features.

👉https://getbootstrap.com/docs/5.3/customize/color-modes/