My Thoughts

CSS

Ideas

Layout

Try Again

This page is to share my thoughts and experiences in web development. If I start getting feedback I'll modify it into a blog. Meanwhile you can contact me with your questions and comments.

CSS - Animations

CSSCirca 2015 I was learning on Code School learning a wide range of coding skills. It was a great boost to what I already knew and helped clarify and update certain aspects especially in CSS and JS.A useful and entertaining study was creating animations with CSS. Later I found animations created by Dan Eden, an extremely useful library of purely CSS animations. I used what I'd learn on Code School and Dan's animation.css file to create the effects on my home page, and on this Animation page which is a very small sample of available animation effects. --May 2, 2021

CSS - Icon

CSSI wanted an icon for each post. I resisted the urge to create a graphic image and became determined to create it with CSS.

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 began with a gradient and relied on MDN for fine-tuning it. Still couldn't get exactly what I had in mind so I showed it to a colleague and Pedro suggested going with no gradient more contrast in the colors. Thanks Pedro! --April 16, 2021

CSS - what to do?

CSSI started with CSS2 more than 10 years ago. I named my classes and #ids with names that had meaning to me. Over the years I came to see how a much more uniform naming convention is superior. This site was created with Bootstrap 3 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.

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 bm-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 June 2021. --April 15, 2021

CSS - to rem or not to rem?

CSSYears 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!