With a proven track record in building businesses from scratch, I’ve played a crucial role in helping various startups transform into 7 figure companies. My experience spans across diverse e-commerce ventures I’ve personally launched, which has ingrained me with valuable lessons. I’m also the head of new business at Afosto, where I assist our clients in reaching their business objectives and scaling their operations through smart software solutions.

But why am I telling you all this? Well, because I want to share the wisdom I’ve gathered from my entrepreneurial journey. It’s been a thrilling ride, filled with successes, failures, and learnings that have shaped my approach toward e-commerce.

So, whether you’re a budding entrepreneur, an existing e-commerce business owner looking to scale, or someone with a keen interest in the startup world, you’re in the right place. Read on as I unveil the 5 key lessons I’ve learned from building e-commerce businesses from scratch.

Lesson #1: Doing Your Homework: Market Research Before Launch

Picture this: launching a new e-commerce business without doing your homework is like betting your life savings on a horse race without checking the odds. Not the best strategy, right? And, I can tell you this from first-hand experience!

Now, my approach is different. Before starting a new venture or expanding my product range, I take on the role of a detective, scouting the online landscape. Are folks looking for my product? How are my competitors pricing? Can we jump in and still turn a profit? Think of market research as your map to treasure island — ignore it at your own risk!

Lesson #2: Measured Risks: Testing Before Investing in E-Commerce

Jumping head-first into a business without testing the waters isn’t just risky, it’s like flying a plane without a pre-flight check — and I wouldn’t advise either. Once your market research is complete, it’s time to take a small step forward, to test your assumptions.

Imagine setting up a lean, straightforward e-commerce website as your proving ground. The design is simple, the checkout smooth, and your product page is where the magic happens. It’s where customers decide if they’re buying or browsing. To convince them, answer their burning questions clearly:

• What’s the price?
• Are there any shipping fees?
• When will I get it?
• Is my purchase guaranteed?
• Have others bought and loved this?

The goal is to validate your product and the market with minimal risk, turning assumptions into data-driven decisions. It’s like taking a test-flight before the big journey!

Lesson #3: The Pitfall of Overanalysis: Avoiding Decision Paralysis

There’s an unspoken rule in the business skies and the startup scene alike: time equals money. If you find yourself stuck in the research phase or constantly comparing variables without taking action, you’re burning fuel while still on the runway. Remember: real learning happens in-flight, in the heart of the actual market dynamics.

Overanalysis is a sly beast that often leads to decision paralysis — an overthinking state that hampers progress and freezes action. It’s like waiting for the perfect wind speed before taking off — you could end up grounded indefinitely. In my early days, I found myself caught in this waiting game, hoping for the ‘perfect moment’ or that ‘last bit of data’. But in the high-speed world of e-commerce, such hesitation can mean missed opportunities or even worse, giving competitors a free pass to take the lead.

These days, I’ve adopted a more action-oriented approach. Sure, I start with the basics and make informed assumptions, but more importantly, I get the wheels off the ground and adapt mid-flight based on real-world feedback. Remember, you don’t have to have everything figured out before you start. Get up in the air, and trust yourself to navigate the journey as it unfolds.

Lesson #4: Design on a Dime: Cost-Effective Aesthetics for E-Commerce

Launching a webshop often comes with a daydream — of droves of customers pouring in, marveling at the pixel-perfect design of your site, and clicking that ‘buy now’ button without a second thought. However, as someone who’s played this game before, I have to bring you back to reality: that’s usually not how things play out.

Web design, while undoubtedly important, is not the be-all and end-all. An effective e-commerce site needs to be user-friendly and intuitive, not just pretty. Sure, a well-designed website can nudge your revenue up a notch, but it’s not a magic wand that transforms browsers into buyers. What truly matters to customers are simple things — clear pricing, delivery timelines, and reassurances that others trust you too.

A crucial element of your site is the product page — the battlefield where most purchase decisions are won or lost. It should be straightforward and informative, showcasing your price, shipping time and costs, warranty information, and customer reviews or other social proofs. This simplicity not only aids your customers in their buying process but also optimizes your resources. After all, design is important, but it’s not worth breaking the bank before you’ve proven your sales capability. Remember, being cost-effective is not about being cheap; it’s about being smart with your investments.

Lesson #5: The Numbers Game: Why SEO and Analytics Matter Most

The digital world, my friends, is a numbers game. Data is the king that rules this kingdom, and Google is its prime minister. Jokes aside, one cannot overstate the importance of setting up Google Analytics, Google Search Console, and Google Ads from the get-go. Think of it as setting up your own personal oracle — a reliable source of information, guidance, and insights.

When you first create a Google Ads account, go ahead and pause the initial campaign right away. This nifty trick gives you access to a treasure trove of tools to help select the right keywords for your product and category pages. But remember, don’t dive headfirst into paid advertising before ensuring your technical SEO is on point. You want the heart of your website — its content and technical framework — to be sound and solid. This way, you’ll start ranking for the keywords that are key to your business, making every click on your paid ads count, and importantly, cost less!

Use Google Analytics to understand your audience — where they’re coming from, what they’re doing on your site, and what makes them tick. Google Search Console, on the other hand, shows you how you’re performing in search results and which keywords are drawing in the free organic traffic. Consider these tools your secret weapons in the e-commerce battle, helping you navigate the landscape, spot opportunities, and seize them before anyone else does!

To Infinity and Beyond: A High-Five to You!

Well, folks, we’ve had a whirlwind journey through the exciting, sometimes challenging, but always rewarding world of e-commerce. A heartfelt thank you for staying onboard throughout this voyage!

Remember, as you embark on your e-commerce endeavors, the lessons learned are the stepping stones to success. So, do your homework, dip your toes in the water, sidestep overthinking, be frugal with design, and harness the superpowers of SEO and analytics.

And as we wrap up, don’t let the conversation end here! I would absolutely love to connect with you further and continue our chat on LinkedIn. Feel like catching up over a virtual coffee and discuss everything from market research to the latest SEO trends? Well, hop on over and connect with me!

