Build a responsive, position-free component with Blunt CSS. 🔪
Tags: css, html, beginners, codenewbie
Published: 2020-07-17 14:48:24

#### Scenario 1:

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Not being able to center a div</p>&mdash; Vaibhav Khulbe (@vaibhav_khulbe) <a href="https://twitter.com/vaibhav_khulbe/status/1280538217352052736?ref_src=twsrc%5Etfw">July 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#### Scenario 2:

{% devcomment g05a %}

#### Scenario 3:

[![CCS Quora Answer](https://dev-to-uploads.s3.amazonaws.com/i/fjp4ivvoj95nh90gyyqb.jpg)](https://www.quora.com/What-are-the-hardest-problems-in-computer-science/answer/Colleen-OReilly-3)
<figcaption>Click the image to read the entire answer.</figcaption>

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](https://github.com/f-prime) 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](https://github.com/f-prime/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`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) and [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
- [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width) and [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height).
- [`font-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) and [`line-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height).
- [`grid`](https://developer.mozilla.org/en-US/docs/Glossary/Grid).
- [`row`](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row) and [`column`](https://developer.mozilla.org/en-US/docs/Glossary/Grid_Column)
- [`text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/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`](https://developer.mozilla.org/en-US/docs/Web/CSS/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. 🥴

![Blunt card](https://dev-to-uploads.s3.amazonaws.com/i/c0xnpwf4ydjf42y2ylmq.jpg)

### Step 1: Add Blunt CSS to our project

For this simple experiment, we can easily use the CDN files delivered to us via [jsDeliver](https://www.jsdelivr.com/). Just add the following tag in your HTML:

```html
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/f-prime/blunt/dist/blunt.min.css">
```
 
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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items), etc, all we have in the entire markup is different [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) elements. 

Check out the HTML:

```html
<div class="container auto-center h-100 row v-center h-center">
  <div class="lg-w-40 md-w-40 sm-w-90 pt-4 pb-4 pl-2 pr-2">
    <div class="sm-col md-row lg-row md-v-center lg-v-center">
      <div class="sm-auto-center">
        <img src="https://randomuser.me/api/portraits/men/60.jpg">
      </div>
      <div class="sm-auto-center sm-text-center font-1p2 lg-ml-2 md-ml-2">
        <div class="sm-pt-1p3 pb-5p font-2p2">Chris Wayne</div>
        <div class="pt-2">Blunt Engineer</div>
        <div class="pt-1 pb-0p5 font-1">chris@wayne.com</div>
        <div class="font-1">(123) 456-7890</div>
      </div>
    </div>
  </div>
</div>  
```

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...

![WithoutCSSCard](https://dev-to-uploads.s3.amazonaws.com/i/lgi3a95tiybe2tvwhx7z.jpg)

### 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:

```css
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`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) and what not!

If you're still stuck, here's the [CodePen demo](https://codepen.io/kvaibhav01/pen/bGExQLx).

---

## 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:

{% github f-prime/Blunt no-readme %}

---

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

---

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Programming is a bottomless pit of learning, never put yourself down for not being 100% sure about everything you do. 😊<br><br>Image Source: <a href="https://t.co/ooIWRAtHcd">https://t.co/ooIWRAtHcd</a> <a href="https://twitter.com/hashtag/DevHumour?src=hash&amp;ref_src=twsrc%5Etfw">#DevHumour</a> <a href="https://twitter.com/hashtag/Programming?src=hash&amp;ref_src=twsrc%5Etfw">#Programming</a> <a href="https://t.co/dAzIOlaqHf">pic.twitter.com/dAzIOlaqHf</a></p>&mdash; Microsoft Developer UK (@msdevUK) <a href="https://twitter.com/msdevUK/status/1283074278808838144?ref_src=twsrc%5Etfw">July 14, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### 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](https://medium.com/@vaibhavkhulbe)'s my Medium profile.