Exploring JavaScript Libraries
The MUI Snackbar component (also known as a Toast message) provides a simple way to notify users about important information. The component can be quickly styled and has several handy props for customizing transitions. In this post we will create an example Snackbar and I will explain the props I use. There is a Code … Read more
The Material-UI Alert component is one of the simpler components in the MUI library. However, understanding how to display it, how to customize the styling, how to control the icons in the Alert can be tricky. In this example we will create the following Alert: Notice how the icon is not the typical error or … Read more
Material-UI Table vertical and horizontal scrolling can be configured with only a few simple steps. We can force the scrollbars to appear or disable them completely. Additionally, the scrollbar and scroll thumb can styled with WebKit to create a truly customized user experience. In this demo we will create the table from the screenshot below … Read more
Material-UI Tables can be uniquely styled if you target the appropriate component: TableCell, TableRow, Table, or TableContainer. In this demo, I will customize the background color, font size, and borders to create the table in the screenshot below. We’ll go over the differences in targeting the header cells and the body cells. Additionally, I will … Read more
The Material-UI ListItemText subcomponent is perhaps the most commonly used child component in an MUI List. We’ll take a look at styling and using ListItemText props, and also how to use the component with the ListItemIcon component. Finally we’ll add a link to a ListItem and also show how to handle click events. First, however, … Read more
The Material-UI IconButton creates a clickable icon with all the props and behavior of a MUI Button. In this post we will learn how to add hover functionality such as opening a tooltip and changing color. We will also add an onClick handler and examine how IconButtons are rendered in the DOM. Before we examine … Read more
Material-UI does a good job of keeping Icon color and SVGIcon color simple to customize. A common approach is setting the color prop with a MUI theme color, like primary or secondary. However, if you want to use rgba or hex colors on MUI Icons, change background color, or change Icon color on hover, you … Read more
Bootstrap has a robust layout system with many options for setting or customizing padding. In this post I will focus on vertical and horizontal padding in Bootstrap v5, and I will also show v3 and v4 classes and systems for applying padding. Bootstrap has upgraded it’s default classes and it’s styling utilities in version 5. … Read more
Bootstrap makes layouts easy and has an excellent component library. However, sometimes it can be tricky to get buttons and other components aligned exactly as needed. In this tutorial I will build the grid shown below. It will have buttons aligned right, left, and vertically. I will show alignment with both flex CSS and bootstrap … Read more
Bootstrap is an immensely popular CSS and JS library that facilitates quick grid-style layouts. The library also has a significant number of components in its component library. My favorite thing about the Bootstrap component library is its simplicity. For example, a Button component is simply an html button element paired with Bootstrap’s btn class (and … Read more