Remember, the e-commerce journey is like a thrilling roller coaster ride — there will be ups, downs, twists, and turns. But hey, that’s where the fun is, right? So keep exploring, keep innovating, and let’s ride this roller coaster together. Until next time!

5 Key Lessons I’ve Learned from Building E-Commerce Businesses from Scratch was originally published in Afosto on Medium, where people are continuing the conversation by highlighting and responding to this story.

It’s vital to have fast search functionalities on your website. If your search is slow, this negatively impacts your UX, but Google also penalizes your website for this poor performance. But most solutions out there are overpriced or hard to implement. You might choose to build it on your own, but that will take a long time to get it right, and you still need a good UI for it. That is why we made the Afosto Instant Search Widget, so you don’t have to.

How does it work?

The widget can connect to an Afosto Instant Search search engine, which includes settings for the indexes and the filters to use. Everything is configurable in the Afosto platform. That way, the developer only needs to implement the code, and you can change how it is displayed.

You can choose to use a ‘search as you type’ configuration or let the use search by pressing ‘ENTER’. With ‘search as you type’ the user gets near instant feedback of results for the entered query. Try it out in the CodePen in the next section or on our website.

How do I implement this on my site?

First, you will need to create a search engine with one or more indexes. You can do that by signing up to our platform on afosto.com and follow the guides in our documentation.

When you have a configured search engine, you can start implementing the code on your site. Depending on your project, you have a few options on how to include the scripts in your code. You can install it via Yarn or NPM, or via script tags from a CDN. For this article, we will keep it simple and use the CDN setup. Include the scripts below into your site code.

<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.css" />

<!-- Scripts -->
<script defer src="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.js"></script>

This will include the styles and necessary scripts to initialize and render the widget. To actually initialize it, we can add a script tag with the initialization method AfostoInstantSearchWidget.init(). This method takes your search engine key and fetches the settings for the search engine indexes.

<script>
  document.addEventListener('DOMContentLoaded', function() {
   AfostoInstantSearchWidget.init('movies-demo');
  });
</script>

Now the widget is ready to go and is waiting for you to open it. All that is left to do is to add the data attribute data-af-instant-search to a button, input or whatever you choose to use as a trigger.

<button data-af-instant-search>Search</button>

That’s all there is to it! You can use the CodePen below as an example and to see the speed of our Instant Search.

That's cool, but I want to customize the design.

You are free to customize the styling and layout of the widget by using CSS. For the colors, we use CSS custom properties. So for example changing the primary color, which is by default blue, is done by setting --af-is-primary-500 to whatever color you like. In the example below, we flipped the gray values, so it looks like dark mode, and made the primary color scale red. We also changed the layout a little. Because we’ve used CSS grid for the layout, you are able to reorder the components. The example below has a full height filters sidebar, and the pagination and items per page component are now above the results.

This is just an example of what you can customize. By using the classes or other selectors, you can customize everything you want and create your own theme.

I want fast search, but with my own UI

Like the speed of our search, but want your own implementation? We got you covered! Internally, our widget uses our Instant Search Client to handle all the requests and functionality. With this client you can build your own solution or connect it to for example instantsearch.js or react-instantsearch-dom. With these packages, you can create your own UI that is connected to Afosto Instant Search. Take a look at the demo on our website, or use the CodePen below as an example.

Let us know what you think

We are curious about what you think of our search widget. Feel free to leave a comment or check out our GitHub for more information or to report an issue.

Check out our website to register your Afosto account and take a look at our other apps. You might like Quicq, our on the fly image optimization platform.

Lightning fast search widget with Afosto Instant Search was originally published in Afosto on Medium, where people are continuing the conversation by highlighting and responding to this story.

When you browse through the #help channel on the Bootstrap Slack workspace, you will see a few questions being asked over and over again. In this series I will try and answer these questions thoroughly in the hopes you will understand what techniques are used and how to use it properly.

I’m a big fan of the new flex utilities included in Bootstrap v4. They give you great flexibility , no pun intended, and are perfect for any alignment use case. We’ll have a look at every class that Bootstrap provides and also walk through the styles the classes add.
You can read through the documentation on getbootstrap.com.

If you just want to know how to use it, scroll down till the next three dots.

Techniques

As you might have guessed: it’s all flexbox for this one. Everything you’ve used floats for, in my opinion, you’re better of with flexbox. If you don’t now what flexbox is you can take a look at the following links. I highly recommend playing the Flexbox Froggy game, it’s the most fun way to learn flexbox.

• Flexbox Froggy
• CSS Tricks: A Complete Guide to Flexbox
• Mozilla Developers Network: Basic Concepts of Flexbox
• Flexbox the animated tutorial by JavaScript Teacher

If you really want to know everything you can also read the CSS working group spec for flexbox. Kudos if you actually read it start to finish, I sure as hell haven’t.
W3C: CSS Flexible Box Layout Module Level 1

The tiny scss file only contains 51 lines, but packs a lot of power. Take a look at it on Github.
But before we dive into the file, there are a few things you need to be aware of.

• These classes only have effect on an element if it has or is a child of an element that has the display: flex; property. You can also use the d-flex class to add it without writing custom css. This is called the flex container.
• display: flex; tells the children of flex container how to behave. Only a few properties can control how a single child will behave. A child of a flex container is called a flex item.

If it’s not clear yet you’ll need to read every link I mentioned above, even the w3c spec, just to be thorough 😏.

OK, lets get flexin’!

Breakpoints

This will use the same setup as the display utilities, so look over there if you want a complete explanation of every line. Short version: this will loop through every breakpoint and creates a @media (min-width: ##px){...} for each breakpoint. It also creates the $infix variable that we can use in our classes. The infix will correspond to the breakpoint, so sm, md, lg or xl prepended with a — .

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    ...
  }
}

Flex-direction

To control the direction, also called the main axis, that the flex container will flow it’s flex items we use the flex-direction property. This property only accepts row, column and their reversed options row-reversed and column-reversed. The default value for this property on a flex container is row, so you don’t need to explicitly add the class to get it to work as a row. The css that will control these is as follows.

