Text display is an essential factor in web designing which affects the user experience and the readability of your website. If your text is displayed properly in an organized manner, the users will easily understand it and hence, will be attracted to your website. However, sometimes, the text may be too long for a specified space in the webpage. To properly display that text, we use the truncate method. This method is offered by Primer CSS in which you can not only truncate your text but also expand it on hover or focus effect. In this article, we will discuss ... Read More

In web development projects, developers face situations where they need to display the text within specified amount of space due to several reasons like client’s demand, overall appearance, limited resources etc., The truncate property is an efficient feature in CSS which resolves this issue. It enables the developers to display a single line text and truncate the overflowed text with an ellipsis. However, depending upon the situation the need of customizing the maximum width of the truncated text might arise. In this article, we will discuss how we can customize the maximum width using Primer CSS, a popular open-source CSS ... Read More

Ember.js is a framework based on javascript that is widely used in building complex web applications. The framework allows developers to create single-page web applications that are scalable just by using some common idioms, best practices, and patterns from other single-page-app ecosystem patterns in the framework. Handlebars templating system is one of its key features that provides a simple and powerful way to create dynamic web pages. In this article, we will see how to create an ember handlebars template. What is Template in Ember? Templates in ember are used in defining the user interface (UI) of a ... Read More

Primer CSS is a CSS framework collectively developed by various GitHub contributors. One of its components is typography which enables the developers to style the written content of the website. By applying these utility classes to the HTML elements, we can easily customize the visual appearance of our application. Here, in this article, we will discuss about the type scale utilities offered by Primer CSS and how to use them in our webpage. What are Type Scale Utilities? Type scale utilities are collection of properties which help in creating proper typography throughout your website. It consists of series of pre-defined ... Read More

Typography is an essential component during creation of websites and applications. It is primarily used to display majority of the content for the users. It determines the tone and mood of the content of your website. So, it is very likely that it affects the overall user experience. Headings in any website is the center of attraction for any user. So, it is very important that it looks perfectly fine to increase the readability of your website or application. In this article, we will use Primer CSS to create headings. Primer CSS Primer CSS is a versatile and popular CSS ... Read More

Typography is a crucial aspect of web designing for any developer. It includes choosing font families, proper spacing, sizing and alignment of the text in a webpage. Proper typography ensures enhanced readability of your website. Text alignment is an essential component for typography and ensuring perfect alignment can be a challenge, especially for beginners. Here, we have Primer CSS for the developers. In this article, we will discuss about the text alignment feature available in Primer CSS and learn about how it is helpful in making a user-friendly website. So, let’s get started. Primer CSS Primer CSS is an open-source ... Read More

To align checkbox and its label on cross-browsers using CSS, we can use various CSS properties. Different browsers may have different styles and rendering methods while displaying checkboxes. In this article, we will be discussing three different approaches to align checkbox and its label on cross-browsers using CSS for consistent display and proper alignment. We are having two checkboxes and two corresponding labels in this article, our task is to align checkbox and its label on cross-browsers using CSS. Approaches to Align Checkbox and its Label on Cross Browsers Here is a list of approaches to align checkbox and its ... Read More

In today’s era of web designing, the creation of visually attractive websites with proper layouts and organized content is the key task. One of the most commonly faced challenges is that the developers need to know how to properly define the space between the elements so as to increase the readability of the webpage. Here, we have CSS for the rescue. CSS enables the developers to control the appearance of HTML elements, including proper spacing between them. In this article, we will discuss different methods used for setting the vertical space between the list of items using CSS. We ... Read More

IN SASS, the @content directive is used to pass the CSS content into the mixins or functions. The mixins and functions allow developers to avoid the repetitions of the code. However, the @content directive also helps developers to reuse the code but provides more flexibility than functions and mixins. Developers can define the CSS code inside the code block while including the mixin in the SCSS file. After that, they can use that code with the pre-defined code of the mixins using the @content directive. Let’s understand it via the examples below. So you can get more clearance about the ... Read More

Introduction Have you ever measured the loading speed of your website? If No, there are lots of tools available on the internet to test the website speed. Search for anyone and measure it. If the website loading speed is more than 3 seconds, it means you are losing a total of 32% of visitors, according to the survey done by Google. So, it helps if you take action to decrease your website's loading speed, and here progressive rendering comes into the picture, which allows developers to increase the loading speed of the website. What is Progressive Rendering? Before discussing ... Read More