The CSS Framework Rabbit Hole


Happy Halloween!

I went down the CSS Framework rabbit hole tonight. I went on a hunt for a Bootstrap alternative that is 1) lightweight, 2) uses “em” in its media queries, 3) has a decent color palette selection, 4)  syntax that is intuitive and easy to remember, and 5) has control over the grid gutters. I couldn’t find one. I looked at about 25 different frameworks. Did you know there are over 100 of them?

Many of the frameworks had poor documentation and some had good documentation but no examples- and some were only a GitHub page with a couple lines in the description. If I’m searching for a framework to try out, I don’t want to clone a bunch of repos and try out each one individually. I want pretty pictures and code samples!

Foundation came close. It’s a pretty solid framework. It has lots of features and it uses “em” in its media queries. It only has the basic color options though, like the same ones in Bootstrap. I’m not a big fan of the form design either.

I think I landed on a possible plan. I am still mulling it over though. At the moment, I’m leaning towards Yahoo’s Pure CSS Framework. I haven’t actually played with it yet, but their grid system looks quite nice. The framework is minimal, yet still has some good features. However, to add the grid it takes an additional CSS file. Not a big deal, but it would be nice to get it all in one file for convenience. So, I’m thinking I could go with Pure’s grid system and then just grab the modules from Bootstrap that I want. That’s one option, out of many.

Not that Bootstrap is bad. It’s great actually, and I basically went full circle during my search today. Meaning, after I looked at all of the different frameworks I went back to Bootstrap’s webpage and compared my findings. I think it’s the most popular CSS Framework for a reason. It really is one of the best most complete and easiest to learn. Best is too subjective, but I’d still say the top 3 frameworks are Bootstrap, Materialize, and Foundation. I have a tendency to rebel against the most trendy things in life, such as Bootstrap, which is the reason I went off in search of another framework I think.

I have the same issues with Materialize as I do Bootstrap. I don’t ever use all of their features, so the download ends up being unnecessarily bloated. On the other hand, having easy access to all their features is nice. Also, the media queries use px instead of em. Otherwise, they’re fantastic.

It’s a tough decision. Do I go with light weight and minimal features with a modern grid system that I like, or more features than I need and an outdated grid system? Hhmmmm.

That question actually lead me down another path tonight. I wanted to form my own opinion on the CSS file size controversy. Right now, the default Bootstrap 4 minified CSS file is 125KB. There is a lot of talk online about how that is a ‘monolithic’ file. That’s a quote actually. I actually read that somewhere in my research tonight. But it’s not though, even for a cellphone. Consider this, back in 2003 3G was running at about 200 kilobits\sec at peak. That is about 25KB\sec. It would take about five seconds for that Bootstrap file to download. Now, yeah, that feels like forever when you’re staring at your screen, but it’s not 2003. Ok, so let’s fast forward to 2012, when PCWorld ran a test. They found that 3G was ranging from 590 to 3840 kilobits\sec depending on the carrier. At 590kb it would take about two seconds for that Bootstrap file to download. Additionally, that test looked at 4G as well. In 2012, 4G speed was ranging between 2810 – 9120kb, and at the lowest 4G speed the file would download in a little under half of a second. Should I still be concerned about using a framework that fits in a 125KB file, in late 2017? That’s not even mentioning that a popular system like Bootstrap is likely already on the device. So I don’t know; I’m gonna have to analyze it a bit more and sleep on it. ¯\_(ツ)_/¯

But with all that said, in the interest of becoming a better developer and broadening my knowledge, I am going to dig into all three of them, and Pure, and learn how to work with their core functionalities. In the end I am predicting I’ll stick with what I know, Bootstrap, or go with Foundation.

I’ll end with some reading material and a cool CSS compiler I found:



git checkout -b blog-post


I just added a new “Find Me” page to the blog and added some profile links in there. I also added a “Tags” widget. I’m nearing the end of my Full-Stack class at, so I’ll be looking for work soon. I’m trying to get all of the various networking platform stuff sorted out. Cross-linking between various profiles and updating contact info and things like that. I don’t have an official portfolio setup yet but I’ll get to that soon. It’s on my long list of things to do.

I’m still working on the final project for the server-side curriculum. I should be done with it this weekend. I’ll get a link posted here when I push it up to Heroku.

This past week I started learning about Handlebars.js. It’s more complex than I thought. I mean, in general, the idea is fairly simple, but the amount of control goes pretty deep. For example, I think it’s pretty cool that I can choose which links to appear whether a user is logged in or not. It’s a pretty handy tool to have in a developer toolbox.