.flex#{$infix}-row            { flex-direction: row !important; }
.flex#{$infix}-column         { flex-direction: column !important; }
.flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
.flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }

As you can see it’s really simple and solid. To be certain our utility class has effect, we need to append every declaration with !important otherwise we might be looking for why it isn’t working for an hour and add it anyways.

Flex-wrap

By default a flex container will keep all it’s flex items on one row (or column). We can tell the flex container to wrap it into a second row by adding the flex-wrap property. This can be done in 3 ways: the default nowrap, wrap or its reversed brother wrap-reverse. These result in the classes below.

.flex#{$infix}-wrap         { flex-wrap: wrap !important; }
.flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
.flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }

Flex-fill

This isn’t an actual property. It is a nifty way of making a flex item take up as much space as it can, in other words: fill up the remaining space. If you have two flex items next to each other with this class, they will be equal in width as they both take up as much space as they can. To do this we use the shorthand property flex. This is a shorthand to declare flex-grow, flex-shrink and flex-basis, in that order.
This is one of the rare properties that can only be used on a flex item.

.flex#{$infix}-fill         { flex: 1 1 auto !important; }

By setting flex-grow and flex-shrink to 1 we give the flex item the freedom to shrink and grow as much as it can. Setting the flex-basis to auto will tell the flex item that it’s width doesn’t matter. I’m not sure why it’s auto, to my knowledge this value can also be 0, but it still does the same.

Flex-grow and flex-shrink

We can also control flex-grow and flex-shrink independently by using these properties themselves instead of the shorthand. This gives you the flexibility to let flex items grow and shrink or to constrain them to flex-basis or width properties. Bootstrap only provides a class for the 1 and 0 value of this property. I only encountered a few cases where I wanted to set larger values for these, but these two option are enough in almost all use cases.
This is one of the rare properties that can only be used on a flex item.

.flex#{$infix}-grow-0       { flex-grow: 0 !important; }
.flex#{$infix}-grow-1       { flex-grow: 1 !important; }
.flex#{$infix}-shrink-0     { flex-shrink: 0 !important; }
.flex#{$infix}-shrink-1     { flex-shrink: 1 !important; }

You can think of these classes as booleans for telling the flex item to grow/shrink (1) or not (0).

Justify-content

To align flex items along the main axis we can use justify-content. It accepts 5 values that give you a lot of flexibility. flex-start and flex-end will align the flex items at the start or end of the main axis. So if the flex-direction is set to row, flex-end will align all flex items to the right. Using center will, as you might guess, center it on the axis. space-between does a bit more special things. It spaces the flex items along the main axis of the flex container with even spaces between each item. space-around will create even spaces around each item. The difference is that the flex items with space-between will be flush with the sides of the flex container. space-around will create space between the edge of a flex item and the edge of the flex-container. The examples in the next paragraph will explain this better.

.justify-content#{$infix}-start   { justify-content: flex-start !important; }
.justify-content#{$infix}-end     { justify-content: flex-end !important; }
.justify-content#{$infix}-center  { justify-content: center !important; }
.justify-content#{$infix}-between { justify-content: space-between !important; }
.justify-content#{$infix}-around  { justify-content: space-around !important; }

As you can see the classes classes are shortened to be easier to use.

Align-items

We can also align on the cross axis by adding align-items to the flexbox element. The values you can use for this property are: flex-start which is the default, flex-end, center, baseline and stretch. flex end and start work the same

So if flex-direction is set to row we can align our elements to the bottom of the row in the flexbox element, by setting the value to flex-end. Now the part bottom of the row in the flexbox element is important here. Because when your flexbox items are overflowing your flexbox element, it wraps the items into a new row. Now these element will get aligned relative to the other elements in the row. The next property align-content does it the other way around.

.align-items#{$infix}-start   { align-items: flex-start !important;}
.align-items#{$infix}-end     { align-items: flex-end !important;}
.align-items#{$infix}-center  { align-items: center !important;}
.align-items#{$infix}-baseline { align-items: baseline !important;}
.align-items#{$infix}-stretch { align-items: stretch !important;}

Align-content

Align content will align the rows of the flexbox items grouped together relative to the flexbox element. So image your items are all 20px high in 2 rows, and your flexbox element is 50px high, you’ll get 5px “padding” at the top and bottom of the flexbox element. Stay put till the example for a clearer explanation.

.align-content#{$infix}-start   { align-content: flex-start !important; }
.align-content#{$infix}-end     { align-content: flex-end !important; }
.align-content#{$infix}-center  { align-content: center !important; }
.align-content#{$infix}-between { align-content: space-between !important; }
.align-content#{$infix}-around  { align-content: space-around !important; }
.align-content#{$infix}-stretch { align-content: stretch !important; }

Align-self

With align-self you can override how a flex item aligns to the cross axis. So we can override the value set with align-items to the flex element with align-self. The possible values are the same as align-items with the addition of auto, which is the default value.

.align-self#{$infix}-auto     { align-self: auto !important; }
.align-self#{$infix}-start    { align-self: flex-start !important; }
.align-self#{$infix}-end      { align-self: flex-end !important; }
.align-self#{$infix}-center   { align-self: center !important; }
.align-self#{$infix}-baseline { align-self: baseline !important; }
.align-self#{$infix}-stretch  { align-self: stretch !important; }

For some reason the auto option, though it is present in the scss file, is not mentioned in Bootstrap’s documentation. But believe me, it’s a thing.

Order

The order classes isn’t actually a part of the flexbox utilities, but is created in the grid-framework.scss file. The classes are created inside the make-grid-columns mixin. But as they are included in the bootstrap docs as utility classes, this is how they work.

.order#{$infix}-first { order: -1; }
.order#{$infix}-last { order: $columns + 1; }
    
@for $i from 0 through $columns { 
       .order#{$infix}-#{$i} { order: $i; }     
 }

