LESS a CSS Preprocessor, How it will help in your CSS coding?

October 28, 2015 - 11:24

As we know CSS is an important part in Front end development. By using CSS latest versions, we can make good dynamic effects just like jQuery effects. But sometimes we are spending lots of time to fix some cross browser issues or to modify some styling changes. And if you want to modify the common styling, we have to write many coding in CSS. But if you are using some preprocessors like LESS it will make the CSS coding easily because we can add the code with a small effort. There are many advantages when you use a preprocessor like LESS or SASS. Just we need to install the LESS and a compiler which compiles the less file into CSS. For more details you can refer http://lesscss.org

Basics of SASS

July 16, 2015 - 19:39

SASS is called Syntactically Awesome Style-sheets. SASS is said as an extension or scripting language that is interpreted to the CSS. SASS was developed by Hampton Catlin and Nathan Weizenbaum with the aim to maintain complicated style-sheets. As said before with SASS we will be amazing features to build better style-sheets for making life easy.

CSS Tricks that must be learned

June 22, 2015 - 09:23

Cascading Style Sheets (CSS) is a style sheet language, used for describing the formatting of a document written in any markup language. The idea of CSS is all about to enable the separation of document from its presentation which includes the elements such as the layout, colors, fonts and so on.

How to use LESS CSS preprocessor to style theme in Drupal Bootstrap

May 29, 2015 - 10:08

This article is for those who are new to Drupal Bootstrap and responsive design. Drupal Bootsrap is a responsive theme you can download it from Drupal.org. It is one of the best responsive theme and created using boostrap framework. Creating a sub theme of Bootstrap is explained in another article of mine. This article mainly concentrated about How to use LESS to style bootstrap theme Drupal.

How to create a Speech bubble option for your website using CSS

May 20, 2015 - 19:08

Most of websites today anywhere some time requires speech bubbles. Speech bubble are mainly used for themes purposes were we need to to display some thing different from other part of contents(Include certain text such as tips of any information). With out any images we can create the speech bubble with CSS alone for your websites. The speech bubble creation is not a big task we can create it simply with a few line of css codes

How to include inline CSS in ajax form

May 07, 2015 - 14:37

In the near past, I had a requirement to add inline CSS to the content that comes after submitting the form. Let me explain the context a bit, I have a form, only on its successful submission, a block need to be displayed. If the submission failed, all I need is to return the form and error message back.

[Drupal] How to add web font to your site?

January 16, 2015 - 17:49

Specialized fonts beyond the typical “Arial, Geneva, Helvetica” can be embeded to your site by uploading Web Open Font Format file for the needed font in your site. Aesthetics is often very important for any website you design. If it isn't pleasing to the eyes, it will directly affect traffic. Fonts are a very important in aesthetics and readability. If you are not sure of how to add web fonts to your site then read on.

How to embed custom webfonts using font-face in your site and ensuring the bold and italics work for the font

June 05, 2013 - 23:28

@font-face allows designers to specifically embed certain fonts in to their stylesheets. Now a days many sites are providing webfonts. For eg: Fontsquirrel, Webfonts etc. They are providing us with the css too, but it is not correct. This article explain about what they are doing wrong and how to fix this issue.

[IE7 - Known Issues][CSS] 'border-collapse' does not override cell spacing related tags

Many a times, IE7 stands out from the group of modern web-browsers owing to its notorious incompatibility with many a standard HTML/CSS/JS. In this article, we are seeing the following case of incompatibility: In IE7, the CSS 'border-collapse' does not override cell spacing related tags.

[Drupal 7] How to create a simple Javscript popup without using third party Javascript libraries?

We had come across many situations while developing Drupal based websites where we had to create Javascript popups without using third party Javascript libraries. Third party libraries often lead to dependency issues or conflicts with existing Javascript functionalities. If you want to know how to create a simple Javscript popup in your Drupal website without using third party Javascript libraries then continue reading.

How to write consistent and cross-browser compatible CSS - Ideas for Margin, Padding, Border, Height, Width

Almost all the browsers have different settings for base margins and padding. It is always important to set margin and padding for the body and html tags while styling web-pages. Otherwise it might result in some inconsistencies while displaying the pages across various browsers.

We can avoid such inconsistencies by setting margins and paddings on html and body tags to 0.

[Drupal] How to implement multiple color switches in Drupal theme?

Implementing multiple color mode switching is so simple! In HTML we can easily add the switching color style sheets as alternative style sheets.

But when it comes to Drupal there is a slight change. Here is how we can implement multiple color switches in Drupal theme. We normally include style sheets in .info file and we cannot specify 'alternative stylesheets' just like in HTML. So here we need a module called Drupal 'Styleswitcher'. By enabling this Drupal module you will get the option 'styleswitcher' to add alternative style sheets.

For more details just follow these steps.