Generating CSS Grid Layout From Plain Text Using JavaScript and CSS Variables

Generating CSS Grid Layout From Plain Text

Using JavaScript and CSS Variables

“Person in a coat stands near a shiny silver wall in a grid pattern” by Oladimeji Odunsi on Unsplash

Background

These days there are many sophisticated tools to create web page layouts. I have always preferred to start with a plain ASCII text based layout and convert it into HTML. For long I have been contemplating writing a tool to convert an ASCII text based grid layout into web page layout. Recently I came across a wonderful tool called ASCIIFlow using which web page layouts can be quickly drawn in plain ASCII text. Below is a sample (and simple) layout:

+-------------------------------------+
               |                  1                  |
               +------+-----------+-----------+------+
               |      |           |           |      |
               |      |           |           |      |
               |      |           |           |      |
               |  2   |     3     |     4     |  5   |
               |      |           |           |      |
               |      |           |           |      |
               |      |           |           |      |
               +------+-----------+-----------+------+
               |                  6                  |
               +-------------------------------------+

The layout is built using four simple ASCII characters — horizontal borders use hyphens (-), vertical borders use pipe character (|), border intersections are marked by plus (+) symbols, and inside areas of the grid are shown by spaces.

NOTE: I have noticed that sometimes ASCIIFlow fails to add ‘+’ sign at border intersections. In such cases you have to manually add ‘+’ signs at such intersections for our logic below to work.

Our goal is to covert an ASCII text layout like the one above into a web page layout like this:

Converting ASCII Text to Web Page Layout

Converting the above layout into CSS would have been a daunting task in the pre-CSS Grid era. CSS Grid Layout specification provides a way to translate a text layout like this into CSS with the help of a bit of JavaScript and CSS variables . Let me briefly outline the steps:

1. Create an ASCII Text Layout (like the one above) using ASCIIFlow

2. Create HTML template with a <DIV> container for the grid:

<link href=”styles.css” rel=”stylesheet” type=”text/css”>

<div class=”grid”></div> <!-- grid container -->

<script src=”https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>

//This is the future home of our script for parsing the layout and generating the grid

</script>

3. Create our style sheet file styles.css as below:

styles.css

4. Using JavaScript, split the layout into individual lines — each line representing a grid row.

5. Parse each line from top to bottom to figure out where each grid area starts and ends — basically defining the ‘boxes’ that make up the page layout.

In the above layout there are 6 boxes identified by the numbers inside. So this step will create 6 box objects . See below for the structure of our JavsScript box object with explanation of each field:

{
 row: 1, // grid start row of the box
 col: 1, // grid start column of the box
 wid: 8, // grid column span or width of the box
 hgt: 5, // grid row span or height of the box
 clr: '#f7d6a7', // back ground color of the box
 opn: 1 // Is this box still open? When we get to the bottom line of the box, we will flip this to 0 - meaning, now the box is completely defined
}

6. Use JavaScript/jQuery to create <DIV> blocks for boxes and set the style variables in the <DIV> s for start row, start column, row span, column span, background color etc.

Steps 5 and 6 do all the heavy lifting and hence need some explanation.

Parsing the Layout Text

Copy the layout you have created in ASCIIFlow into your index.html file inside the <script> tag as JS variable.

Below is the JavaScript code to parse the layout and reduce it to numbers that we can analyze:

Executing the above code converts the layout into an array of numbers which can analyze. See the result below:

Chrome Console Output of Variable lines

Generating the Grid

Now we are ready to analyze the above numbers and define the boxes we need to generate on the page. See the code below:

After the above fragment executes, we will have all box definitions in the array variable boxes . What is left to be done is to create <DIV> s for each box and then set CSS variables that hold the grid properties for each box. Doing this is a breeze using JavaScript/jQuery :

Download the complete source at:

jlogix/text2css-grid

text2css-grid - Generate CSS Grid Layout From Plain Text Layout github.com

To quickly create a static web server to test the source code, create a local domain called grid.com using Chrome Dev Tools following the method I outlined in my previous article:

Using Chrome as a Local Web Server

Chrome version 65+ can double as a local static web server medium.com

The resulting page looks like:

CSS Grid Layout Generated From ASCII Text

Disclaimer:This tool is a work in progress. I have tested it with many page layouts created on ASCIIFlow . It should hold up as long as the layout contains well defined rectangular areas. YMMV. Have fun and let me know if you find problems.