It’s again wrapped in a loop that creates a media query for each breakpoint and passes an infix on as a variable. Bootstrap provides a way to order a flex item as the last or first, but also provides an order class for each column plus a reset option. The for loop above will go from 0 to, by default, 12 and create the order class for each column on every breakpoint. The 0 though is a way to reset the elements ordering. When you use the .order-0 class, the element will be reset to the natural html order. With the other classes you can swap the fifth elements with the second element by using order-5 and order-2.

So now we’ve got that out of the way… I actually did read most of the W3C article… I now realize you should definitely read through to fully understand flexbox, it’s really well explained.
Allright let’s go on with the examples and show you how to use the classes.

Using the classes

Bootstrap has a few components that are already based on flexbox. That means you can use these classes without the need of adding the .d-flex class. A good example of one of these elements is the navbar. It already is a flex element and has the justify-content property set to space-between. We can now work on some examples with the flexbox utility classes.

The examples will only use Bootstrap utility classes, just to show their power.

flex-direction

flex-wrap

flex-fill, flex-grow and flex-shrink

justify-content

align-items

align-content

align-self

order

Combining these utilities gives you great capability and flexibility (pun intended) to create whatever you want.

Now, get flexing and prototype your site in minutes.

Thanks for reading, hope you learned something.
Let me know what you want explained next, i’ll be glad to do it.

Bootstrap v4 explained: Flexing with utilities was originally published in Afosto on Medium, where people are continuing the conversation by highlighting and responding to this story.

When you browse through the #help channel on the Bootstrap Slack workspace, you will see a few questions being asked over and over again. In this series I will try and answer these questions thoroughly in the hopes you will understand what techniques are used and how to use it properly.

This article will show you how to use the new display utilities to hide and show like you did in v3. We’ll also walk through the styles the classes add.
You can read through the documentation on getbootstrap.com.

If you just want to know how to use it, scroll down till the next three dots.

Techniques

The display utilities are actually really easy to explain, as long as you know how the display property works. If you don’t, you can read up on the below links. Do note that not every value explained on these links are supported.

• https://css-tricks.com/almanac/properties/d/display/
• https://developer.mozilla.org/en-US/docs/Web/CSS/display

With Sass it is a breeze to create these classes and doesn’t take a lot of lines of code ( 38 to be exact, including comments). I’ll dig into the used functions a bit more than the previous article, otherwise it would be to easy 😉. For the developers that are concerned about print, Bootstrap’s got ya covered.

Web

For the web we start off with creating a loop to create classes per breakpoint.

@each $breakpoint in map-keys($grid-breakpoints) {
  ...
}

This loops through every defined breakpoint in the $grid-breakpoints Sass map and passes it through as $breakpoint.

The next step is actually creating the media query. For this we use a mixin called media-breakpoint-up().

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    
    ...
  }
}

