August 27, 2017
Let's Build: A Consultancy Website - Part 28
Coding the Services Page - Part 2
In part 28 of my Let's Build series, I continue coding the services page. In this video, you'll see me start to fold in styles to match our design I previously created in Affinity Designer.
Working with flexbox
I utilize the display property
flexbox to achieve the three-column effect in our design. To save some time and keystrokes I like to make use of a CSS grid library called
flexboxgrid.css. You can download it yourself here.
By simply applying a few classes to a
div the CSS library allows me to create columns and rows of varying widths.
html structure required is as follows:
<!-- Two columns at 50% width --> <div class="row"> <div class="col-md-6 col-xs-12"></div> <div class="col-md-6 col-xs-12"></div> </div>
row class is what ultimately makes
flexbox work because it contains the property
display: flexbox. The contained
divs then receive a property such as
flex-basis: 50% to set up the grid like layout accordingly.
If you've ever utilized Bootstrap in your projects you might see a similar class naming structure going on here. The only real difference is that this CSS library uses flexbox whereas Bootstrap (at the time of this writing) utilizes floats.
Coming up next
The next part of the series will be another session of styling to get a new call to action and inquiry form looking like our design for the services page. Later, I will integrate the form to receive responses.