Ars Materia


The new stylesheets for my website and a number of other projects

Posted: 2021-07-15
Est. Reading Time: 4 minutes
Author: Brady O'Leary
Source code can be found at https://github.com/mboleary/ars-css-next

Ars Materia

Ars Materia is the new theme that this website, as well as several other projects will use for styling. This redesign is similar in style to the old arsmachina styling, but is written in such a way that makes it easier to implement these styles elsewhere, as well as cut down on the number of files required to implement the styling, making it better to use on the web, and also to make the code more manageable.

Project History

This is a continuation of the style first written by me in 2018 for a reboot of a hackathon project that displayed the grade averages for each class at USC, as that data was publicly available. That template eventually became the base for a student organization website, acm.cse.sc.edu. After that, I also used the same template for this website which at the time hosted my portfolio for a New Media Arts class (MART380) that I took during my last semester of school, and my Graduation with Leadership Distinction portfolio as well which can be found at https://cse.sc.edu/~mboleary/. At the time I initially wrote the styling, I was less familiar with the web ecosystem, and best practices in writing CSS and managing that much styling which ultimately led to code that was difficult to manage and use elsewhere. That was one of many factors that led me to rewrite the website styling.

Project Goals

There were several shortcomings of the previous collection of css, WebTemplate including:

There were also some features that I wanted implemented that I would have had a hard time doing with the old stylesheets including:

What I learned

In embarking on this project, I learned that using a preprocessor like SCSS can help reduce the amount of code I need to manually write, and makes it much easier to package all of the styles in one file. I definitely should have started these stylesheets out like this.

Next steps

There are some bugs I need to work out before I can deploy these new stylesheets permanently on this website, and I also need to fix some hard-to-read text in a few places, as well as finish rebuilding the template to be compatible with these new changes.

Screenshots

First look at the new dark mode.
First look at the new dark mode.
Some different types of cards.
Some different types of cards.
Demonstration forms.
Demonstration forms.
Different types of tables
Different types of tables
Chips, which are going to be used as tags
Chips, which are going to be used as tags
Modal popup demonstration
Modal popup demonstration
Demonstration of translucent cards on top of a picture
Demonstration of translucent cards on top of a picture
New list of articles
New list of articles
New Table of Contents demo
New Table of Contents demo
Demo of icons on an article
Demo of icons on an article
Shows the footer, the new cow placement, and a share bar
Shows the footer, the new cow placement, and a share bar

 ______________________________
< I mount my soul at /dev/null >
 ------------------------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||