This creates the media query using the passed on $breakpoint. to be able to use actually create the corresponding classes an $infix variable is created with the function breakpoint-infix() that uses the active $breakpoint and returns the computed value for the infix.

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { 
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

These two functions actually do the magic to get the infix, this is used for every utility, grid column or any other element that uses any breakpoint class.
breakpoint-min() uses a $name ( the active $breakpoint ) and gets the corresponding pixel value from the $grid-breakpoints. This value is stored as the variable $min. If the value of $min is not 0, it returns that pixel value. If value is 0 it returns null.
$breakpoint-infix() uses $name ( the active $breakpoint ) and the $grid-breakpoints map to determine what should be used as the infix. If the function breakpoint-min() returns null itself will return an empty string. So for the xs breakpoint we had in v3, you can now leave out the infix to get the same result, ie.: .col-xs-12 can now be used as .col-12. For the other breakpoints that aren’t 0 it will spit out a computed value of the breakpoint name that is prefixed with a dash "-#{$name}".

In the next part we actually define the classes. The display properties that are supported are: block, inline, inline-block, table, table-row, table-cell, flex and inline flex.

...
    .d#{$infix}-none         { display: none !important; }
    .d#{$infix}-inline       { display: inline !important; }
    .d#{$infix}-inline-block { display: inline-block !important; }
    .d#{$infix}-block        { display: block !important; }
    .d#{$infix}-table        { display: table !important; }
    .d#{$infix}-table-row    { display: table-row !important; }
    .d#{$infix}-table-cell   { display: table-cell !important; }
    .d#{$infix}-flex         { display: flex !important; }
    .d#{$infix}-inline-flex  { display: inline-flex !important; }
...

As you can see these utilities start with a d, for display, next the infix and then the value used. As these classes should overwrite any used display property on the element it is used on, it has an !important flag.

Print

The display properties for print aren’t built with media queries per breakpoint, but only the @media print {...} one. As we now don’t need to infix these classes these are just defined as is. The supported values are the same.

@media print {
  .d-print-none         { display: none !important; }
  .d-print-inline       { display: inline !important; }
  .d-print-inline-block { display: inline-block !important; }
  .d-print-block        { display: block !important; }
  .d-print-table        { display: table !important; }
  .d-print-table-row    { display: table-row !important; }
  .d-print-table-cell   { display: table-cell !important; }
  .d-print-flex         { display: flex !important; }
  .d-print-inline-flex  { display: inline-flex !important; }
}

Using the classes

Here is the difficult part of theses utilities, and the reason for this article. Since v4 the classes .hidden-[breakpoint]-[value] and .visible-[breakpoint]-[value] were dropped. Understanding which display utilities to use to replace which old classes can be a bit confusing. Here we go.

Mobile first

As the classes are created using the media-breakpoint-up() mixin, we have to think from mobile and upward. So starting with a viewport width of 0, we have d-[value]. This will overwrite the elements value for display on every screen size. If we go one up, so sm, this will overwrite the elements value for display on all the screens sizes above 576px. For example if we use d-sm-none it will be visible on devices than are smaller than 576px, but hidden on devices wider than 576px.

The main difference is that the class doesn’t overwrite it for that specific breakpoint, but from that breakpoint upward. People that have used the alpha versions of v4 might be looking for .hidden-md-down, these have been dropped and it only works upward.
Simply said: The classes set a starting point and are used going upward.
If you combine the classes together those starting points are overwritten again going upward.

Got that? Hope so…

What replaces…?

The documentation has a table describing what classes to use in what case. To most people this is clear enough, some just wan’t a simple cheatsheet. Actually, who doesn’t want that. So here you go:

Replace [value] with one of the supported values and you’re good to go. Most commonly block.

You can be even more thorough and add the class for each breakpoint, but these will do the same trick. If you can’t seem to figure it out until this point I would advice doing that. If we add it to a div it would look something like this.

<div class="d-block d-sm-block d-md-block d-lg-block d-xl-block">
</div>

Using this method you have full control over how it’s being displayed on each breakpoint. If you have your desired display settings you can then try and simplify the classes. If the next on is the same, you can get rid of it. For example if you end up with:

d-flex d-sm-flex d-md-flex d-lg-none d-xl-flex

You can drop the sm and md class as it will inherit it from the starting point d-flex, the setting changes to none on the lg breakpoint and changes back to flex on xl. You will end up with:

d-flex d-lg-none d-xl-flex

using these steps you will end up with your desired class list to show and hide your elements.

Open this codepen in a new tab and scale your window to see the magic.

Try them out and you’ll start to love them. I know I do.

Thanks for reading, hope you learned something.
Let me know what you want explained next, i’ll be glad to do it.

Bootstrap v4 explained: Display utilities, the new hiding and showing was originally published in Afosto on Medium, where people are continuing the conversation by highlighting and responding to this story.

What do I need

For this project I needed to ensure code quality, ease of development by writing unprefixed css and making use of everything Sassy function, mixin and variable that Bootstrap includes. Compiling javascript was not a primary concern for now so that’s for another time.
Looking at the Bootstrap repository I decided on using these tools.

• node-sass to compile scss/Sass to css
• autoprefixer to add prefixes where needed
• postcss to actually use autoprefixer
• stylelint to check the code for mistakes
• clean-css to create minified versions

Exploring the possibilities

I started out looking at the Bootstrap Github repo and figure out how they build the distribution and doc files. After that I came across a video where someone used gulp to watch scss files and build on every change. I tried both ways and here is what I found out.

NPM / Yarn

The Bootstrap project uses npm scripts and packages to compile everything and setup a local server via jekyll. For this project I was only interested in compiling my scss to css. I also prefer Yarn over NPM but that is just personal preference, they work the same. It was pretty easy to setup (though npm-run-all didn’t do it for me) and could support everything i needed.

Gulp

Gulp is a really fast way of setting up build pipelines. It is completely javascript based, that means the that you can setup a pipeline with just javascript. I thought it was really cool and the video showed it was pretty fast. As I started building my pipeline in couldn’t figure out how to get stylelint integrated into the pipeline, so I chose to use NPM script for this project.
If you do know how, please tell me.

I use IntelliJ’s WebStorm, a really powerful IDE that I am really liking and is ramping up my development speed. You don’t need an IDE to follow along, you could cope with the command line and notepad, wouldn’t advice it though…

Let’s get started

So now we decided on which tools to use and how to run them we can get started with the project.
If you’ve never used node packages you can follow the setup guides for Yarn or NPM. You need one of these tools to follow along with this article. You’ll also need a basic understanding of the command line. Codecademy has a pretty good course for it that I also followed.
Now that you got all the required tools and knowledge let’s get started.

Start a project

Open up your command line tool and navigate to the directory you’d like to work in, create a new directory and navigate into that directory. It would look something like:

$ cd projects
$ mkdir bootstrap-setup
$ cd bootstrap-setup

If you would like to use git you can init with git init and use all the commands when necessary.
Now we can set our project up using the init command. Running yarn init or npm init the package manager will start setting up al the required files and will ask you a few questions:

name: project-name 
version: (0.0.0) 0.0.1 
description: The Project Description 
entry point: //a file like index.html or just '.'
test command: //leave empty 
git repository: //the repositories url if you have any
keywords: //leave empty (NPM only)
author: // your name 
license: N/A

These answers will be used to build package.json. This file is like you project configuration, it includes all key information and what package are used in what environment. The contents of package.json will look something like.

{
  "name": "bootstrap-setup",
  "version": "1.0.0",
  "description": "tooling setup like bootstrap",
  "main": ".",
  "author": "Gijs Boddeus",
  "license": "MIT"
}

Now we can start installing packages and running scripts.

Installing packages

This is the easiest part, it’s just installing all the packages. My project doesn’t need any package to be included in a release build, that means I only need dependencies for my development environment. To add packages as devDependencies you can use what’s called a flag: -D.
To install packages with NPM you run:

npm install <package name> -D

If you use yarn, like me, you run:

yarn add <package name> -D

I started out by installing/adding node-sass by running yarn add node-sass -D. This will install a butt load of node_modules and since it’s the first package it wil create a package.lock file, ignore it, not important.

If you don’t want to go through installing every package separately you can run these commands.

Yarn

yarn add node-sass clean-css-cli autoprefixer postcss-cli stylelint stylelint-scss stylelint-order stylelint-config-standard stylelint-config-recommended-scss watch -D && yarn add bootstrap@4.0.0-beta.3

NPM

npm install node-sass clean-css-cli autoprefixer postcss-cli stylelint stylelint-scss stylelint-order stylelint-config-standard stylelint-config-recommended-scss watch -D && npm install bootstrap@4.0.0-beta.3

Now that we have all the packages we need, we should configure a few things.

Configuring the tools

To keep it well organized create a directory like build or configs to keep all config files in.

Stylelint

To ensure you and/or you co-developers write clean and consistent code we use a linter to filter out mistakes and display them ass errors. Stylelint is the package Bootstrap uses for their own configuration, as is every other package we just installed. In the build directory add a file called .stylelintrc and copy the contents from the equally named file on the Bootstrap repo.

All these rules defined what is allowed and what will throw an error. For example, "max-empty-lines": 2 will throw an error if you have 4 empty lines between two lines of code.

Postcss

Postcss is required to run autopefixer which will add vendor prefixes when necessary, depending on the configuration you define.

To specify which browsers you wan’t to support you can add an array to the package.json file specifying version like this:

"browserslist": [    
    "last 1 major version",    
    ">= 1%",    
    "Chrome >= 45",    
    "Firefox >= 38",    
    "Edge >= 12",    
    "Explorer >= 10",    
    "iOS >= 9",    
    "Safari >= 9",    
    "Android >= 4.4",    
    "Opera >= 30"  
],

These are the default supported browsers by Bootstrap.

To make it possible to add prefixes when needed you need to create a postcss.config.js file and paste this into it:

'use strict' 

module.exports = (ctx) => ({
    map: ctx.file.dirname.includes('examples') ? false : {
        inline: false,
        annotation: true,
        sourcesContent: true
    },
    plugins: {
        autoprefixer: { cascade: false }
    }
})

Now the tools are configured and we can run some scripts… but first we need some scss files. Easiest way, simply add a directory for the scss files and create a main.scss file. In that file import the bootstrap source files from the node_modules:

@import "../../node_modules/bootstrap/scss/bootstrap";

Now we have something to compile and we can start writing scripts.

Defining scripts

Inside you package.json you can add a section in which you can define scripts to be run inside the command line. This is very convenient as you can group multiple scripts that you would normally run separately, into one simple command.
In my project I defined these scripts:

• css:lint (to test our scss with the stylelint configuration)
• css:compile (to compile our scss into css files)
• css:prefix (to add prefixes via autoprefixer)
• css:minify (to create minified files)
• css:watch (to start watching for changes in the scss dir)
• css (to run css:lint, css:compile, css:prefix and css:minify all together)

I actually copied most of the rules from Bootstrap’s package.json, but made some changes as i didn’t use the npm-run-all package (also available as yarn-run-all for yarn) to run multiple commands parallel or synchronous.

Open up your package.json and add an array to place your scripts in. You can scripts like this:

"scripts": {
  "[script-name]": "[command line script to run]",
}

css:lint

This command will run stylelint with the configuration we defined earlier. If anything is not according to the rules it will return this in neatly in the command line. The script looks like this.

stylelint --config build/.stylelintrc --syntax scss \"scss/**/*.scss\" --cache --cache-location \"build/.stylelintcache/\"

Basically: run stylelint, use the rules from our config, the code we will lint is scss, go through every scss file in the scss dir and sub directories and cache the results to our build dir. I added the caching to speed up the watcher we will create in a minute.

css:compile

Now we have clean code, we need to transform it to usable code. Node-sass is a node.js sass/scss pre-processor that will compile your files into usable css.

node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/main.scss style.css

Basically: output css in expanded mode, generate source maps for easy debugging, allow 6 decimals, use scss/main.scss and output it as style.css. Easy right :).

