Ascent for Blocs
Start building fast, beautiful and modern websites with Ascent
❖ Ascent Core Scripts: HTML footer widgets with special classes for navigation and more
︙Extra pages: Terms (link in footer) + Privacy page (link in the cookie panel and footer)
Ascent Core Widget
The Ascent Line & Cursor Widget adds interactive visual effects to links across the site.
- Displays an animated underline on menu links when hovered, improving navigation feedback.
- Text class to displays an animated underline on text links when hovered.
- Add custom SVG cursor on images or DIV (on desktop )
Menu Widget
⚠︎ This is a widget provided separately, as some of its features may be included in the core program by default in the future.
The Dropdown Navigation Widget improves site navigation:
- Automatically opens submenus when you hover your mouse over the desktop navigation
- Highlights the current page in the parent menu for easy navigation (using the project class nav-active-link)
- Opens sub-menus on mobile when the current page is loaded.
Classes naming
Class prefixes
Using prefixes makes it easier to find and organize classes.
Prefix classes
All manually created classes use the prefix ‘ascent-‘ to separate them from Blocs-generated classes.
Nav classes naming:
All custom classes that are used in pages have the prefix ‘ascent-nav-'
Standard Nav Classes
Desktop Navigation
nav-link
Standard color, set color (normal & Hover) only here to keep link active color properly.
navbar-nav li a
Large font size on desktop, medium size on mobile
ⓘ Class manages also by Project Settings/Typography/Navigation Link
nav .dropdown-menu a.nav-link
Second-level links style and color
nav .dropdown-menu
Responsive menu styling
Footer Navigation
Inherit colors from the desktop Navigation (nav-link)
ascent-footer-menu, ascent-footer-menu a, ascent-footer-menu .nav-active-link (active link)
ascent-footer-menu-show-phone show menu also on the phone.
Nav Classes
ascent-nav-main-setting
Layout is set to absolute on desktop and fixed on mobile
ascent-nav-style
Standard style on desktop, with a dark background on mobile
ascent-nav-toggle-button, ascent-nav-toggle-button-text
Button-style ‘menu' next to the responsive menu toggle icon
ascent-nav-side-logo + ascent-nav-side-icon
Logo style and phone/email icons styling
nav-active-link
Active link color in Main navigation and footer (ascent-footer-menu)
Use the same color as nav-link:hover color
ⓘ Class manages in Project Settings/Active Link Class
Ascent Classes
ascent-overlay, ascent-overlay-screen-white-opacity-80
Adds a semi-transparent overlay to some image elements on the page
ascent-header, ascent-header-bottom-gradient-dark, ascent-header-..etc
Styling the hero header and its internal contents
ascent-titles, ascent-titles-slider
Header and banner text styles
ascent-footer-menu, ascent-footer-text a
Footer text and links
ascent-footer-menu .nav-active-link
ascent-chart-box, ascent-chart-style, ascent-chart-image-a, b, c etc
Animated charts in About page
ascent-modal-style-and-width (80% /1200px)
Set to ‘Fill Screen’ by default. Use CSS to override with your own value. Different layouts can have different max widths.
____________________________________________________
Some examples of classes dedicated to pages or brics with logical names
ascent-multi-tab-button
ascent-box-button-video-loop
ascent-hover-scale
ascent-box-button-br-pointer-events-none
ascent-svg-fill-white
ascent-box-white
ascent-rounded-corners-5
ascent-anim-divider-style-2_right/right
ascent-avatar-circle-absolute
ascent-absolute-top
ascent-box-sidebar-author
ascent-divider-style-page-with-sidebar
ascent-about-page-left-loop-video
ascent-box-button-video-loop
ascent-box-button-br-pointer-events-none
………..
General Classes
position-relative
Position value applied to 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 class that hides content outside the 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: Additional custom classes may also be present, typically with clear and logical names that make their purpose easy to understand.
ⓘ Blocs Classes
⨁ nav-active-link, navbar-nav li a, nav .dropdown-menu, nav .dropdown-menu a.nav-link etc
Standard navigation and responsive menu
⨁ 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, 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 may show a value of "0" in the list.
Classes beyond the Blocs standard with PRO Classes
CSS in ‘Ascent Core Script’, advanced CSS code with manual settings to offer custom creative solutions.
💎 Pro Class ascent-cursor-search
Custom SVG cursors for images and div with CSS Media queries to show SVG only on desktop (>1025px)
💎 Pro Class ascent-nav-linehover
CSS for animating line in navigation menu with 2 styles for first and second level on desktop.
💎 Pro class ascent-linehover
Animated line hover multi-line Links for column, text box, or individual title link. It works even when a link spans across multiple lines of text. Underline only on text links, skipping links with images or icons.
⚙️ 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
⚠︎ Note: These classes in Blocs do not contain any settings, their code is stored in the script.
⚠️ 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.
6
