What to expect?
This blog explains why creating single div art is a popular trend and how to build the React JS logo with just one div and pure CSS.
What is the "Single Div" hubbub all about?
Let us consider a basic example - creating a series of different colored dots. I could just create an array of elements and assign different colors to them but if I am given a condition that I may use only one div element - I will choose to use the background property (among other ways) to achieve the same. This is the main reason for the popularity of this trend. It challenges the developer to harness or exploit many CSS properties that would not be used otherwise.
Breaking down the React logo
The logo is pretty straightforward - there are three elliptical orbits with a nucleus at their center in what I like to call "React Blue" (hex code - #61dafb).
HTML
As promised, HTML will have nothing but a <div /> tag.
CSS
Orbit shape
For the orbit's elliptical shape, we first create a class that can style all three orbits. It simply uses the border properties to define the shape.
.logo-orbit {
height: 100px;
width: 300px;
border-radius: 50%;
border: 10px solid $react-blue;
}
This can style any div to look something like this 👇
The 3 orbits
For the central orbit, select the div tag and apply the .logo-orbit class. I have used Scss and extended the class name in the styles.
div{
@extend .logo-orbit;
}
For those not familiar with Scss, please replace @extend .logo-orbit with styles in the .logo-orbit class.
Next, we use the :before and :after pseudo-selectors. These are conventionally used for inserting content but here we use them for the other two orbits as follows.
:before, :after {.
@extend .logo-orbit;
content: "";
position: absolute;
top: -10px;
left: -10px;
box-sizing: inherit;
}
It is worth noting that although box-sizing is an inherited property, the pseudo-elements do not inherit them and require an explicit inheritance.
Next, we position the logo with rotation as follows.
&:before {
transform: rotate(60deg);
}
&:after {
transform: rotate(-60deg);
}
Now we are only left with the nucleus.
Nucleus
We use radial-gradient with the background property applied to the div for creating the nucleus as follows.
background: radial-gradient(circle, $react-blue 24px, transparent 25px);
With that the logo is done. The complete code along with the turn animation can be found in the following Codepen.
There is so much that can be done with just a single div. Be sure to checkout a.singlediv.com by Lynn Fisher who started this trend. Let me know about your single-div creations in the comments or reach me on Twitter. Thank you for reading!
Top comments (8)
Hey, really nice article. Recently I developed a CSS chart library with the single div trend. If you are interested please have a look on this:
singledivui.com/
Broooo! what?! This is incredible. I loved it. Amazing work. Thanks for sharing here.
Nice article...
also, you can put your code inside three backticks
to get syntax highlighting.
Here's the syntax documentation
Thanks for the share Andrew :D
Oh thanks for sharing Jalaj! I will remember that ☺️
But you didn’t mention @lynnandtonic who I believe started this trend with a.singlediv.com/ ??!
I am aware that Lynn creates a lot of single div art and of course the amazing a.singlediv.com but didn't know she started the trend. Thanks for the info!