• April 12, 2018
• CSS Styling Development

Introducing SquareKnot: Our Responsive CSS Platform

Over the last few years we have used several different CSS platforms for building our custom websites. Just to name a few: bootstrap, pure, layers, skeleton, etc. What we have found is that either the platform was too heavy and included too many unused features, or it was not quite enough and we had to spend a lot of time adding customizations to make it work the way we needed it to.  After some careful thought, we decided to build our own platform, using the tools we need frequently and adding the rest based on the specific site needs.  The result? SquareKnot.

Why SquareKnot?

Well, if you know anything about ropes and knots, a square knot is an ancient and simple binding knot used to secure a rope or line around an object. The CSS platform is that binding agent that holds together the entire site layout so we thought the name was very appropriate.

What’s Special About It?

SquareKnot provides the basics for a mobile-first, responsive, flex box grid system along with simple styles for a fast and clean starting point. While it is not a full-fledged css platform, SquareKnot provides the foundation on which your entire website can be built. If you need additional styling, create a new style.css file and add to/overwrite anything you need to change.

Why Do Customers Care?

There are a couple of reasons actually. First, less time spent reinventing the wheel every time we build a website equals less hours worked and an overall lower price. More importantly, the speed. SquareKnot is lightweight and fast! It only weighs 8kb.  So while other websites are loading 1,000’s upon 1,000’s lines of code (most of which aren’t even being used), our customer sites using SquareKnot are sleek and quick, which is what web visitors want.

Designed For WordPress

Since we primarily work with WordPress based websites, we obviously needed something that would work with WordPress. This is another area where many existing CSS platforms failed.

For example: let’s say we were creating a blog and wanted to display the posts in columns of 3 per row.  Using bootstrap or other similar platforms the code would look something like this:

<div class="row">
  
<div class="col-sm">One of three columns</div>

  
<div class="col-sm">Two of three columns</div>

  
  
<div class="col-sm">Three of three columns</div>

</div>

And that will create a 3 column grid layout. But what if you want 3 column grid layout and you have 5 posts? In bootstrap, this would push down to another row, but the margins and padding would be off. So we would have a: create a special loop that only returned 3 items at a time, or b: create some custom css to target the nth-child of each row.

Enter SquareKnot. Instead of using the row class, we use a grid class. Our columns will automatically create a new row as needed a maintain correct padding and margins. So lets go back to our previous example of needing 5 items returned but a 3 column layout. This is how we do it:

 
<div class="grid">
<div class="column span-4">1/3 width column</div>
<div class="column span-4">1/3 width column</div>
<div class="column span-4">1/3 width column</div>
<div class="column span-4">1/3 width column</div>
<div class="column span-4">1/3 width column</div>
</div>

 

Examples of SquareKnot in Use

We are using it right here on the RiotAct Studios website. It was a our first test subject! But otherwise, you can check out all the bells and whistles at getsquareknot.com.  At the time of this writing, we have 2 client sites under construction that are being built with SquareKnot.  In the future, we will list each of our projects that use it.

Do you need a mobile friendly website that is lightening fast? Let RiotAct Studios help you with your next project.