Topics Search

Remove Unnecessary CSS With PurifyCSS and Grunt

Remove Unnecessary CSS With PurifyCSS and Grunt
Views: 0
PurifyCSS is a JavaScript tool which parses your markup files (HTML, PHP, or even JavaScript) then cross-references them with whatever CSS you’re using. Any selectors in your CSS which aren’t being used will be removed, leaving you with only the styles that you actually need.
Sponsored Links:

Similar posts...


PostCSS Quickstart Guide: Grunt Setup

PostCSS Quickstart Guide: Grunt Setup Icon
In the last tutorial we went through how to setup a PostCSS project with Gulp. In this tutorial we’ll achieve the same ends, by using Grunt. By the end of this tutorial you’ll know how to setup a PostCSS + Grunt project with any selection of plugins you choose. Into your project folder add two subfolders, one named “src” and the other named “dest”. The “src” folder will hold your unprocessed CSS files, and PostCSS will write your compiled CSS files into the “dest” folder.

How to use CSS selectors for faster rendering in browsers

How to use CSS selectors for faster rendering in browsers Icon
In this article we will explain how to use efficient CSS tag keys and selectors on your blog/website, avoiding all unnecessary things that can cause problems to your page.

Compiling Sass using grunt-contrib-watch

Compiling Sass using grunt-contrib-watch Icon
Learn how to use grunt’s sass, watch, and connect plug-ins to create a build system that opens a browser, and updates any change in html, or Sass code live in the browser.

Syncing CSS Animations with HTML5 Audio

Syncing CSS Animations with HTML5 Audio Icon
CSS and HTML have opened a rich playing field for adding multimedia content to your web page, web app, and e-book projects. One innovative way of combining these two technologies is adding sound effects to your CSS animations using <audio> elements and triggering them with a little bit of JavaScript. Although sound on the web isn’t universally welcome, there are cases when it can enrich the user experience without being an unnecessary annoyance.

CSS Rules : Using Selectors

CSS Rules : Using Selectors Icon
CSS selectors are the part of CSS rules that determine what HTML elements that are affected by the CSS rule. There are several different types of CSS selectors. Both CSS 1.0, CSS 2.1 and CSS 3.0 added selectors to the CSS standard. The rest of this text will go through these CSS selectors.

Scrollable Twitter Bootstrap Menus

Scrollable Twitter Bootstrap Menus Icon
Twitter Bootstrap has some pretty nice features, but one of the more common practices left out of its component stack is the ability to have long dropdown menus that scroll their content. A quick search on Google brought up some possible solutions, but a lot of them involved JavaScript/Plug-ins or directly hacked into the CSS of bootstrap. Each of which have their own advantages (JavaScript allows for more control, CSS only prevents unnecessary DOM manipulations). However, I’ve typically find myself consumed in the abyss of hacks that worked, but just so happened to brake another functionality of the framework I’m using. Sure, the hack may work in a lot of situations… but just not mine :( So, instead of taking another performance hit with a JS solution or using just CSS that may have some unintended consequences, I decided to use a combination of CSS and HTML to tackle the problem. The use of a few extra HTML tags along with some *hopefully* less intrusive CSS will lessen the chances that I’d screw up the intended purpose of the component I’m trying to add the feature to!

Cleaning up CSS with Ruby

Cleaning up CSS with Ruby Icon
This tutorial you will learn how to create a small Ruby script that will remove duplicate classes/blocks from a css file.

5 Ways to Remove Unwanted Focus Outlines

5 Ways to Remove Unwanted Focus Outlines Icon
I recently wrote about how to remove unwanted link outlines using a pure-CSS method that works on every modern browser except (wait for it) ..Internet Explorer 6! Yes, that’s right, another reason why (almost) everyone is pushing hard to eliminate Internet Explorer from existence. Nonetheless, removing those pesky unwanted link outlines in IE6 is not possible with CSS, but it’s a snap with a little JavaScript. Here are four unobtrusive JavaScript techniques (plus one CSS-only method thrown in for good measure) for removing unwanted focus outlines.

Getting Started with CSS

Getting Started with CSS Icon
Find out how CSS evolved, how it’s applied to a page, and how to identify elements.​ What is CSS? Basic element selection. Applying CSS to pages. CSS inheritance. 56-Minute video tutorial

Creating CSS Tooltip

Creating CSS Tooltip Icon
CSS Tooltip: It is an information shown on a page when we hover on any text, and we find a small box opening This is a tooltip. CSS Tooltip is made with the help of HTML and CSS only, we havent used JQUERY for making this tooltip. CSS Hover effect is one of the most widely used event, css hover when coded with css animation can create stunning effects on any webpage. CSS Tooltip is a small example where we will be using CSS Hover effect.