https://designsystemchecklist.com/

Duet provides a set of organized tools, patterns and practices that work as the foundation for LocalTapiola and Turva digital products and experiences.
Follow these practical guides to get started designing and developing experiences for LocalTapiola and Turva.
Read the latest updates from Duet’s core team. Here we’ll highlight every month new features and progress from Duet.

Welcome to the Playground
Font Families
body
The quick brown fox jumps over the lazy dog.
‘avenir next’, avenir, helvetica, arial, sans-serif
Type Scale
Heading 1H1
Heading 2H2
Heading 3H3
Heading 4H4
Heading 5H5
Heading 6H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas accumsan lacus vel facilisis. Massa tincidunt dui ut ornare. Amet nisl purus in mollis nunc sed id. Auctor augue mauris augue neque gravida in fermentum. Ut morbi tincidunt augue interdum velit euismod in pellentesque massa. Mattis molestie a iaculis at erat pellentesque adipiscing commodo.

In our recent article ‘What are design systems and why do you need one?‘ we talked about how to differentiate with your USP to help increase your ROI from your in-house digital teams.
We discussed how implementing a good design system can help to improve your team’s efficiency while at the same time maintaining or improving user experience.
And we explained how this can be achieved by ensuring your product developers have the right elements in place, they understand which rationale to apply and what assets they can use.
In this follow-up article, we aim to discuss the next step of how to successfully implement and manage your design system.
Demonstrate the problem-solving solutions
Your design system may need some drastic or costly changes made to bring it on board. For this reason, you may need to seek approval from your shareholders or investors to be able to fund the implementation.
In these cases, it is sensible to write up a strategy with a proposal that you can deliver to those who hold your company purse-strings. You need to be able to justify the value of your design system.
The main aim of your proposal is to clearly demonstrate how your new design system will help to solve a major (or a few minor) problems within your current system.
Focus on your key pain points where people waste a lot of time performing routine operations or repeated actions that your design system can resolve or drastically reduce.
Demonstrating how this new design system can save the company a lot of time and boost productivity levels to improve the company’s bottom-line can be a convincing pitch. At the end of the day, enabling cost-savings and increased profitability means higher dividends for shareholders.

Building bridges with your design system
Your design system should be assimilated into your organisation’s core practices to help your design team create and deliver a more consistent user experience and bridge the gap between your design and your development processes.
It is a way for you to create a new product faster and more efficiently by making your design system flexible and reusable. It can speed up your new product creations by following a repeatable system without your creative team needing to start again from scratch with each new product.
Adopting your design-system
You may spend a lot of time developing your new design system to make sure that it is effective and pretty fool-proof. However, your new system will not be of any use unless you can encourage your creative team to fully adopt it.
Remember that your new design system may be a radical change of direction for your established team that has been used to doing things a certain way.
It can be difficult for your staff to shake-off ingrained behaviours or long-repeated methodologies in the workplace, so you will need to make sure that you encourage everyone to adopt and use your new design system for it to work properly.
You only need to look at how the ‘big boys’ manage their new design systems to see why everyone in your company needs to be on board with your changes.
When Microsoft redesigned the Xbox software with its new, company-wide design system, they applied the principles outlined in its Fluent Design guidelines.
‘Fluent Design’ is Microsoft’s new design system created to take over all of Microsoft’s products, from Windows 10 to Skype, to Xbox. Imagine what chaos could have been caused had Microsoft failed to bring everyone on board with their new company-wide design system.

