ⓘ Mini for Blocs
Mini-One is a modern, responsive one-page layout designed for clear and focused navigation.
The page is divided into four sections, all structured in the same way but with different content.
Navigation is handled by a custom one-page menu created with Blocs. Each menu button links to an anchor ID within the page, so clicking a button smoothly scrolls to the corresponding section.
Project setting:
Global Areas: Upper and Lower Areas Disabled. Web-fonts: Body Lato Regular / Titles Lato-Light. Width: 1140px + custom CSS for page section
ⓘ Classes naming
✓ Class prefixes:
Using prefixes in class names is useful because it makes text search easier.
✓ mini Prefix:
All manually created classes used in the pages have the prefix 'mini-', which distinguishes them from classes automatically generated by Blocs.
≡ Nav classes naming:
All custom navigation classes used in the pages have the prefix 'mini-nav-'.
✓ Page and Sidebar classes naming:
All custom classes that are used in pages have the prefix ‘mini-sidebar-‘ & ‘mini-page-‘
Sidebar Classes
mini-sidebar
Fixed position; flex on desktop, block on mobile.
This class also handles the sidebar width (210px) on desktop.
mini-sidebar-logo
Position and size of the logo
mini-sidebar-bottom-icons-box
Size and color of the navigation buttons
mini-sidebar-bottom-icons
Navigation icon size and color.
Page Classes
mini-page-max-width
Maximum width of the page (since the parent block is set to full width).
This class also handles the left spacing for the sidebar (210px) on desktop.
mini-page-style
Page style and background color
mini-page-title-icon-style
Icons displayed at the top of each section.
≡ Navigation Classes
Navigation Style
mini-nav-menu
Size and position; values change from desktop to mobile.
mini-nav-button-style
Button style: corners and colors for the Normal, Hover, and Active states.
mini-nav-button-style.active
Button with the same style as 'mini-nav-button-style / Active'.
⚠ Note:
.active is related to the script in Mini to highlight the current target on the screen
Responsive navigation
mini-nav-toggle-button-style
Trigger icon in a fixed position, including style and colors.
Note: The trigger button is visible only on tablets and phones.
mini-nav-toogle-hide / #mini-menu-show-hide
Controls the visibility of the button list using a visibility class.
⚠ To display the buttons group, select this class and change 'display: none' to 'block'. After making your changes, remember to change 'display: none' back to ensure the button drop-down menu works properly.
mini-nav-toogle-show
Toggle class used to show the button menu.
Value from ‘none’ to ‘block’, related to the ID #mini-menu-show-hide
Adding a new target section: To add a new section, and make the buttons colours correctly duplicate the existing elements, then clean up and rename all corresponding IDs and classes so they can be uniquely identified.
⚠︎ Keep in mind
⚠︎ Locked Classes
Some classes are locked because modifying them is not recommended. If you choose to edit them, be aware and do so at your own risk.
⚠︎ Required Classes
Remember that all classes made of multiple parts, like .class a or .class.active, are visible in the class list but aren’t directly attached to any single element. These classes are required, even if they appear as "0" in the list.
ⓘ Editing Classes across layouts
When editing a class, it’s important to check its settings in all four layouts (desktop, laptop, tablet, and phone), because a class can have different properties in different layouts. It often happens with padding, margin, and sizes; it can also be used for visibility classes, to show or hide elements (Visibility toggle options)
✎ Testing Class edits safely
If you’re unsure about modifying classes, make progressive copies of the project so you can always revert to a correct version.