I’ve also been practicing a lot with Bootstrap 4. That’s almost becoming second nature to me now. I’m interested in checking out a couple more CSS frameworks, like Foundation and Materialize, but I haven’t had time yet.

On a personal note, I’ll be on paternity leave November 7th to December 22nd. I probably won’t have a lot of blog posts between now and the end of December.

Responsive Design and the DOM


Last week I had my first exposure to the Document Object Model (DOM) in my JavaScript course. Today I get my first exposure to responsive design in my coding bootcamp.

For my first time working with the DOM, I created a game that manipulates the DOM by cloning and deleting nodes. On a side note, I have been putting in a lot of practice with Git and Git hub, so I have pushed that game to my profile. Here’s the link:

I want to share a few things I learned yesterday. I was creating a mock signup page and I learned some good lessons about CSS layout. I had some code that looked like this:

<div><a class="forgot-pw" title="forgot password" href="/forgot-password/new">Forgot Password?</a></div>

…which was wrapped inside of a form. I was trying to center the text. I succeeded, however, my mentor from pointed out that I could get rid of the div tags, set the anchor as a block, and then use text-align to center it. That worked perfectly and I learned that I shouldn’t get div-happy. I think in most cases, less elements is better. In a similar instance within the same project, I had a paragraph tag wrapped by a div, which I was also trying to center. I applied the same steps to it and got the text to align properly. It makes a lot of sense.

I also learned another thing yesterday while reviewing a previous project. In a fake Craig’s List page I was creating, I had a static header at the top of the page with a couple of navigation links in it. I treated the entire header as the nav, so I targeted the nav element when I setup all the style declarations. My mentor from Thinkful was discussing the project with me and he showed me how I should be targeting the header and making that static, instead of the nav. It made a lot of sense. So I should be setting the header as static and treating everything within the header separately and positioning them accordingly. Such as a logo and nav links.

It was a good day of coding yesterday. I learned some valuable lessons that I’ll take with me through this journey.

I forgot to add some links in my previous post. Here’s a few things I’ve been reading and watching:

  • I took a little side trip into Jekyll. I had heard about it but had no idea what it was or what it did. Now I have a brief understanding of it. Seems like a pretty cool tool! Plus, I love that guy’s tutorial videos. I’ve watched lots of them. He does a great job at teaching!
  • I found this simple interactive Git tutorial.
  • I found an interesting, concise article about how we should be naming our classes. I’m guilty of the “bluetext” or “marginbottom” names.



My classes are moving at a fast pace now. At I just finished a JavaScript project and at I just finished up some CSS positioning lessons. It’s like drinking from a firehose! I’m having trouble keeping track of all the new things I am learning that I want to get logged here. Just over the past week I was introduced to Git and GitHub- GUI and command line. I learned the Git commands that I’ll be using the most as a developer. I’ve been practicing them in Git Bash. I’ve also checked out GitKraken to see what the GUI is like. I will be checking out SourceTree soon as well. The Git flow is taking me a little while to fully grasp but I’m getting there. I’ll have it down like an old habit soon. I’ve also been working out of three different code editors- Sublime, Atom, and VS Code – so I can get a feel for all of them. My goal is to pick one and move forward with that. Right now, I am leaning towards Code. I basically made a list of all the features I want my code editor to have and then figured out which editor I can get there with the least steps. Sublime wins; it comes with the most features out of the box. However, for some reason there is a draw to Code that I am having trouble resisting. I just like it a lot. So why fight it. I’ll most likely make that my go-to.

This is what my feature wishlist looked like. This is an out-of-the-box comparison.

  • dark theme (atom, sublime, visual studio code)
  • auto-indent \ beautify \ format (sub, code)
  • html boilerplate (sub, atom)
  • emmet (code)
  • vert guides (sub)
  • minimap (sub)
  • last line of code can be scrolled to the top of the screen (sub, code)
  • multi cursor edit (code, sub, atom)
  • insert lorem ipsum text (code, sub, atom)

As you can see, Sublime ticked almost all of the boxes. I should totally go with Sublime, but like I mentioned I am just drawn to Visual Studio Code more. From a fresh install of VS Code, all I need to do to get it up to speed, is install extensions for the boilerplate code and the vertical guides. The rest, such as the minimap, is enabled in settings. Pretty simple to get my coding environment to my liking. That’s exactly what I want too. I want the least amount of setup as possible.

