Linear for Blocs
Linear-One is a modern, responsive one-page layout designed for clear and focused navigation
The page has five sections, each structured similarly but with different content.
Navigation uses a custom one-page menu built with Blocs. Each menu button links to a section ID for smooth scrolling. Each section has a unique visual style, with custom backgrounds, dynamic boxes, and colors matching the menu icons.
❖ Linear Core Script: Widget in footer with special classes and custom smooth scrolling in JS
☰ Navigation; In a single-page site the nav is created manually, each icon or button has a link that leads to a unique ID. The ID target is on top of each sections #target-1 ,2 ,3 ,4 ,5
︙Project pages: Single page site + Privacy page (link in the cookie panel and in the footer text)
ⓘ Classes naming
✓ Class prefixes
Using prefixes makes it easier to find and organize classes.
✓ Linear Prefix
All manually created classes use the prefix 'linear-‘ to separate them from Blocs-generated classes.
≡ Nav classes naming:
All custom classes that are used in pages have the prefix 'linear-nav-'
≡ ↕︎ Nav (in page) Vertical line classes naming:
All custom classes that are used in pages have the prefix 'vertical-line-'
'Linear-' classes: You may find more classes with prefix 'linear-' in your project, with logical names that make it easy to understand their purpose.
≡ Nav Classes
linear-nav-main-box
Fixed position keeps the menu at the top.
linear-nav-responsive-trigger-icon-style
Top position and menu icon style.
Note: This is the link to open the menu to ID ‘menu-toggle’
Target IDs: ‘menu-toggle’
Class: ‘linear-nav-toggle-show’
linear-nav-toggle-hide
Hide the buttons menu
Note: This class is related to the trigger and ‘linear-nav-toggle-show’
Required for the responsive button menu. To edit the internal element, you must temporarily disable the option: Display 'None'.
linear-nav-toggle-show
Class available only in the classes list, related to the trigger above
linear-nav-buttons-position
Position buttons container on top left side
Note: this is inside the class ‘linear-nav-toggle-hide’ and is not visible by default
linear-nav-button-style
Position and style buttons inside the ‘linear-nav-buttons-position’
≡ ↕︎ Nav Vertical Line Classes
Setting for all lines (size and position):
vertical-line-position
Right-side position
vertical-line-size
Size and distance from right edge
vertical-line-icon-box
Icon box size
vertical-line-icon
Icon size and white color
____________________________________________________
Setting for individual line and icons color (for each target section):
vertical-line-target-1-color, 2, 3, 4, 5
Line colors per section
vertical-line-target-1-icon-bg-and-distance, 2, 3, 4, 5
Icon background color and vertical position from the top edge based on the position of the icons in the fixed menu.
Adding a new target section: To add a new section, you need to duplicate the existing elements, then clean up and rename all corresponding classes so they can be uniquely identified.
ⓘ General Classes
posiiton-relative
Position value used on a parent element so that child elements with position: absolute are positioned relative to that parent, instead of the entire page.
position-absolute
Position value that positions an element relative to nearest positioned parent.
overflow-hidden
Utility that hides content outside container boundaries.
z-index-0
Sets stacking order to 0. Elements with higher values (z-index: 1, 2, 3, etc.) appear in front of elements with lower values.
⚠︎ Note: Custom classes: There can also be additional custom classes, usually with clear and logical names that make their purpose easy to understand.
ⓘ Blocs Classes
cc-link & cc-btn
Cookie Consent - Bric Buttons Style
scrollToTop & scroll-to-top-btn-icon
Back to Top - Buttons Style
dropdown-menu
Background and border style
modal-content +modal-backdrop.show
Edit styles & Lightbox Overlay color and opacity
scrollToTop + scroll-to-top-btn-icon
Back to top Button Style
⚠︎ Note: These classes are active, even if they appear as "0" in the list.
Extra Classes
CSS in 'Linear Core Script', options beyond standard classes.
a:focus
Remove Gray Highlight first link Safari in modal window
page-container
In some cases it is required for the parent DIV of a Sticky element
⚠︎ 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
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 4 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.