Theme UI (theme-ui) is a library for styling React components using a customisable theme object. It is easier to get started with theme-ui rather than explaining it. In this article, we will cover the following topics:
We will build a sample app using theme-ui.…
Every popover element has a little arrow. We see this pattern all over when we click on a button and a div pops up. Here is an example of this UI pattern – Box arrow.
In this post, I will walk through how this works. Here is a CodePen for this post.
The HTML is only a div containing some text.…
Most people use community packages to do something as trivial as setting up a Menu on a sidebar. In my opinion, it takes more time to understand the API of a package than it takes to build the Menu from scratch. In this tutorial, I will show how you can build your own Menu using React router and SASS.
For scaffolding a React app, please feel to use create-react-app (CRA) or Parcel.…
HTML elements can optionally have relative, absolute and fixed positions. Absolute positioning adjusts the position of an element with respect to its nearest parent container which has relative position. If there are no parents with relative position, an element with absolute position is placed within the browser window using the top, left, right or bottom properties. An element with fixed position is always positioned within the browser window.…
CSS Grid is a powerful technique for creating website layout. In this article, I will show how to build a simple but responsive “Coming soon” page with CSS Grid.
This is how the “Coming soon” page will look in mobile and desktop.
As you can see, it is very simple. A title, subtitle and “Coming soon” text at the bottom. …
Most landing pages have a huge background image. Within that background image, there is some text and a button which prompts the user to take an action.
Usually, the problem is that of contrast. The text is white in color and the background image may also be light causing a problem with contrast. We can solve the problem with minor CSS adjustments.…
Button tag in HTML is used in HTML forms. Styling a button is straight-forward. However, there are some nuances that we should watch out for. Styling Button states the right way is something that is difficult to get right for new CSS developers. This article helps you understand how to style a button.
Let us start with the basic button style.…
Every time, I get to work with CSS, I am amazed by some new property that I did not know before. In this article, I have compiled some CSS tricks that I have picked in the last few days while designing yet another landing page.
Have a random image. Hover over the image. Scale the image with a thick border.…
Styled components is the new rage in the world of React. It allows to define components with accompanying style like below.
const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; `
The above code defines a Button component which is styled based on a link element.…
What is the coolest CSS work that you have done? This is an interview question for which I did not have a good answer. My answer never had the WoW factor. My answer previously was:
I am good at vertically centering text within a block.
With CSS 3 flex, centering text within a block can be achieved with ease.
I am not known for my CSS work.…