Front-end technology stack for Hugo websites

About technical debt

A rock solid technological foundation is crucial for the long-term success of a digital agency and its clients. Vamudo believes in zero technical debt, meaning that we do not take technical shortcuts to make short-term gains. As it appears, technical debt will always come back to haunt you in multifold, in the form of bugs or security problems. Addressing these issues down the road limits your future capacity to maintain product quality, attend to new clients with full focus and adequately support existing clients. Technical debt is a very common pitfall in the field of technology. It also hinders transparency, because it is clearly not something worth advertising. Transparency is one of Vamudo’s core values. It forces us to always maintain the highest quality standards, which directly adds value to our products. Moreover, it helps our clients make informed decisions about the suitability of our solutions for their situation. One thing is certain when you choose to build with Vamudo: it will be crystal clear what you can expect. And what you can expect is a modern, top quality website.

Bootstrap

Vamudo utilizes Bootstrap, a popular front-end toolkit, to compose the pages of Hugo websites. Bootstrap provides a comprehensive collection of CSS and JavaScript components, layouts, and utilities, streamlining the development process and ensuring consistent design patterns across the site. With Bootstrap, developers can quickly prototype and build responsive, mobile-first websites with minimal effort. It offers a flexible grid system, responsive typography, form controls, navigation components, and much more, significantly reducing development time and effort. To ensure seamless integration of Bootstrap in every Hugo website, Vamudo leverages the gohugoio/hugo-mod-bootstrap-scss Hugo module. This module packages the Bootstrap SCSS and JavaScript source, so it can be utilized within Hugo projects. A major advantage of this approach is that it allows you to include only the parts of Bootstrap that are needed in a project, instead of the entire Bootstrap library. That minimizes the ‘project bloat’, which means that only the essential dependencies are bundled with your website. As a result, the footprint Vamudo’s Hugo websites remains small and the loading times will be as fast as possible.

Sassy styles

On top of Bootstrap, Vamudo adopts its own SASS layer. SASS (Syntactically Awesome Style Sheets) is a powerful CSS (Cascading Stylesheets) preprocessor that introduces a range of features and enhancements to the standard CSS syntax. SASS provides a myriad of advantages over plain CSS. It offers variables, enabling the reuse of values throughout the style sheets and facilitating easy theming and customization. Mixins allow the creation of reusable blocks of code, reducing redundancy and improving maintainability. Nesting simplifies the CSS structure, making it more readable and intuitive. Additionally, SASS supports functions, operators, and control directives, enabling complex calculations and dynamic styling. These features collectively empower developers to write cleaner, more modular, and scalable stylesheets. Vamudo harnesses the power of Hugo Pipes, which transpiles SCSS to CSS and bundles ECMAScript modules. This integration simplifies the development workflow, allowing for efficient styling and scripting of Hugo websites.

Wrapping Bootstrap components with SASS

Vamudo extends Bootstrap components by wrapping them in their project’s SASS code using the @extends keyword. This approach enables us to customize the appearance and behavior of Bootstrap components to align with specific design requirements. Unfortunately, certain components, like the dropdown, still require the inclusion of Bootstrap CSS classes in the HTML templates due to tight coupling of Bootstrap JavaScript components with CSS classes. It would perhaps have been more elegant if Bootstrap coupled its JavaScript components to HTML data attributes. This is the approach Vamudo uses to bind JavaScript behavior to HTML elements.

Dynamic styling with SASS as Go Templates

Vamudo takes advantage of the flexibility provided by Hugo’s capabilities by executing SCSS files as Go Templates. This enables theme settings, such as colors and fonts, managed through the website’s content management system and stored in Hugo site data, to be injected into SCSS files as SASS variables. These variables override SASS and CSS variables used by Bootstrap, facilitating highly flexible theming and customization.

Opinionated atomic design methodology

Vamudo uses its own loose interpretation of the atomic design methodology. The page level styles are not so much used to reflect the highest level of design fidelity, but rather to define high level variations in templates between types of pages, like the homepage versus a blog post. In Vamudo’s opinion the template level has no practical use beyond design systems and wireframing. The template level is applied to stitch groups of organisms together on the level of sections within a page, as opposed to entire pages. The organism level is used as intended: to join molecules together to form a relatively complex, distinct section of an interface. Atoms and molecules are also used as intended. Atoms are defined for basic building blocks for elements that extend the smallest html elements or bootstrap components to the slightest extent. Molecules are used to define groups of atoms bonded together. The gap between the molecule and organism level can become quite big in some situations. Therefore, Vamudo added the cell level between the molecule and organism level to provide more flexibility to organize SASS code for complex organisms.

BEM methodology within atomic design:

Within the atomic design methodology, Vamudo incorporates the BEM (Block-Element-Modifier) methodology for CSS. BEM promotes a naming convention that helps create clear, maintainable, and reusable styles. Blocks represent independent, self-contained components, elements are nested within blocks, and modifiers alter the appearance or behavior of blocks or elements in different contexts. By combining BEM with atomic design, Vamudo ensures a structured and scalable approach to CSS development.

Conclusion

Vamudo’s adoption of modern front-end technologies, such as Hugo, Bootstrap, SASS, and ECMAScript modules, coupled with their opinionated implementation of the atomic design methodology, sets the stage for highly optimized, flexible, and future-proof websites. By harnessing the power of SASS, developers can leverage advanced features to increase productivity and produce maintainable code. Bootstrap supercharges the development process from the core, offering a comprehensive toolkit of components and utilities to build upon. Vamudo’s integration of Hugo, SASS, ECMAScript modules with DecapCMS enables dynamic theming and customization. With meticulous attention to detail and the application of methodologies like BEM and atomic design, Vamudo delivers exceptional code quality, resulting in visually stunning, future-proof websites that provide outstanding user experiences.