Engineering
Our engineering is underpinned by principles that celebrate both the integrity of code and the ambition to innovate. This manifesto champions excellence, advocates for the adoption of cutting-edge technologies, and fosters an environment of continuous intellectual growth.
The 8px grid
Every number you use should have a reason to exist. If you use a margin of 34px, what is 34px? Where is it derived from? These numbers are often called “magic” numbers because they seem to be pulled out of thin air without any apparent reason. The more of these arbitrary numbers are used in a visual composition, the less consistent it will feel.
Less magic, more reason
Set up a base pad size. This number is where all other margins, paddings, gutters, and other numbers will be derived from. In these examples, we’re using 8px. Notice how the outer padding is 16px, which is simply 8px × 2. This way, you will establish a subconscious sense of that all your elements are connected somehow.
The secret of 8px
The number 8 wasn’t chosen randomly. Bootstrap uses 15px, others use 10px. But the number 8 is special: it can be halfed (8 ÷ 2 = 4), and halfed again (8 ÷ 2 ÷ 2 = 2). With 15, you can’t divide it by two. With 10, you can can still divide it, but only until 5. With 8, you’re assured that you can still reduce it as needed.
8px and mobile screens
I recommend 8px as the base pad size. The importance of this number is more apparent in the context of mobile screens. By keeping the base grid consistent at 8px, you can be assured that even if your design is scaled down by 1/2, there will be no uneven pixels. Mobile devices can have different screen densities per device. iPhone 5's have a density of 2 (where 1px is equivalent to 2 physical pixels), while the 6S+ goes up to 3.
Android & Material design
Material Design's baseline grid is 8px. It subdivides this further for icons for a 4px grid. This helps give a consistent feel across all of its UI metrics.
Also see
This article was adapted from Rico's design notes. • Rico's design notes (slack.com - private) • Understanding layout (material.io)
Dive into our latest musings and discoveries. Our blog is a window to the trends shaping the future and reflections on our journey.
Exploring horizons, sharing insights.
From building minimum-viable-products to managing existing products, we created product teams and managed them within Mashup Garage. We work with companies of different stages and together we built products and launched them.
From building minimum-viable-products to managing existing products, we created product teams and managed them within Mashup Garage. We work with companies of different stages and together we built products and launched them.
From building minimum-viable-products to managing existing products, we created product teams and managed them within Mashup Garage. We work with companies of different stages and together we built products and launched them.
Mashup Garage, a premier software development team, specialises in crafting exceptional products for startups and enterprises. With expertise in React, Elixir/Phoenix, and Ruby on Rails, we deliver solutions that meet your unique needs. Our mission is to bring value backed by decades of technical expertise and global co-founding experience.
What do you need help with?
Build a project
Build a team
Consult
Speak to someone
Expect a guaranteed response from us in 1-2 business days.
United Kingdom
London
Islington, London
+44 738 777 3405
Philippines
Manila
3F Topy IV Building, 3 Economia Road, Bagumbayan, Quezon City, 1110
+63 917 3084089