Here’s a few things I learned lately:

  • The other day I had a realization about the CSS display declaration. I was having trouble fully understanding the difference between inline and inline-block. It finally clicked! I use inline-block if I need the element to fit inline AND if I need to adjust its dimensions. If it’s just inline, then I can’t adjust width and height.
  • I learned a couple methods for eliminating white space between inline divs. That’s something I have struggled with prior to these classes that I’m taking. If the divs are on separate lines then the browser renders the carriage return as a space, so by keeping the divs butted up against each other it will eliminate the space. Another method is to add “font-size: 0” to the parent.
  • I had another ah-ha moment when I was working on a JavaScript project. I was using a while loop but I couldn’t figure out why my variable wasn’t getting iterated. Well I realized I had the variable called within the loop so it was always getting reset every time the function was called. I placed it outside of the loop but it still wasn’t working properly. Well then I realized my while loop was looping until my variable was zero, so then it was reset back to the initial value each time the function was called, rather than iterating. That’s when I discovered the power of For Loops! I learned how to use an index to iterate, and then my project worked! It was such an awesome feeling to have one of those moments. I had been trying to get my code to work for at least two hours. As soon as I got the For loop dialed in everything worked! That’s the best feeling when I figure something out and learn something valuable at the same time.


There is probably a ton more to share but like I mentioned it’s all going so fast now! I’m learning a lot and I am really enjoying it too.

Bootcamp: Day 1


Today was the start of my Web Developer Bootcamp at I’m really happy with my decision so far! I think this is going to be a great experience!

As expected, it starts out with the basics. Here are some of the things I did today:

  • Learned how to use
  • Installed Sublime text editor and learned how to: access the command palette, use the tab completion feature, setup a folder structure in the side panel, install Sublime packages, use the multi-edit feature, and some other handy keyboard shortcuts.
  • Review of basic HTML and CSS.
  • On my own, and unrelated to the class, I took a break and learned how to create a triangle using CSS. At first I couldn’t wrap my head around it. I couldn’t figure out how the triangle was formed by making the adjacent sides transparent. Then I found an animated gif that showed how the borders meet an angle. Then it all made sense. Pretty cool stuff!
  • Then I went back to my class and learned more about the Sublime editor, which lead me to these helpful pages:
  • I’ve been including some links with each entry, so on-top of the two above here is an interesting article I read today about creating standards within the coding bootcamp communities.

JavaScript and Bootcamp


I’ve made a lot of progress in the last 37 days! This could easily turn into a novel, but I’ll attempt to keep things concise. In a nutshell though, I continued to review and refresh topics I was already familiar with, going into February, and then eventually getting into JavaScript around the end of February. I am now deep into uncharted territory, as far as my skillset goes. I’m now learning something new each time I work on a new lesson. This is my first time taking a structured JavaScript course. The only exposure to JS that I’ve had in the past has been completely self taught by means of copying existing code found online and tweaking it to meet my needs. And doing that takes a very long time because I have to research every little baby step along the way. So what ends up happening is I get the code to work, however, I don’t know exactly why it works nor do I understand each element of JS. Now though, I’m starting to understand it; and it’s fun! I’m really enjoying learning JavaScript so far.

