How I Used CSS & JS to Remodel a Condo
UPDATE: If you’d rather watch the recorded talk, it is embedded at the end of this article.
Remodeling a condo in a 50 year old building is a miserable experience. An even worse idea is doing the physical work yourself while trying to run a tech consultancy/software dev firm. Living in the space while you do it is downright masochistic. My advice: don’t.
However; if you really want to update your living conditions and have a DIY attitude, you may choose to take the work on yourself. If you don’t want to take the extra time to learn professional software, then you’re in luck. This article will walk through DIY software tooling for renovations.
Remodeling is Tougher Than it Looks
The job I found particularly painful was tiling (judging by my whine-o-meter). Aside from bowed walls and other uneven surfaces commonly found in older buildings, the actual layout was more challenging than it sounds. This is especially true when using large format tile, such as the 12x24" rectified porcelain wall tile. Unlike smaller tile, waste can accumulate very quickly because large tile is unforgiving (plenty gets cut off). This type of tiling also uses a thinner grout line (1/16" instead of 1/8"), so it requires precision.
The end result is magazine-worthy, but getting there is a challenge.
Before/After
For context, here are some obligatory before/after photos to give you an idea of the challenges code helped overcome in this project.
How Can Code Help With Remodeling?!
Planning.
Renovations succeed with proper planning. Precise measurements/calculations are very important to getting the job done right. CSS is a great way to do layouts, and JavaScript is a great way to extract measurements from a CSS layout.
Consider the consequences of poor planning.
The smallest mismeasurement may create exponentially negative effects. For example, when laying tile, if your first tile placement is angled even 1/32" off, it will create big grout line gaps.
See the highlighted gap in the wall tile below? That gap was about 5/8", which is very noticeable. I didn’t see this until putting on the last row of tile. It turned out the original calculation was off by 1/16", two rows down, 9 feet to the right of this!
In software, we hear about DRY development (Don’t Repeat Yourself). Tile jobs should follow a DRY procedure, because pressing the “delete” button with tile usually involves a real sledgehammer.
Kitchen.css
A conscious choice was made to avoid a typical backsplash, so a large format rectified designer tile was chosen to fill two entire kitchen walls, in a columnar/stacked grid.
Wall tile is supposed to be centered, both horizontally and vertically on each wall. The main challenge is working around cabinets, appliances, doors, and other objects.
After having to re-do more than one tile job, I decided to use CSS to make sure my layout was correct. I started out by creating a flexbox layout to represent these walls:
Codepen snippet available at https://codepen.io/coreybutler/pen/jeJyLP.
Next, I added objects that should not be tiled over — like cabinets, electrical outlets, appliances, and the door. I also specified tile sizes, grout line sizes, and colors using CSS variables:
body {
--grout-color: #fefefe;
--grout-line: .625px; /* 1/16" = .625px */
--tile-color: #f1f1f1;
--tile-height: 117.5px; /* 11.75" x 10px per inch */
--tile-width: 237.5px; /* 23.75" x 10px per inch */
--center-line: red;
--installed-color: #336699;
}I chose to use a scale of 10px per inch. This worked, but caused a number of rounding issues. For example, tile is often smaller than the dimensions listed on the box. A 12"x24" tile is actually 11³/4" x 23 ⁵/8" (or sometimes 23 ³/4" depending on the brand). On a 10px/inch scale, this meant 11.75" turned into 117.5px and a ¹/16" grout line converted to .625px. Sometimes this fraction of a pixel caused a rounding issue when calculating the total height. Some tiles would show up as 11.7" while others were 11.8" (they’re actually 11.75"). Regardless, it still gave me a starting point to work with. If I did this project again, I would use 16px per inch, since American tape measures have ticks every 1/16".
I also specified an installed CSS class to apply to each tile once it was physically placed on the wall, thus helping identify which tiles were done and which still needed to be cut. These are the blue boxes in the example above.
The use of a CSScounter_increment also provided a quick and easy way to label tiles and identify which ones needed to be cut. Some basic JavaScript math and a console.log gave me a quick and dirty spec for my tile cuts.
Notice (on the result tab) the red centering lines. These are important with tile layout because you have to decide whether you want the tile centered or the grout line centered. Both are acceptable designs. However; large format tile can produce a significant amount of waste, depending on the area you’re trying to cover. It’s important to check both patterns to determine which works for your situation.
Though the difference is subtle, you can see the red vertical line below is almost on the white grout line:
That’s a “close, but no cigar” situation.
Centering on the tile provided a more symmetrical look, which is ultimately a cleaner look/feel (a major goal for this kitchen).
The main point is CSS can be used to rapidly modify/view layout changes without having to physically redraw the layout.
The following code block allowed me to toggle between the layout patterns rapidly, making it easy to see how much scrap I would have and whether I even liked the look of the alternative layout.
.left.spacer {
margin-right: -175px;
display: flex;
flex-direction: column;
z-index: 0;
background-color: #000;
}Adjusting CSS margins is a hack, but it worked in a pinch.
Kitchen.js
The JavaScript code is pretty minimal, only 56 lines in total.
The first 15 lines of code identify the UI elements, such as the actual tile DOM elements. Lines 13–15 apply a special class to determine whether tile is at counter level (i.e. kitchen countertop, not an iterator).
The juicier bits start at line 17, where the last column of tile is identified. This is important for a columnar design, as opposed to a row based design. Tile is laid from left to right or right to left, so the first/last column can potentially be different (shorter) than other columns in the job.
The real “magic” happens in these lines:
tiles.forEach((tile, i) => {
let width = tile.offsetWidth
if (tile.parentNode === lastColumn) {
width = (document.querySelector('.wall').clientWidth - tile.offsetLeft)
} else if (tile.offsetLeft < 0) {
width += tile.offsetLeft
}
let height = tile.offsetHeight
if (tile.classList.contains('counter_level')) {
height = tile.offsetHeight - ((tile.offsetTop - counter.offsetTop) + tile.offsetHeight)
} else if (tile.offsetTop < 0) {
height += tile.offsetTop
}
tile.setAttribute('tile-height', height/10)
tile.setAttribute('tile-width', width/10)
console.log(`Tile #${i + 1}: ${width/10}" wide x ${height/10}" tall`)
})The block of code above loops through all of the DOM elements (tiles), enforcing a specific width and height matching the type of tile you’re installing. It also logs the size of each tile.
The rest of the code prepares a rudimentary progress report, citing how much tile has been installed and how much hasn’t.
Code Recap
Aside from the HTML, there really isn’t any additional logic/magic. This whole application leverages CSS flexbox to construct a mockup. The JavaScript does the math. That’s it.
The code is simplistic and even hacky in places, but that’s not really the point. The primary point is web technology can be used to do something real. Applications aren’t always pretty. The user interface for everything I created could certainly be improved, but the UX for the job at hand was phenomenal. In very short time, I was able to visualize the physical work that needed to be done. More importantly, it gave me the confidence to do the job well.
Code & Construction Skills
Aside from two big kitchen walls, I also tiled two bathroom showers, two vanity walls, and two bathroom floors. There were 7 tile jobs in total. They were mostly small, but this was also my first time tiling anything.
Since showing the end results to a few people, I’ve been asked multiple times where I learned how to do tile and how many times I’d done it before these jobs. There tends to be a look of shock and awe when I tell people this was my first time. The truth is YouTube taught me the basics of how to spread thinset/mastic on a tile, how to use a wet saw, and how to use a tile splitter. The rest was stuff I already knew, like CSS layouts and JavaScript.
Aside from this being a relatively novel use of web tech, it also showcases how skillsets can cross over into other industries.
Why Not Use Professional Software?
There is alot of software on the market for home design, and much of it looks great. HGTV makes it look really easy to use, but that’s TV. The truth is pro home design software that actually provides enough detail to construct something real requires training, understanding of construction jargon, and a sizable budget. For home flippers and professionals, it’s a cost of doing business. For the self-improver, store-bought software is a significant increase in both time and budget ($1000+ for something that kind of works).
Existing Tile Layout Tools Suck
How hard can it be to put together a simple grid pattern? “Very”, apparently.
Some tile shops have online tile layout software attempting to do this. The stench of technical debt in those apps lingers on every button click. I thought, “There must be some decent tile layout tools online”, but I never found one. I came across an old Flash-based one, which was only available in the metric system. That’s hard to use when you live in the USA. The online tools couldn’t measure 1/16" grout lines (the thin ones), because they were built around old standards/trends before rectified tiles were a thing.
Rectified tiles have edges that are mechanically engineered for perfectly straight/square edges, allowing grout lines to be thinner. Traditional tiles have a bevel, which makes it easier to grout, but has a bigger 1/8" line.
Most of the software couldn’t even handle 1/4" increments to account for variations in tile size/cuts. In fairness, I was able to get reasonable results with a trial version of Chief Architect, but even that required some hacky work to align a grid on the wall… and the trial won’t let you save your design. Buying it? Yeah, this project already set me back… I didn’t want to spend another $1K on software I was going to use once.
I tried graph paper too, but “reconfiguring” it to see layout adjustments meant redrawing the layout.
Final Thoughts
In the end, I was really glad I took a little time to hack a DIY tool together. It was a good learning experience and it was faster than everything else I tried.
I’m also happy with the results of the overall project, especially since it was my first residential renovation. Now my home feels more like an urban loft where I can watch the city of Austin grow around it.
Update: Presentation
I talked through this in a recorded presentation for a Bleeding Edge Web meetup at Capital Factory (which happens to be a 7 minute walk from this condo).
Update: Sold
Well… I sold the condo. Ironically, the buyer found out about the unit by reading this article!
It’s bittersweet since it took 18 months to convert into something great, but it’s time for the next chapter.
I bought an older custom home with intentions of renovating and converting it to a smart home over time. I’m actually looking forward to finding even more ways to hack together remodeling software. If you are also interested in practical application of code like you’ve seen in this article, follow me for more like this in the future.
If you liked this, remember to clap for it!
