# Starter 2.0
Starter 2.0 is a starter theme within the Shoprenter system, specifically developed for partners creating unique designs. Developers have the opportunity to fully customize the theme.
# CSS Structure
The theme optimally loads CSS files to minimize page load times and enhance user experience.
CSS files are loaded only when necessary for the specific page or functionality.
In general, we strive to load only those CSS files that are actually used in different parts of the application, with a few exceptions. These exceptions include fundamental style files and third-party CSS files essential for page rendering and proper functionality.
- base.css: Contains fundamental base styles and formatting essential for structuring the page and overall appearance.
- header.css and footer.css: Contains styling for the header and footer.
- product-card.css: Includes styling for product cards.
- Third-party CSS files: In some cases, we use third-party styles necessary for certain functionalities or components.
CSS files are located in the assets folder and can be modified using the theme file editor.
CSS files are loaded in TPLs using the stylesheet_tag filter. Example:
base.css
# CSS Variables
General CSS properties (e.g., gap, gutter) are defined in base.css, while colors are set in pagehead.tpl. Here's an example of adding a general rule:
:root {
--custom-property: red;
}
usage:
body {
color: var(--custom-property);
}
# Utility classes (Bootstrap 4)
In the base.css file, the most essential Bootstrap 4 utility classes and variables are included, offering convenient options for layout, alignment, visibility, and text styling. These foundational elements cover responsive containers, grid layouts, button styles, display utilities, flex alignment, positioning, text colors, table styling, animations, and form validation. Variables such as colors, font settings, spacing, and breakpoints enhance flexibility, allowing consistent design adjustments across components.
The Bootstrap 4 utility classes, helper rules, and variables are primarily located within the first ~2000 lines of the base.css file. This section includes a range of utility classes that standardize responsive design across the website, covering essential needs without the complete set of Bootstrap 4 utilities. By including only core, frequently used helper classes, this setup streamlines development, providing quick styling solutions without additional custom CSS.
Here is a list of the most essential Bootstrap 4 utility classes found in the base.css file:
| Buttons: | .btn, .btn-primary, .btn-secondary, .btn-danger, .btn-link, .btn-lg, .btn-sm |
| Grid System: | .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .row, .col, .col-auto, .col-1 through .col-12 |
| Display Utilities: | .d-none, .d-inline, .d-inline-block, .d-block, .d-flex, .d-inline-flex, .d-xxl-grid, .d-xxl-inline-grid, .d-xxl-table, .d-xxl-table-row, .d-xxl-table-cell, .d-xxl-flex, .d-xxl-inline-flex |
| Flexbox and Alignment: | .flex-row, .flex-column, .flex-wrap, .flex-nowrap, .justify-content-start, .justify-content-end, .justify-content-center, .justify-content-between, .align-items-start, .align-items-end, .align-items-center, .align-self-start, .align-self-end, .align-self-center |
| Positioning: | .position-relative, .position-absolute, .position-fixed |
| Text Alignment and Colors: | .text-start, .text-center, .text-end, .text-primary, .text-secondary, .text-success, .text-info, .text-warning, .text-danger, .text-muted |
| Sizing Utilities: | .w-100, .h-100 |
| Tables: | .table, .table-bordered, .table-hover, .table-responsive, .table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl, .table-responsive-xxl, .table-sm |
| Animation: | .fade |
| Validation: | .was-validated, .is-valid, .is-invalid |
# Images
Images in the theme are handled using image_tag or image_url filters. Below-the-fold images are always equipped with the loading="lazy" attribute.
# Featured TPL Files
# pagehead.tpl (common/pagehead.tpl)
Contains the opening <head> and <body> elements, where meta tags and scripts are placed.
# content_for_header
It's mandatory to provide this variable in pagehead.tpl; the system won't function without it.
It should be placed between the opening <head> and closing </head> tags.
This variable includes essential ShopRenter scripts required for the system to operate.
# Colors
Colors are injected into the document via CSS variables using the :root pseudo-class, defined in the config.data.json file. This allows colors to be used at both tpl and css levels. Ensuring proper color contrast is achieved using the color_contrast filter.
# Fonts
Fonts are loaded through the snippets/fonts.tpl file using @font-face rules, which are then applied to the body element in base.css. By default, fonts hosted on our own server are used.
# Snippets
In our theme system, "snippets" are reusable code blocks that help streamline design and functionality across the site. Most snippets include SVG elements, but they can also contain dynamic reusable code.
Here’s an example of how to use a snippet:
{% include "snippets/icon_arrow.tpl" with {direction: 'down', width: '8', height: '8'} %}
In this example, the icon_arrow.tpl file is included, passing the direction, width, and height variables to the snippet, allowing for customization.
The Twig include tag allows you to pull in any other Twig template, enabling modularization and reuse of code. For more details and examples, you can visit the Twig documentation on the include tag.
# header.tpl (sections/header.tpl)
Handles the display and functionality of the header dynamic module. Includes:
- Phone number, email address
- Header links
- Language switcher and currency switcher modules
- Hamburger/mobile menu
- Logo
- Search module
- Wishlist module
- Login link
- Cart module
- Category module
The logo within the dynamic module appears exclusively in the header. In the admin interface, the general settings logo appears in all other cases (e.g., order confirmation emails).
# footer_scripts.tpl (common/footer_scripts.tpl)
Handles the loading of JS files specific to the theme. JavaScript codes within this file are inserted just before the closing </body> tag of the document in the layout/base.tpl file using the include twig tag.
# 3rd Party Solutions
Third-party tools are hosted on our own server and loaded using the script_tag filter.