css:prefix

We have usable css! well in the newest browsers, unfortunately we still need vendor prefixes. Autoprefixer to the rescue! We can run it as part of postcss as it actually is an addon for it. So the script:

postcss --config build/postcss.config.js --replace \"*.css\" \"!*.min.css\"

Basically: run postcss, use our config and use all .css files, but not the .min.css files and prefix it if needed based on our browserlist.

css:minify

We are all set with usable css and prefixes for all the browser we need to support. You could stop there but a good last step is to minify your files to minimize the file size. Here’s how:

cleancss --level 1 --source-map --source-map-inline-sources --output style.min.css style.css

Basically: run cleancss, level of cleanup to perform clean, create a source map fo the minified file, output style.min.css from style.css.

css

Sweet, everything is setup and we are able to run all of our scripts in our command line. But we don’t want to run all of these scripts separately everytime. We can combine defined scripts into one, single, easy command.

yarn css:lint && yarn css:compile && yarn css:prefix && yarn css:minify

To run these with NPM you need to replace yarn with npm run. Otherwise they will not run.

Basically: run all scripts above in order. If you use npm: replace yarn with npm run. (this is where npm-run-all would come in)

css:watch

Everything now works and can get executed with a single command, awesome!

We can setup a watcher to run the css script every time an scss file is changed/saved. If run this script you can save your file, refresh your browser and you will see your changes. So without further ado:

watch 'yarn css' scss

After all this your scripts array should look something like:

"scripts": {
  "css:lint": "stylelint --config build/.stylelintrc --syntax scss \"scss/**/*.scss\" --cache --cache-location \"build/.stylelintcache/\"",
  "css:prefix": "postcss --config build/postcss.config.js --replace \"*.css\" \"!*.min.css\"",
  "css:compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/main.scss style.css",
  "css:minify": "cleancss --level 1 --source-map --source-map-inline-sources --output style.min.css style.css",
  "css": "yarn css:lint && yarn css:compile && yarn css:prefix && yarn css:minify",
  "css:watch": "watch 'yarn css' scss"
}

Running the scripts

Now that everything is working we can go ahead and start customizing bootstrap and creating our theme. Open the main.scss file and replace its content with:

//$primary: #fe39ed;

@import "../node_modules/bootstrap/scss/bootstrap";

Start up the watcher with yarn css:watch and keep an eye on the command line. You should get the following output:

yarn run v1.3.2
$ watch 'yarn css' scss
> Watching scss
$ yarn css:lint && yarn css:compile && yarn css:prefix && yarn css:minify
$ stylelint --config build/.stylelintrc --syntax scss "scss/**/*.scss" --cache --cache-location "build/.stylelintcache/"

scss/main.scss
 3:51  ✖  Unexpected missing end-of-source newline   no-missing-end-of-source-newline

Seems we have an error according to stylelint. Take a look at line 3 of main.scss. Our rules define we wan’t an empty line as the last line of every file. Go ahead and add an empty line to the file and save it. You should see some action in the command line, it shouldn’t throw any errors and lint + compile + prefix + minify without a problem.

Now to see it in action: create an index.html file in the root of your project. Open the file in a browser. Now add the following to the content of the file:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Bootstrap build setup</title>

        <!--  include our style.min.css  -->
        <link rel="stylesheet" href="./style.min.css">
    </head>
    <body>
        <div class="container mt-5">
            <div class="card bg-primary text-light mb-5">
                <div class="card-body text-center py-5">
                    <h1>
                        $primary
                    </h1>
                </div>
            </div>
        </div>
    </body>
