In this week’s blog post, I want to cover how to center divs inside of other divs horitontally, vertically, and both horizontally and vertically. You can do this with CSS Grid or Flexbox but I want to go over how to do it with standard CSS. Continue reading How to center all of the things in all the other things without CSS Grid or Flexbox
Tag Archives: CSS
What is a CSS Reset?
The goal of a CSS reset is to reduce inconsistencies with things like line height, font sizes, and margins. Every browser defaults to different sizes and spacing and if you set a common baseline, you end up with a better end-product.
A basic example would look like:
body, div, h1,h2, h3, h4, h5, h6, p,ul {
margin: 0;
padding: 0;
}
Andy Bell and Josh W. Comeau have pretty good, pre-packaged CSS resets but the OG might be the one by Eric A. Meyer.
There is an argument that a CSS reset violates DRY (Don’t Repeat Yourself) but a good CSS reset is minified, blindly pasted in, and is common to all of your projects. You might be setting things only set them again later but it will save you time and pain for a minimal cost.
[ Cover photo by Tom Grünbauer on Unsplash ]
Styling a webform with CSS Grid
Looking back, the recent Bootstrap vs Bulma post left me wondering why you really need either. Two years ago, I did a post on what CSS Grid is and I figured that you can consider this to be an continuation of that. Continue reading Styling a webform with CSS Grid
Text alignment and font weight using bootstrap
Last week, I posted something comparing form styling with Bulma to form styling with Bootstrap and I was a little perplexed that the Bootstrap docs steered me wrong. You can see what I mean in this pen. Continue reading Text alignment and font weight using bootstrap
Comparing and contrasting Bulma and Bootstrap
I haven’t been shy in the past about how I have really prefer Bulma over Bootstrap. I wanted to use this week’s post to compare and contrast the two and hopefully reset my opinion of Bootstrap. So, how am I going to do that? I am going to create a webform using Bulma and then tried to replicate it in Bootstrap. Continue reading Comparing and contrasting Bulma and Bootstrap
Learning Tailwind: Borders, Shapes and Backgrounds
A few weeks ago, I started a series where I planned to cover Tailwind to the best of my ability. Over the years, I have used Bootstrap and Bulma a heck of a lot but I wanted to branch out a little. Today’s post is going to cover borders, shapes, and backgrounds. Let’s get started. Continue reading Learning Tailwind: Borders, Shapes and Backgrounds
Three ways to create a modal dialog
Today, we are going to look at three ways to add a modal dialog to your app. The first option just uses CSS and JavaScript (no special libraries). The second option uses Bootstrap (a topic that I haven’t touched in a few years). The third and final option uses Bulma. I looked back at my previous posts and don’t think that I have covered this, yet. I am purposely trying to keep the three examples as similar to each other as possible. There is a button that opens the modal and you can close it by either clicking on the space outside of the modal or on the X in the corner of it.
Learning Tailwind: Fonts and Typography
One of my goals for this year is to become more familiar with Tailwind CSS. As part of that, I am going to post a few things on the topic to the blog. This week, I intend to focus on fonts and typography. Continue reading Learning Tailwind: Fonts and Typography
CSS Image Carousel, Part 2
Recently, I was talking about how a random tweet got me thinking about CSS image carousels and at the end of that post, I mentioned that the second version of the image carousel would allow you to link to individual slides. I figured that it was time to show how to do that.
See the Pen
Simple CSS-Only Image Carousel – 2 by Joe Steinbring (@steinbring)
on CodePen.
The above pen is just like the one from last week, except an unordered list, a little CSS to turn it into a menu bar, and some links.
Have any questions, comments, etc? Feel free to drop a comment, below.
[ Cover photo by insung yoon on Unsplash ]
Two ways to make a pure CSS image carousel
Recently, I was doom-scrolling twitter when I came across a tweet that claimed that you can build an image carousel using just two lines of CSS. I liked the tweet and then thought to myself “I can’t sleep, right now. Why not try it out?”
CSS Tip 💡
Create image Carousel using two lines of CSS. pic.twitter.com/PLIyTaXZkV
— Pratham (@Prathkum) February 10, 2022
It turned out that I needed a few more than two lines of CSS, but it was still somewhat simple. Continue reading Two ways to make a pure CSS image carousel