My Thoughts

CSS

Ideas

Layout

Try Again

This page is to share my thoughts and experiences in web development. If I start getting feedback via my contact form I'll modify it into a blog.

CSS - Icon

CSS

I wanted to create an icon image representin CSS. I resisted the urge to create a graphic image and became determined to create it with CSS. It only took me 8 hours

To get it inside the paragraph I used span and float. To vertically center the text I used information from geeksforgeeks.org, setting line-height, so simple. Float messed that up so I had to change the line-height value. I relied on MDN for fine-tuning the gradient.

I often have to ride my bike, or sleep on it, live with it to get the design 'finished'. I'm not totally happy with the gradient yet so it will be updated in the near future.--April 16, 2021

Update: I moved my site to a different host and in the process somehow I lost the border of the icon. The wrapper had vanished so I added that back but I was getting an alert in VS Code that the positioning I used was incorrect. So I used a div for the wrapper and now there is only a span for the inner section of the icon. --May 22, 2022

CSS - what to do?

I started with CSS2 more than 10 years ago. I named my classes and #ids with names that had meaning to me. I had read an article about BEM which changed my approach. Over the years I came to see how a much more uniform naming convention is superior. When I began coding there was no Bootstrap so all the CSS was created from scracth along with including some items like "reset".

This site was created with Bootstrap 3.6 and a few years later, in Nucamp, I was using Bootstrap 4. I found the Spacing Utitilies to be helpful and the naming was much more organized. For each site I used a similar naming convention, for example pt-1 for padding-top: 1rem

Revising my site in April 2021 I decided to change my class names to Bootstrap 4 or similar. So instead of 'btm-mar-none', as an example, I changed the name to mbm-0 with the rule margin-bottom: 0. This will still leave me with some changes when I switch to Bootstrap 4, but they will be easier to catch and to change.

CSS has always been my favorite part of web development since it controls page layout, typopgraphy, color, etc. I'm learning more SaSS and will incorporate it in future developments. My new favorite tool in web dev is JS, especially React for the front end. I'll be adding some projects in 2022. --April 15, 2021

CSS - to rem or not to rem?

Years ago I dealt with the rem issue in my own way. Today I've adopted the most recent solution setting html with the rule font-size: 100%. Bootstrap sets 1rem = 16px automatically. I'm adopting this method in my CSS now and revising my sites that use my own rem size strategy.

Back around 2016 I set html with the rule font-size: 10px. Why would I do that you ask? Well it made it simple to set font sizes without calculating based on a font-size of 16px. I set up classes, such as fs12 with the rule font-size: 1.2rem. I created classes from fs-12 to fs-30 for every even number in between. It was fast and easy. Now I'm going through my sites to conform to what seems to be standard in 2021. It's not a huge job but spending the time to make the changes, only for the sake of 'being standard' I think demonstrates my commitment to following standards whenever possible. And a handy table of rem values based on 16px makes it easier.

Certainly developing sites, especially large ones, by following standards will make it easier for anyone who joins the projects and for those who come after me.--April 15, 2021

Thanks for visiting!