Communication is key
When your design system is ready to roll out, you must communicate to your team the rationale behind your new system. You will need to explain the importance of the system designing phasein the design system development.
This will help everyone to get on board with your design system and answer any lingering doubts or questions your team may have about why you are introducing this. You need to deliver them with a vision statement that defines:
- Where are we going with this
- What do we want to achieve with this
- Why do we want to achieve that
- The advantages of a new design system
If you can answer these fundamental questions then you will be ensuring your creative team will have a shared vision.
Once your design system is up and running your creative team should be encouraged to share their experiences with their team members. By doing this your team will learn to solve problems in a systematic way rather than in an individual way.
Early adoption of a good communication culture will help your design system to become better embedded and encourage wider adoption of the new system.
Using shared language
When you want to encourage your creative team to collaborate and use your new design system then it is of great importance to use a shared language. Developing a shared language will allow your team member to understand and follow the steps involved in creating a product.
Having a shared language will cut down on the confusion over giving names to essential components, actions or procedures needed when communicating your needs in conversations with others.
Tweaking the system and communicating changes
There is no exact formula to follow when devising a new design system, so although everything looks good on paper, once the system is being used in product design, you may discover a few elements that need a little further tweaking.
Any changes made to the system must be communicated to all of your creative team members as well as the entire organisation. You can keep a changelog that you update with new changes that you can circulate to everyone. The log should detail what changes have been made and how the changes may impact on their work.
Establish regular feedback sessions
Encouraging a culture of communication is a positive step to ensure that everyone adopts and adheres to a well-structured design system. However, you should also establish a routine of regular feedback sessions between the creators of the design system, the users and the shareholders.
It is quite common for a creative team to work around existing problems within a company design system and these workarounds can be adopted and used for many years in some cases without ever being addressed. This can seriously impact on productivity levels, design efficiency and costs.
Regular feedback sessions will enable the creative team that is using the design system every day to report back about what is working well and what isn’t working so well.
Drawing attention to processes that need improvement or possibly even need restructuring will help your company to develop a better design system with in-built flexibility that can adapt to new changes and better serve the needs of the business as a whole as it moves forward into the future.
At Creative.onl, we aim to ensure that you have all the tools available to deliver a user experience that really counts. Contact us today or book a free consultation to find out how we can help you develop the digital strategies that work for your business.

BootstrapNataly Birch • August 22, 2019
Bootstrap grid is at the core of the framework. It underlies everything. It is the heart and soul of the boilerplate and the main reason we choose it in the first place. In one word, it is where everything begins. If you want to embrace the power of the Bootstrap, you need to know it inside and out.
Read about Bootstrap navbar and Bootstrap modal.
When it comes to the Bootstrap grid, there is nothing complicated whatsoever. Like anything else, it obeys general rules and is built according to principles that stay consistent. Of course, you already know that it has 12 columns, unlimited rows, and requires a .container class to build a baseline layout.
However, there are still some things that you may find confusing. To eliminate these uncertainties, let’s clear things up a bit.

