Sitefinity & Bootstrap
With newer releases of Sitefinity that have come out recently, Sitefinity has integrated with Bootstrap to make styling simpler and allow for better control over the mobile experience.
Many clients ask for Bootstrap, but what exactly is Bootstrap? According to Bootstrap themselves, it is: “The most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.”
Bootstrap is a jumping off point, where developers can have a blueprint of already established rules for things such as: a grid (columns), buttons, forms, navigation, links, and much more. This allows developers to be consistent with how they write code and ultimately how your site renders from desktop to mobile (or should I say vice versa with the mobile first approach, more on that later).
Think of your website as a house. When you buy a new house, you wouldn’t expect to see insulation sticking out of the walls, nails protruding from the floors, or a roof with no shingles. Much like a house, Bootstrap considers a site to have a “prefabricated” look and feel and automatically remedies areas of your website from looking “un-styled.”
The Grid System
One of the most appealing things about Bootstrap is the grid system. This is the system that breaks up content into rows and columns with an emphasis of rearranging those columns to wrap and stack vertically on smaller screens. With using Bootstrap’s comprehensive grid system, developers can know exactly when certain columns collapse into rows once they are rendered on small screens (like mobile devices). The grid system also makes spacing in between columns consistent across the site, allowing for flexibility when certain areas need different spacing in special circumstances.
Bootstrap relies on the “mobile first” approach, meaning that developers set the column width / margins based on the mobile experience first, then it scales up to accommodate larger devices. A significant amount of users use phones to view content, and thus developers and designers need to be more conscientious on how to display content in an understandable way for small screens as well as larger ones.
Content, Typography, and Spacing
In addition to the grid system, Bootstrap also styles the basic elements of a website. For example, instead of images not resizing and staying the same size regardless of your browser size, it will automatically make the image shrink to fit the available space. It also considers spacing and margin for the headings and paragraphs. The other areas that pre-styled are lists, blockquotes, tables, and link styling.
Bootstrap also includes simple class names to be able to include consistent margin and padding throughout the site. For instance, if you wanted a header to not have a bottom margin (which usually consists of bottom margin), you would add the class of “mb-0” to it. This is something that seems daunting at first, but once you get used to their naming conventions, it’s straight forward and easy to remember.
Components
Bootstrap comes with built in CSS & Javascript that lets developers easily create certain components to enrich the user experience of the website. Think of a component as a call out block or an accordion that expands/collapses on click. With a preset structure in place, building these controls are much more efficient. Examples include carousels, modals, alerts, and popovers.
In conclusion, with its robust mobile compatibility capabilities, Bootstrap is a standard framework utilized by many developers today. Used on 18 million websites worldwide, it’s the first choice for developers and it can help bring consistency to your website. If you are interested in learning the complexities of the Bootstrap framework, information can be found here. Or, you can reach out to your Vanguard Client Services Manager for more information on Bootstrap and your website.