</html>

Refresh your browser and you should see:

Now go back to main.scss and have a look at the first line. This line will override the default value of the primary color variable that Bootstrap uses. Delete the two slashes, //, at the beginning of the line and save the file. Node does its magic and tada!

We have now customized bootstrap! You can use variables.scss from the Bootstrap repo as a reference for all the variabels you can use.

Make sure you read the documentation on theming to fully understand how to handle different scenarios and use colors in your custom css.

A good way to structure main.scss is to put all variables into a separate file, also don’t add actual css rules to this file but add them in their own files, and structure the imports like:

@import "variables";
@import "../../node_modules/bootstrap/scss/bootstrap";

//  custom styles
@import "layout";
@import "pages";
@import ...

Have a look at bootstrap.build. It’s a Bootstrap configuration tool made by Oleg Berman, really cool!

That’s that

Now you’re ready to create, customize and build a bootstrap based website.

I learned a lot figuring out how to get this up and running, this actually the first i did it without using a framework. I feel like I have a better understanding of how frameworks do it and what is needed to actually deliver distributable files.

Though this works, the watcher is a little slow on picking up changes. Also the speed of compilation isn’t top notch. From what I have seen in Youtube, Gulp should be faster, but I couldn’t get stylelint into the pipline like I wanted to. Also npm-run-all might speed up a thing or two, but i got some overlapping scripts and stuff… I was just being foolish I now realize.

And yes I know Webstorm has built in sass compilation, but the other collaborators are using their preferred editor so I needed this.

Wishlist

• faster compiling
• faster watcher
• hot reloading of the styles (changes are instantly pushed to the browser)
• js scripts

Hope you liked this article/tutorial

How to customize Bootstrap v4 using node packages was originally published in Afosto on Medium, where people are continuing the conversation by highlighting and responding to this story.

When you browse through the #help channel on the Bootstrap Slack workspace, you will see a few questions being asked over and over again. In this series I will try and answer these questions thoroughly in the hopes you will understand what techniques are used and how to use it properly.

Today I’ll explain the scss techniques used to create the grid and how to use the classes in your html. You can read through the documentation on getbootstrap.com

If you just want to know how to use it, scroll down till the next three dots.

Techniques

Back in the day people had to create grid structures with tables (actually a hack), then with floating divs (also a hack), now we use flexbox (still a hack) and if you’re really up to date css grid (not a hack!). earlier versions of Bootstrap used the float technique, but it had it’s caveats. Version 4 introduces a grid based on flexbox. If you don’t know how flexbox works, here are some links to learn about it.

• http://flexboxfroggy.com (a little game about a frog)
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (in depth explanation)

Container

The .container is a really simple element. It gets a padding equal to half of the gutter width. It also gets centered by adding margin-left: auto; and margin-right: auto;. The width of the container is generated by the make-container-max-widths() mixin. It creates a media query for every breakpoint and adds max-width: [max-width];. The .container-fluid class is exactly the same but without the max-widths, it takes up the full width of your screen and only has the padding.
Here’s the scss mixin that creates it:

@mixin make-container() {  
  width: 100%;  
  padding-right: ($grid-gutter-width / 2);  
  padding-left: ($grid-gutter-width / 2);  
  margin-right: auto;  
  margin-left: auto;
}

For the widths scss the mixin looks like:

@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: $container-max-width;
    }  
  }
}

Don’t be frightened by all the variables. What this mixin does is: create a media query for every value in $grid-breakpoints and add a max-width rule into the media query based on the corresponding value in $container-max-widths.

Row

Flexbox by default aligns items on a single row and starts it on the left. It also defaults to flex-wrap: nowrap , this means it will align all items side by side, even if they don’t really fit. So, Bootstrap sets this property to wrap to make it possible to break columns intro more rows without adding it to as html markup.
The scss used for the .row are just this:

@mixin make-row() {
  display: flex;
  flex-wrap: wrap;  
  margin-right: ($grid-gutter-width / -2);  
  margin-left: ($grid-gutter-width / -2);
}

It uses flex(box) as the display setting, tells it to wrap instead of overflow and adds negative margins to compensate for the padding on the container. By default these are -15px (30px / -2).

Additionally the .no-gutters class can be added to the .row element. This adds styling for the row and the columns that are direct children of it. The styles added are:

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

This removes the negative margin from the row and positive padding from the columns inside te row.

Columns

The columns are the hardest to understand in my opinion. Since we’re harnessing the power of flexbox, Bootstrap uses flex: 0 0 [col-width]; to set the width of the columns.

First thing is the general styling added to every column class.

position: relative;
width: 100%;
min-height: 1px; // Prevent columns from collapsing when empty
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);

Not a lot of new things going on here. What might throw you off is the width: 100%; on the second line. This is just a default to stretch the column. The padding gets added by default too with the same as the container.

To create a structure we need to be able to define the width of column. Bootstrap uses a twelve column grid. This means we can use any number from 1 trough 12 to define it’s width. For example: to get 2 even width columns next to each other, use the number 6 for both column classes.
The actual lines that add the width to each column class are:

@mixin make-col($size, $columns: $grid-columns) {
  flex: 0 0 percentage($size / $columns);
  max-width: percentage($size / $columns);
}

What the percentage($size / $columns) does is taking a width like 6 and divides it by the number of columns, by default 12, and calculates a percentage with it. So for col-[infix]-6 it will print out 50%. The outcome of the percentage function is used in both lines. As the flex property is a shorthand it also gets a flex-shrink and a flex-grow value of 0 to ensure it keeps the defined width. The max-width is a fix for IE and Firefox.
Now this is all we need to make a grid, though it is not responsive yet. For that we need to setup the classes for columns 1 through 12 for each breakpoint. Now this is a pretty big mixin so bear with me here…

@each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

