Build a responsive, position-free component with Blunt CSS. 🔪

Scenario 1:

Not being able to center a div

— Vaibhav Khulbe (@vaibhav_khulbe) July 7, 2020

Scenario 2:

Scott Spence • Sep 28 '19 • Edited on Sep 28 • Edited

Positioning things.

"Oh, so if I want that over there then I'll have to wrap it in a div then position the thing inside that"

Aligning/Justifying things.

"If it's not align items, then is it align self, right? Must be I tried all the other ones 🤷"

Scenario 3:

And there are countless other scenarios, frustrations and examples online which shows that one of the most difficult or mind-chewing thing to do in CSS is to align items or position them.

A GitHub user Frankie saw this problem and decided to sort it out. He writes,

> Well, I was sick of fighting with the other options. Most are overly opinionated and result in spending time fighting the framework instead of it boosting productivity.
I have tried so many different ones. Some do too much, others do too little. I needed some middle ground that worked for specifically what I wanted.
I don't want to write any CSS that does positioning elements. I want to write CSS that only does the styling of my elements (e.g. text color, borders, background colors, etc).

Clearly, he was in need of something which would do two things:

• Don't let him write the CSS of positioning elements.
• Make it look good in different device sizes (discussed later).

What he did next? Well, he made a CSS framework aptly called Blunt. In this article, we'll be using this to make a simple card component.

What is this yet-another CSS framework?

Blunt is a CSS framework which only focuses on how your applications are positioned. It literally does nothing else!

This only provides the helper classes you need to make the positioning and responsiveness of HTML elements easier.

It has the classes for the following properties/features:

• margin and padding.
• width and height.
• font-size and line-height.
• grid.
• row and column
• text-align and elements.
• responsive container for small, medium and large devices.

What happens with this is that now adding Blunt, your only focus is to style your elements and not on adding a high z-index or a random px value to your margins.

Let's make a blunt card 🔪

Here's what we'll be building. A simple contact card of a (well...) Blunt Engineer. 🥴

Step 1: Add Blunt CSS to our project

For this simple experiment, we can easily use the CDN files delivered to us via jsDeliver. Just add the following tag in your HTML:

This will give us the compiled CSS of Blunt to work on.

Step 2: Code the markup

Let's first tackle the positioning of elements inside the card. What we have is a two-column layout in the card. The left one contains the image and the other some text information.

Here's what we need:

• The entire container which holds the card in the body.
• The actual card.
• The two columns in the card.
• The image container on the left and the text container on the right containing all the text information.

As Blunt takes care of properties like font-size, align, etc, all we have in the entire markup is different `` elements.

Check out the HTML:

        <img src="https://randomuser.me/api/portraits/men/60.jpg">


        Chris Wayne
        Blunt Engineer
        chris@wayne.com
        (123) 456-7890

Here's what each of those Blunt's classes does:

• container: gives our element that taste of responsiveness so that it looks good on any device.
• auto-center: gives the value of auto to the left and right margins.
• h-100: gives 100% height value.
• row: does three things. First, adds 100% width value, adds the famous flex display and sets its direction as row.
• v-center & h-center: these two centres align the grid items both vertically and horizontally.
• lg-w-40: these lg classes are used to define specific values to the properties for large screen sizes above 1500px, same goes for md and sm which means medium (max-width: 1500px) and small (max-width: 900px) respectively. The latter w-40 says that at this large viewport, make width equal to 40%.
• pt-4: similarly, these pt, pb, pl and pr apply the padding-top, padding-bottom, padding-left and padding-right proprties in order.
• sm-col: for small screens, flex-direction: column will be applied. Same goes for md-row and lg-row where it turns to a row.
• md-v-center: the v-center class aligns grid items vertically
• sm-text-center: as you might know by now, in small screens, the text will be aligned to the centre.
• font-1p2: this one is quite interesting. Blunt supports fractional units in its properties values. So here. 1p2 literally translates into "One point Two" and technically, it's 1.2rem.
• lg-ml-2: so yes, this is about the left margin value to 2vh.

Rest other classes you can now easily interpret from the above definitions. It's quite easy to get started with such classes as you just need to use shortcuts.

After you code the HTML, you'll have your card...

Step 3: Code the custom CSS

...and yes, it does need a few custom CSS classes according to the design. So, these are those typical theming CSS properties which we need:

body {
    font-family: Montserrat, sans-serif;
    color: #fff;
}

h1 {
    text-align: center;
    color: #141414
}

.card {
    background-color: #141414;
}   

img {
    border: 3px solid #fc85ae;
}

.name {
    font-weight: bold;
}

.subhead {
    color: #fc85ae;
}

.rounded { 
    border-radius: 100%;
}

.card {
    border-radius: 10px;
    box-shadow: 10px 10px 5px #c2c2c2;
}

.email, .number {
    color: #ababab;
}

As we already did the layout and positioning steps above, we now have the fully coded card component without writing a single line of code of display and what not!

If you're still stuck, here's the CodePen demo.

Where to next? 🤔

• Before you even think of making a whole webpage with Blunt, I sincerely plead to those of you who don't know much about CSS or are complete beginners to NAIL DOWN THE CSS POSITIONING/LAYOUT BASICS. Always remember, basics first, then the framework!

• And then, of course, use Blunt to make an entire webpage of your choice!

• There aren't much tutorials/articles available on this, so if you like to, then please share your knowledge with others that how you made it with Blunt. This will support the creators/contributors.

• Speaking of contributors, here the GitHub repo of Blunt. You can contribute to this if you like to:

Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)

Programming is a bottomless pit of learning, never put yourself down for not being 100% sure about everything you do. 😊

Image Source: https://t.co/ooIWRAtHcd #DevHumour #Programming pic.twitter.com/dAzIOlaqHf

— Microsoft Developer UK (@msdevUK) July 14, 2020

📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.