I’ve got some other exciting things to mention as well. I’ll list them out now, in semi-chronological order.

  • At the beginning of February the course that I was working on at Codecademy was touching on the CSS selectors Display and Visibility. I learned about inline, inline-block, and none, and how they work in relation to the elements around them. I also learned about the difference between display: none and visibility: hidden. The former removes it from the page and hidden still leaves space reserved for the element on the webpage, although the content is not visible without checking the source code.
  • Around mid-February is when I started getting beyond my current knowledge of CSS. The selectors and properties that I was learning about were a little familiar to me but I didn’t fully understand them. Like, I had used them in my code before but I didn’t have a solid understanding about how exactly they worked. Such as pseudo-classes and how to target nested elements. I learned how I could target an element that was several Divs deep and I learned how to use the first-child and nth-child pseudo-classes. An all new topic for me was the CSS selector Box-Sizing. I learned how it could be changed so that a container’s dimensions aren’t changed when padding and margin values are added. Around that time I also did a deep dive into CSS positioning. Relative and Absolute had always confused me, but I have a good understanding of both now! This video (and part 2) helped me a lot!
  • Mid-February was a time when I was deeply contemplating my future. Getting a new job that pays well is really important to me. The pressure is weighing on me, so I was thinking about how I could step up my coding practice and what else I could do to improve my chances of getting a job. I thought of a couple things which I’ll be doing very soon: starting a YouTube channel as another avenue to track my progress and I’m going to buy a domain to use for my portfolio and resume.
  • I also made a decision to sign up for an online coding bootcamp. The free courses and cheaper self-pace courses weren’t going to cut it in the end. I looked at all the major ones and landed on I signed up about two weeks ago and I just had my first orientation video conference tonight. It went very well and so far I feel like I made an excellent decision. It’s a six month Full-Stack course. When I initially decided to go for a web developer job I was aiming for a Front-End position, but that has changed now. I am going to set my sights on learning the full stack*. It’s going to be a long difficult path but I am in high spirits right now and feeling very determined! *blog tagline updated from front-end to full-stack ; ).
  • When deciding which bootcamp to go with I had sent an email to Thinkful and the response I got was quite helpful. I wanted to know why they were teaching React when most of the other bootcamps were teaching Angular. They told me that in their research React had overcome Angular and they foresee it being more widely used in 2017. That was the first time I had heard anybody say that, and that was after reading several articles on the topic, and even watching a lot of YouTube videos about it too. I didn’t agree, to be honest. So I went to all the major online job boards and took a poll. Sure enough, he was right! Although Angular is still pretty hot in the Seattle area, React got more hits on almost all of the job sites. During my video call today I asked about using React with Node because I was under the impression most developers were using Node in the MEAN stack. That’s when I learned about MERN!
  • Around the same time I signed up for Thinkful, I also signed up at Slack and Codepen. Immersing myself in the coding community will be important moving forward. This needs to be my life for the next six months in order to be successful. I found another free website called FreeCodeCamp. It looks like a really great site. Not sure if I’ll use it though, because a majority of my time will be taken by Thinkful.
  • Back to some of the coding topics I’ve been learning. I dipped my feet into the JavaScript pool. I started with posting “Hello, World.” to the screen and now I’m learning about generating random numbers. In between, I learned about conditional if-else statements, switch cases, functions, loops, and global variables. I learned something about variables that I found interesting. Depending on how they are declared within a function can make a big difference. E.g. if I use “var”to declare a variable inside of a function then the variable remains local, but if I don’t use var, and the variable has not yet been introduced, then the variable becomes global. I think I got that right. I hope.
  • I added a new tool to my kit. I started using the built-in browser dev tools to troubleshoot my code. I don’t know how I’ve went this long without even checking it out. I guess maybe I assumed it would be too advanced for me to understand, but it’s been very helpful. I also downloaded Atom and Sublime. I’ll be checking those out very soon. I’ve been solely using Visual Studio Code so far.
  • In my past few entries I’ve shared some videos and articles. Let’s keep the tradition going! When I learned that I will be studying React instead of Angular, I decided to do some research. So here is one of the videos I watched; it’s Dan Abramov giving a presentation about Redux. Here’s an interesting article about vertical alignment using CSS. And last, here is a video that I found helpful. It’s about finding a web developer job if you don’t have experience.

More HTML and CSS Progress


Still working through the free lessons over at Codecademy. Most of it is still review as well. Although new topics are starting to become more common. Tonight, some of the topics that were new to me were:

  • linking to Google Fonts- it was my first time learning that Google has a repository of free fonts that developers can link to. I think that’s pretty cool! It allows devs to use a font that would still be displayed even when it’s not installed on the end-user’s device. I’ll link to it at the bottom.
  • the word “leading” in reference to adjusting line height. I have long known how to adjust line height but the lesson taught me exactly where the adjustment takes place. That was my first exposure to the terminology.
  • kerning in ref to letter spacing. Same kind of thing as leading. Although I had hear of the term kerning I didn’t know the meaning of it until I went through the lesson tonight.
  • using a number for font weight. This was new to me. I know it’s very basic but I had always used “normal” and “bold.” So this is cool. It opens up a new door for me.
  • text-transform. This was totally new to me. I didn’t know that it was possible to transform text between upper and lower via CSS.
  • min and max width and height. Another new one for me. I think the lesson I went through tonight it preparing for a future Responsive Web Design course. I learned about establishing minimum and maximum width and height. Cool stuff!

Also, I dived a little deeper into the “em” measurement. The lesson did an ok job at explaining it but I was still confused. With a search I found a page that explained it quite well. I’ll link it at the bottom.

In my last entry I closed with two links to coding videos that I liked. This time I have one article and one very helpful webpage to link to:

  • This article helped me understand the “em” measurement.
  • If you haven’t heard of Google Fonts you should check it out!