This first part sets a variable to use as an infix for the column classes, by default: sm, md, lgand xl. Note that xs is not used in any class in v4. This is due to the mobile first approach, so the starting point is xs. I.e.col-6 is the class for a 50% width column for every screen width.

@include media-breakpoint-up($breakpoint, $breakpoints) {
  .col#{$infix} {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .col#{$infix}-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  ...

Here we are at the start of creating the classes for each breakpoint using the media-breakpoint-up mixin and passing the breakpoints map to it. So for each breakpoint this will create two classes that work a little different from the number classes. The first class will stretch the column for as long as it fits, given it’s content.
The second class will overwrite the default styling so it’s not a 100% by default, it will just be as wide as it’s content.

  ...

  @for $i from 1 through $columns {
    .col#{$infix}-#{$i} {
      @include make-col($i, $columns);
    }
  }

  ...

Here we actually create the classes we can make the grid responsive with. It loops through every number starting at 1 and ending with the defined number off columns, by default this is 12. It combines the fixed .col and, when it’s not the smallest breakpoint, the earlier defined $infix with the counter ( $i ) to create the class name. It uses the make-col() mixin I explained earlier to add the lines for flex and max-width.

  ...

  .order#{$infix}-first {
    order: -1;
  }
  @for $i from 0 through $columns {
    .order#{$infix}-#{$i} {
      order: $i;
    }
  }

  ...

Here we create the useful order classes for each breakpoint an each option from 0 to 12, again using the infix for the breakpoint. The first class will set the column to the first position regardless off its position. More on these classes in the docs.

  ...

  @for $i from 0 through ($columns - 1) {
    @if not ($infix == "" and $i == 0) {
      .offset#{$infix}-#{$i} {
        @include make-col-offset($i, $columns);
      }
    }
  }
}

And for the last part we create the offset classes. These classes add a margin-left based on the same percentage as the width for the columns. Link to the mixin.

This concludes all the scss magic done for you by the Bootstrap package. Now that we have all these classes, how do we use them in our html?

Using the classes in HTML

Most of the times this is where people get confused. The main thing is knowing when to add which class on what element. So to keep going in the same format, we’ll start of with the container.
You can copy the examples below and us this in a codepen, I have a template setup with v4-beta3 which you can find here.

Container

The container sounds pretty straight forward, but not to everyone. It has been confused as a row, or used nested in another container. The container should always be the outer most element in your website. So starting with a little code:

This could be the start of your website. The yellow bar is the container element, it is centered by the margin on the x axis with the auto value and has a fixed width. You can use the container-fluid class if you want to make a full width site.
to get the text in the header and footer to align with the text, you can place a div inside the header or footer and the container class. That way everything lines up.

So to be clear: this is the only thing it should be used for. The outer most element so everything aligns vertically. It can be nested in other elements, but these should not have width, margin or padding settings.

Row

The row should be a direct child of the container. This is what you should adhere to but you can deviate from this. In the example we have a row in the container with a blue background.

You might notice you don’t see the yellow anymore. Thats due to the negative margin on the row. Remember? The container adds 15px of padding on the left and the right, the row adds a margin of -15px to the left and the right to accommodate the padding on the column.
Wrapping the row in another element should be allright, but to be on the safe side only use rows as a direct child of a container or of a column.

Column

This is where the magic happens.
The first rule you really need to stick to is: columns can only be children of a row, and I’m serious here. Do not use it in any other way, only if you fully understand how flexbox works and you know all the caveats of using it in any browser. Using theses classes the wrong way can really mess up your layout in some browsers.

Ok now let’s have some fun.
If we take the example above and add the most basic column class we have to it, .col, we will see it line up with the container again.

you can see the column is exactly as wide as its parent ( the row ), but has a padding of 15px to align with the container again.

In the example below you can see a basic even width three column layout. In this example this layout is exactly the same across any screen width. That is due to the use of col-4. This class means “Take up 4 of the 12 columns, on every screen width”.

Now lets make it responsive, it’s really easy.
All we need to do is modify our column classes. We will need a default and add a breakpoint to align the columns next to each other. As Bootstrap v4 is created with mobile first in mind, the default will be for the smallest screen. To do so the class col-12 will give us a full width column. On bigger sizes we want it to go back to three side-by-side columns, we can do this by using col-md-4. What these two classes will tell the browser is: “On small screens you stack on top of each other and take up all 12 column. On screens like tablets and bigger take up 4 of the 12 and let other columns go beside it.”

Now we have responsive layout we can use in our project. The next example is somewhat a real world use.

Yes that is Nicolas Cage… he can play anything.
Same layout as the example above, but with some content in it.

Nesting grids

You can also nest grids into each other, wel you can start another row inside a column and use columns in it. Golden rule: NEVER NEST A CONTAINER.
The order to nest is and can only be:

.container
  .row
    .col
      .row
        .col
          // etc.

or if this clarifies it better: .container > .row > .col > .row > .col > //etc. This is the one thing most people seem to misinterpret about the grid. 2 common misunderstandings: using the container as a row and nesting containers inside columns.

The yellow block is a row that is nested inside the red column.

No gutters

optionally, I don’t really use it, you can add the class no-gutters to the row to get rid of the gutter between the columns. It still respects the padding of the column but removes the negative margin of the row and the padding of the columns.

As you can see the red and the blue column now have no gutters and are snuck up to each other. Notice that i only added the class to the outer row, not the nested row. As you can see the yellow row still respects the gutters. The row has a negative margin on the left and the right, thus placing the nested columns right up to the outer column edges.

Et voíla

Thats the basics of of how to use the grid. Use it wisely and keep this in mind:

.container
  .row
    .col
      .row
        .col
          // etc.

Here are some more advanced examples to learn from. They are entirely made up out of bootstrap components, plus some awesome pictures 😉.

Product grid

Banner grid

You can go all kinds of crazy with the grid, use your imagination and explore the possibilities.

Thanks for reading, hope you learned something.
Next up on the list: Display utilities, the new hiding and showing

Bootstrap v4 explained: The grid and how to use it was originally published in Afosto on Medium, where people are continuing the conversation by highlighting and responding to this story.