Revamped the CSS for the blog

July 06, 2020 | ~7 Minute Read

Reason

Lately I have been working on several web projects as practice for programming / web development. As part of those projects I have been looking for a way to write the CSS for them following the KISS principles.

I know that there are amazing and fully fledged CSS frameworks like Bootstrap or Bulma but since I consider myself still a learner and not a full fledged developer, I try to stay away from them. I feel like learning how to use the frameworks won’t help me learning CSS itself.

Initial struggles

One thing I had been having issues with was coming to terms with some sort of standard to use for the CSS in my projects. It was kind of hard to determine what should go first, what second, etc. I had tried to come up with different methods of my own as far as convention and syntax, but it was hard to remember from project to project.

The alternative

A friend with whom I was working with on my last project shared an interesting CSS project, Basic.css. I took a look and immediately thought it was a perfect way to do CSS for all of my projects.

I really like the simplicity and usage of variables in CSS, I did not know vanilla CSS could do that, I’m guessing the SASS folks didn’t either? :P

Using the Basic.css core and then making my own tweaks to it, I came up with my own base CSS style file. In the future all I have to do is write minimal CSS for specific parts of whatever project i get to work on, and I’ll have consistent and KISS compliant CSS.

I feel like the flexibility is amazing, and I’ll only write CSS that is actually used, instead of having 95% of a framework’s features unused and their code taking up space unnecessarily.

Updating the CSS for this blog

I decided that as part of adopting the Basic.css project’s methodology / base, I could not go one more day without updating the CSS that I had written for this blog.

When first creating the blog I had every intent to revisit the CSS I had written and polishing it up a bit, however I never did. While doing it now, I noticed just how much repetitive and unnecessary CSS I had laying around. I’m definitely glad that I got around to doing this.

Positioning in the blog

I didn’t have any type of layout on the blog, so I decided to use CSS Grid since I really like it’s simplicity. I had manually set the positioning for each element previously which was far from ideal, so this way the CSS is cleaner and easier to manage.

The lines that I ended up adding to the CSS for the Grid layout are the following:

/*===========================================
=============    GRID LAYOUT  ============
===========================================*/
body {
    display:                            grid;
    grid-template-columns:              1fr 50% 1fr;
}
header {
    grid-column:                        1 / 4;
    grid-row:                           1;
}
nav {
    grid-column:                        1 / 4;
    grid-row:                           2;
}
main {
    grid-column:                        2;
    grid-row:                           3;
}
footer {
    grid-column:                        2;
    grid-row:                           4;
}

With that and the addition of semantic HTML, I was able to achieve the same result as before in regards to layout (no classes or IDs used).

Using CSS Variables

After that was set up, I went on to setting up the :root CSS pseudo-class variables, thank you Basic.css for introducing me to this. This is the end result:

:root {
--sans:                             1em/1.6 system-ui, "Signika Negative Regular", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sa
sans-serif;
--mono:                             'Courier New', Courier, 'Ubuntu Mono', 'Liberation Mono', monospace;
--main-font-color:                  #676767;
--heading-color:                    #333;
--pre-back-color:                   #f5f7f9;
--pre-font-color:                   #4c4c4c;
--pre-left-border-color:            #69c;
--pre-top-bottom-border-color:      #d8dee9;
--code-font-color:                  #518DAA;
--link-color:                       #6262ff;
--link-hover-color:                 #00b200;
--dark-color:                       #444;
--black-color:                      #000; 
--light-gray-color:                 #eee;
--white-color:                      #fff;
--h5-color:                         #a7a7a7; 
--rc:                               8px; 
}

Now if I want to make general color changes to the site, I can do so from a central place instead of having specific color hex codes throughout the CSS file, this makes it easier to maintain.

Adding Responsiveness

This is something that I had initially not done, however the use of CSS Grid makes it really simple to accomplish.

With the following lines of CSS I added very general support for smaller screens to the blog:

/*===========================================
=============   MEDIA  QUERIES  ============
===========================================*/
/* Tablet Sized Screens */
/* Grid Layout */
@media (max-width: 1200px) {
body {
    display:                grid;
    grid-template-columns:          1fr 70% 1fr;
}

/* Navigation Bar */
nav ul {
    padding-left:               11%;
}
}

/* Mobile Sized Screens */
/* Grid Layout */
@media (max-width: 599px) {
body {
    display:                grid;
    grid-template-columns:          1fr 90% 1fr;
}

/* Navigation Bar */
nav ul {
    padding-left:               0;
}
nav ul li a {
    padding:                .7em .5em;
}

Admittedly I need to work on the navigation bar of the site for better integration with the CSS Grid layout, I’ll be doing that soon. Once I have that implemented only CSS layout code will be added to the media queries section of the style.css file.

Conclusion

With these simple updates I have now written a CSS file that I’m happy with and can continue to use until the next update comes around.