This page showcases and documents the use of Vanilla framework to build a brochure site.
All the sections of the page should be implemented using one of the grid layouts demonstrated below. By default all content should be inside the containers that use 25% of the full width (3 columns out of 12 column grid on large screens) or multiplication of it.
The grid layout should also be responsive, making sure that relative size is preserved on medium screen as much as possible (for details check the individual documentation of each split). On small screens all columns should take whole width of the page and appear in sequence (as by default Vanilla behaviour).
In the sections below we demonstrate how to implement the available layouts using standard Vanilla grid.
Use 50/50 split for standard section with a heading and some content.
The 50/50 split should be preserved on large and medium screen sizes.
For enterprices to cover their Ubuntu estate - servers and workstations.
See Ubuntu Pro pricing
Anyone can use Ubuntu Pro for free on up to 5 machines, or 50 if you are an officialUbuntu Community member.
If you were an active customer before January 26th, 2023 you can try Ubuntu Pro for up to 1 year - until the end of your current contract. At the end of the trial, you can choose to upgrade to full Pro (at extra cost), or remain with your current plan.
Use 25/25/50 split on section with 3 columns where 2 columns have less content than the last large column.
On medium screens it becomes 2 rows of 50/50 + 100 split.
To achieve that use row--25-25-50 class name on the row and col on the column.
Derry Cheng
Product Manager for Compute Engine
“For the last decade, Google has partnered with Canonical to promote the adoption of open-source software.
By offering Ubuntu Pro on Google Compute Engine, together we help customers enhance the security and compliance for their production workloads.”
Robert Huber
Chief Security Officer
“Tenable and Canonical collaborate to provide timely, accurate and actionable vulnerability alerts.
Ubuntu Pro offers security patch assurance for a broad spectrum of open-source software. Together, we give customers a foundation for the trustworthy open source. ”
Use 25/75 split on sections with narrow first column (usually a heading) followed by large content area that isn't split into smaller columns.
On medium screens the 25/75 split is adjusted to be 33/66 (2 columns and 4 columns)
On small screens it becomes 2 rows of 100 + 100 split.
To achieve that use row--25-75 class name on the row and col on the columns.
Our mission
Join an intense global mission - to deliver the world's best open source experience, from platform to platform.
Use the 25/75 split on large screens for sections with a narrow first column (usually a heading), followed by a large content area that can be split into smaller nested grid if needed.
On medium and small screens, columns will be stacked.
To achieve that, use the row--25-75-on-large class name on the row and col on the columns.
The future is already here, as open source. Canonical delivers it to the world. We play a critical role in broadening the benefits of open source to more people and more industries than ever before. This means bringing new work opportunities to people regardless of their location too.
Use (25)/75 split with offset when first column is empty and the rest of the content is to be aligned with other 75% section of the page.
To achieve that use row--25-75 class name and only one col child.
Use 25/25/25/25 for a section with 4 columns split.
On medium screens it becomes 2 rows of 50/50 + 50/50 split.
To achieve that use row--25-25-25-25 on the row and col class names on all the columns.
