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.
Simply download the squareknot.css file and include it in the header of your project. We suggest creating another style.css file to add more css styling or to overwrite SquareKnot styles. If you are creating a WordPress theme, you are required to create a style.css file.
First, download Squarekot, then just add these tags in the head section of your website. SquareKnot uses ‘font-family’ Open Sans created by Steve Matteson and provided by Google. We have included the links to this file as well.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
<link rel="stylesheet" href="/path/to/css/squareknot.min.css">
The grid is a 12-column fluid grid with a max width of 1040px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
Creating a grid is simple. For example, if you have a grid inside a wrapper using the container class, span-4 will divide the total width of the container (1040px) by 3 (the number of times you can divide 12 by 4) and arrive at roughly 346px.
<div class="container">
<div class="grid">
<div class="column span-4">Content</div>
<div class="column span-4">Content</div>
<div class="column span-4">Content</div>
</div>
</div>
SquareKnot was created with WordPress in mind. We ran into difficulties with other css grid systems when using dynamic content where the number of grid items is unknown. You only need to insert the grid class once and SquareKnot will do the rest. For example if we have 5 grid items but still want to display 3 per row this is all we have to do:
<div class="grid">
<div class="column span-4">Content</div>
<div class="column span-4">Content</div>
<div class="column span-4">Content</div>
<div class="column span-4">Content</div>
<div class="column span-4">Content</div>
</div>
By using column-flush span-# you can create columns which are flush against each other.
CSS3 introduces a few new units, including the rem unit, which stands for “root em”. The rem unit is relative to the font-size of the root element html. That means that we can define a single font size on the root element, and define all rem units to be a percentage of that. The typography has font-size defined in 1.6rem (16px) and line-height in 1.6 (24px). SquareKnot uses the font-family Open Sans, created by Steve Matteson, and provided by Google.
h1 4.6rem (46px)h1 3.6rem (36px)h1 2.8rem (28px)h1 2.2rem (22px)h1 1.8rem (18px)h1 1.6rem (16px)SquareKnot also scales the font-size down a bit for mobile devices under 750px device width to better fit the screen. Go ahead, resize your browser.
The List is a very versatile and common way to display items. SquareKnot has three types of lists: The unordered list use ul element will be marked with a outline circles, the ordered list use ol element and your items will be marked with numbers, the description list use dl element and your items will not be marking, only spacings.
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
<dl>
<dt>Description list item 1</dt>
<dd>Description list item 1.1</dd>
</dl>
Forms are never fun, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other. SquareKnot helps to make this much easier with design focused on the user experience.
<form>
<div class="grid">
<div class="column span-6">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
</div>
<div class="column span-6">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
<div class="column span-12">
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Matt …" id="exampleMessage"></textarea>
</div>
<div class="column span-6">
<input class="button-primary" type="submit" value="Submit">
</div>
<div class="column span-6 text-right">
<label class="example-send-yourself-copy">
<input type="checkbox"><span class="label-body">Send a copy to yourself</span>
</label>
</div>
</div>
</form>
The Table element represents data in two dimensions or more. We encourage the use of proper formatting with thead and tbody to create a table. The code becomes cleaner without disturbing understanding.
| Name | Age | Height | Location |
|---|---|---|---|
| Stephen Curry | 27 | 1,91 | Akron, OH |
| Klay Thompson | 25 | 2,01 | Los Angeles, CA |
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Height</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen Curry</td>
<td>27</td>
<td>1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td>25</td>
<td>2,01</td>
<td>Los Angeles, CA</td>
</tr>
</tbody>
</table>
The Code element represents a fragment of computer code. Just wrap anything in a code and it will appear like this. if you need a block, by default, enter the code within the pre element.
.squareknot {
color: #3c94d3;
}
<pre>
<code>
.squareknot {
color: #3c94d3;
}
</code>
</pre>
SquareKnot provides a very useful, responsive, mobile-friendly layout option for placing media into your website. You can place images to the left, right, or above your text, and in a mobile browser, all images will be above your text. This is done with image-left, image-right and image-top. We recommend to add width="100%" to your image to ensure that it is responsive. Resize your browser and check it out.
Some text here…
Some text here…
<div class="grid">
<div class="column span-6 has-image">
<div class="media image-left">
<div class="media-image">
<img src="http://via.placeholder.com/350x150" width="100%" />
</div>
<div class="media-body">
<h3>Heading Title</h3>
<p>Some text here...</p>
</div>
</div>
</div>
<div class="column span-6 has-image">
<div class="media image-left">
<div class="media-image">
<img src="http://via.placeholder.com/350x150" width="100%" />
</div>
<div class="media-body">
<h3>Heading Title</h3>
<p>Some text here...</p>
</div>
</div>
</div>
</div>
SquareKnot has built in message css to make adding alerts easy. To keep things lightweight, there is no built in dismissal script, but adding some jQuery won’t be difficult since the design is already included for you.
<div class="grid">
<div class="column span-12 alert alert-primary">
This is a primary alert—check it out!
</div>
<div class="column span-12 alert alert-secondary">
This is a secondary alert—check it out!
</div>
<div class="column span-12 alert alert-success">
This is a success alert—check it out!
</div>
<div class="column span-12 alert alert-danger">
This is a danger alert—check it out!
</div>
<div class="column span-12 alert alert-warning">
This is a warning alert—check it out!
</div>
<div class="column span-12 alert alert-info">
This is a info alert—check it out!
</div>
<div class="column span-12 alert alert-light">
This is a light alert—check it out!
</div>
<div class="column span-12 alert alert-dark">
This is a dark alert—check it out!
</div>
</div>
SquareKnot has some functional classes to improve the performance and productivity for common necessities.
Aligned Text
<div class="text-center">Text Aligned Center<div>
<div class="text-left">Text Aligned Left</div>
<div class="text-right">Text Aligned Right</div>
Text Size
<div class="large">Paragraph Text is 2.0rem</div>
Easy Floats
<div class="pull-left">Float Left</div>
<div class="pull-right">Float Right</div>
<div class="clear">Floats Cleared</div>
Full Width
<div class="full-width">Element is Full Width</div>
<div class="max-full-width">Element is Full Width but run out of containers</div>
SquareKnot uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how SquareKnots grid is built and is the preferable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are:
/* Mobile first queries */
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}
While not designed for old browsers, SquareKnot has support for some old versions, but we recommend using the latest versions of their browsers.
Our responsive grid design requires the browser to support display: flex. Internet Explorer 9 and lower do not support this.