Meaning of Numbers in Bootstrap Grid Main Classes
While the principles of the Bootstrap grid are evident, it can be a little confusing to get the grasp of the meaning behind the numbers. Let’s break the code behind .col-sm-3.
.col-sm-3
- col – means a column
- sm – means a type of screen size; there are four different types
- sm – small screens: Majority of mid-sized cell phones with monitor size lies between 576px and 767px
- md – medium screens: Desktops with monitor size between 768px and 991px
- lg – large screens: Standard monitors with a size between 992px and 1199px.
- xl – extra large: Screens that are greater than 1200px
- 3 – means the number of Bootstrap grid columns to merge and form one area; you can put any number from 1 to 12
Note in Bootstrap 4, “xs,” the breakpoint that covers mobile phones whose monitors are less than 768px, was dropped. Instead, you should use .col-. It is applicable for layouts with less than 576px wide.
While a number at the end of a class is self-explanatory, the “sm” abbreviation may confuse some. So why do you need it? This classification of monitors, or to put it in other words range of breakpoints, allows developers to control the layout and change its behavior in order to make the website look just the way they want. This mechanism stays behind the flexibility of the Bootstrap responsiveness. For instance:
Column 1
This code means that Column 1 will take 1/2 width on cell-phones but 1/3 width on tablets, large desktop monitors, and even cell phones with monitors greater than 576px.
Also, it is vital to note that you are not obliged to list all the grid classes since the classes that define the behavior on the smaller screens set the behavior on larger screens until they are overridden. In our particular case, you do not need to specify .col-md-4, .col-lg-4 and col-xl-4 since col-sm-4 did it.
Vertical Alignment in Bootstrap Grid v3 and v4
If you are struggling with Bootstrap 3, vertical alignment still can be a nightmare. If you need to center a column, there are two methods.
First, you can benefit from the offset classes. The markup may look like this
The second method implies the utilization of time-proven margin: auto technique. The markup is this
.col-centered{ float: none; margin: 0 auto; }
As for other lucky guys who prefer the fresher, more updated and advanced version of the boilerplate (aka the 4th one) everything is done with just several lines of code thanks to Flexbox.
Use align-self-center like this
CenterCenter
You can also employ in-built display utils such as display:table, display:table-cell, display:inline to center things. The markup may look like this
I am centered vertically
How to Create 5 Equal Columns in the Bootstrap Grid
This one is tricky yet very exciting. Even though the Bootstrap grid is based on 12 columns, it is still possible to create a structure that uses an odd number of columns. If you are using the latest version of the boilerplate, everything is easy peasy. Thanks to Flexbox, you define five columns, and they divide the area into equal portions. The code snippet looks like this
1 of 52 of 53 of 54 of 55 of 5
However, if you are still working with the third version, you need to create a special class where you set the specific width to each column and add it to your general stylesheet. The class should look like this
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-5ths { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-5ths { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-5ths { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; } }
After that, you can freely use it in the document like this
...
Helpful Resources for Bootstrap grid
Although Bootstrap grid is not responsible for the decorative part of the website since its job lies in silent support of the entire interface, nevertheless, there are still some valuable tools that help to handle it efficiently.
Bootstrap Grid Generators
Shoelace is a popular tool to build Bootstrap grids. Manipulate rows and columns as well as switch between phone, tablet, desktop, and large desktop previews to edit each of these layout versions.

Layoutit
Unlike the previous example that specializes in the third version of the boilerplate, the team behind Layoutit follows updates. Therefore, their visual Bootstrap grid builder is centered around the fourth version. Here you can build the foundation as well as populate it with baseline components, both static and dynamic bringing about a wireframe of the future website.

Speaking of which, if the Bootstrap grid generators are not enough then we recommend taking a look at Bootstrap builders. Not only do they help to create a solid foundation for the future website but also design the entire interface from scratch using beautiful hand-crafted components.
Bootstrap Builders
Startup

Startup is a popular free Bootstrap builder for themes. It covers a large number of components that stand out with a modern design, businesslike nature, and pleasant user experience. Along with using predefined elements, developers are welcome to customize every inch of the interface; therefore, building fully-working templates that meet their expectations without much trouble.
Mobirise

Mobirise is another Bootstrap builder that runs on your local PC. It is available for Windows and Mac users. Much like Startup, it also does not require any coding skills. There is a handy interface where everything can be created by dragging and dropping.
Bootstrap Studio

Bootstrap Studio is a desktop application that focuses on building websites using Bootstrap grid. Much like the Startup, the visual editor is continuously updated so that you can benefit from the latest enhancements in the framework. It comes with numerous components that will please you with its custom design.
Bootstrap Grid Templates for Designers
Where for developers everything begins with mixing and matching classes and utilities, for designers everything starts with a clean canvas in one of the popular graphic design programs. And, if you want to create a compatible Bootstrap template, you need a properly-aligned mockup that includes all the tiny details like gutters, viewport sizes, etc. Here is a small list of freebies to address this issue.
- For those who prefer Photoshop, Alexander Rechsteiner has created a Bootstrap 4 Grid PSD template with various helpful features inside.
- For Sketch fans, Thomas Pageot has an exclusive mockup.
- If you are using Figma, try a freebie created by Alex Martinov. It includes files for versions three and four.

What’s more, we have a small collection of Free Bootstrap Grid PSDs for Crafting Excellent Website Designs in our magazine as well.
Conclusion
Knowing Bootstrap grid well is a crucial skill. It is a foundation that might not be visible with the unaided eye, yet it is here, and it supports everything. If it goes wrong, it will take lots of time, effort, and money to fix the problem. Who wants that? Before jumping into the whole designing and decorating thing, you need to nail Bootstrap grid first.
Make sure a layout works on all screen sizes, and the structure complies with requirements. And, if you still feel insecure about handling the grid, you can always seek aid from visual builders like Startup that will solve problems quickly and efficiently.