DEV Community: Ibrahim Ibrahim

Bidirectional Centering with CSS

Ibrahim Ibrahim — Thu, 03 Feb 2022 11:40:38 +0000

Sometimes, you may want to have your elements centered vertically and horizontally on the webpage (hence bidirectional). In this guide, we’ll look at two simple CSS techniques you can use to do this. These CSS techniques are the position and flexbox.

Prerequisites

To understand the content of this guide, you need to have:

A code editor (I’m using Visual Studio Code)
Basic knowledge of HTML and CSS (especially position and flexbox)
A web browser (I’m using Google Chrome)

Using the Position Technique

We can place our child elements anywhere within the parent element using the position property (and the transform property) for bidirectional centering. When the parent element has the position: relative, the direct child becomes limited to its dimensions, i.e. its width and height. Let’s have a look at how it’s done:

HTML Markup:

<div class="container">
  <div class="element">Element to be centered!</div>
</div>

CSS Stylesheet:

.container {
  position: relative;
  height: 100vh;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

The position: absolute; property applied to the .element {} enables the .element to be placeable anywhere within the .container.
The top: 50% and left: 50% moves the .element to the absolute center vertically and horizontally and the transform: translate(-50%, -50%) corrects them to be in the perfect center.
The height: 100vh; controls the parent element's height i.e. the .container that we will center the child element in.

Using the Flexbox Technique

Using CSS Flexbox for bidirectional centering, you can control the placement of elements within other elements. When the display: flex property is applied to the parent element, the direct children becomes flex items, and so you can add alignment properties to control those children (flex items). Let’s take a look at how this works:

HTML Markup:

<div class="container">
  <div class="element">Element to be centered!</div>
</div>

CSS Stylesheet:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

The align-items: center; property applied to the .container vertically centers the child element while the justify-content: center; makes it horizontally centered. On certain occasions, the align-items: center; may seem ineffective. This could be because your parent element does not have a height property. In this guide, we’ll include a height: 100vh; within the .container {} for the align-items: center; to be effective.

Maintainability, flexibility and ease of use are some of the key advantages of this technique over the position technique.

Conclusion

Bidirectional centering is an essential part of frontend development, and as we have learnt in this article, they’re effortless to handle if you understand how they work. The two standard techniques to implement bidirectional centering in CSS are the position and flexbox properties covered in this article.

Suppose you have any questions or comments concerning this article. In that case, you can drop them in the comments section, and if you have other frontend related topics, do not hesitate to reach out to me via Twitter or LinkedIn.

Introduction to Mixins in Sass

Ibrahim Ibrahim — Tue, 25 Jan 2022 15:15:51 +0000

Sass is a CSS preprocessor and whether using it as SCSS or Sass itself, it’s incredible. It lets us do more with CSS and makes complex CSS tasks easy. Mixins in Sass are exceptional and valuable to speed up development. This article will introduce you to how Sass Mixins work.

What are Sass Mixins?

According to the official Sass website, “Mixins allow you to define styles that you can reuse throughout your stylesheet”. In other words, Mixins are reusable blocks of code that you can write your CSS styles in and use throughout your entire stylesheet.

Benefits of using Sass Mixins

They prevent the repetition of code
They make the stylesheet less crowded
They help reduce the size of the stylesheet file

Creating a Mixin

Creating a mixin is straightforward. All you have to do is use the @mixin directive followed by the name of the mixin, then open and close curly braces. The @mixin syntax is shown below:

@mixin name {
   // css goes here…
}

Here is an example code to get a better understanding of how it works:

@mixin red-text {
   color: red;
   font-size: 25px;
   font-weight: bold;
   border: 1px solid red;
}

The red-text style can be added anywhere in the stylesheet by using the @include directive to call the @mixin defined above.

Using a Mixin

Now that you’ve declared your mixin, it’s time for you to learn how you can use them in your SCSS stylesheet. To use a mixin, you simply need to use the @include directive followed by the mixin's name and a semicolon. The @include syntax is shown below:

selector {
   @include mixin-name;
}

And here is how you will use the mixin defined in the previous section within your selector. Let’s say we have a .text class that we want to style:

.text {
   letter-spacing: 1px;
   @include red-text;
}

The CSS transpiler will then convert the above code to the following:

.text {
   letter-spacing: 1px;
   color: red;
   font-size: 25px;
   font-weight: bold;
   border: 1px solid red;
}

You can also have multiple mixins within a selector:

selector {
   @include mixin-a;
   @include mixin-b;
   @include mixin-c;
}

Conclusion

Sass Mixins are simple and powerful. They can help you build faster without repeating yourself and help keep your stylesheet simple. To work with the basics of SCSS Mixins, all you need to understand are:

The @mixin directive for creating the mixins.
The @include directive for using the created mixins.

If you have any questions concerning this article or other frontend related topics, do not hesitate to contact me either on Twitter or LinkedIn.

Opening a link in a new browser tab with HTML

Ibrahim Ibrahim — Sat, 15 Jan 2022 00:59:11 +0000

Have you ever clicked a link on a website, and it’s opened on a new tab in the browser? If you’ve been wondering how you can do that with your links, this article will act as your guide.

Prerequisites

To follow and completely understand this guide, you will need to have:

A web browser (I’m using Google Chrome).
Basic understanding of HTML tags and attributes.
A text editor (I'm using Visual Studio Code).

Introduction

What is the `<a>` tag?

The <a> tag (also known as the anchor element or the <a> element) is an HTML tag that defines a hyperlink, which is used to point from one webpage to another. The anchor element has several attributes, but we will focus specifically on the href and target attributes in this article and a little of the rel attribute.

What are attributes?

Attributes in HTML are special words used inside the opening tag of an element to control the element's behavior. HTML attributes are a modifier of an HTML element type.

What do the href and target attributes do?

href - Specifies the URL of the page the link goes to
target - Specifies where to open the linked document

Using the “href” attribute

The href attribute specifies the URL of the page the link goes to when it’s clicked. Below is an example of how to use the href attribute within the <a> element:

<a href="https://www.dev.to/devwraithe">My profile</a>

The above code consists of the <a> element which specifies the element as a hyperlink, the href attribute, which wraps the URL to point to and the line of text between the opening and closing tags which is the clickable link of the hyperlink.

Page 1:
Page 2, opened in the current tab:

Using the “target” attribute

The target attribute specifies where to open the linked document. If the link is clicked while the target attribute is present, the value of the target attribute will instruct the browser on where it will open the link.

<a href="https://www.dev.to/devwraithe" target="_blank">My Profile</a>

The target attribute and the value “_blank” included in the <a> element above basically states that “when this link is clicked, open the URL in a new tab”. However, this attribute has some drawbacks, but we’ll discuss how you can prevent these drawbacks in the next section.

Page 1:
Page 2, opened in a new tab:

Security concerns and the target=”_blank” attribute

It is recommended that whenever the target="blank" attribute is present in an anchor element, you should include the rel="noopener noreferrer" attribute to prevent a type of phishing known as Tabnabbing. The rel attribute helps to specify the relationship between the current document and the linked document.

Conclusion

It’s straightforward to use the HTML anchor element to open links in a new browser tab. As you have learnt in this article, all you need are three simple, easy-to-remember attributes:

The href attribute sets the URL of the page you want to link to.
The target attribute is set to “_blank” to tell the browser to open the link in a new tab (or window, depending on the browser settings).
The rel attribute is set to “noreferrer noopener” to prevent malicious attacks from the pages you link to.

If you have any questions concerning this article or other frontend-related topics, do not hesitate to contact me either on Twitter or LinkedIn.

DEV Community: Ibrahim Ibrahim

Bidirectional Centering with CSS

Prerequisites

Using the Position Technique

Using the Flexbox Technique

Conclusion

Introduction to Mixins in Sass

What are Sass Mixins?

Benefits of using Sass Mixins

Creating a Mixin

Using a Mixin

Conclusion

Opening a link in a new browser tab with HTML

Prerequisites

Introduction

What is the <a> tag?

What are attributes?

What do the href and target attributes do?

Using the “href” attribute

Using the “target” attribute

Security concerns and the target=”_blank” attribute

Conclusion

What is the `<a>` tag?