Tutorial by Examples: css

Referencing a Variable Within a CSS Function

By default, LESS will use its own calc() unless told otherwise. So: @column-count: 2; .class-example { width: calc(100% / @column-count); } Would compile to this: .class-example { width: 50%; } While it is our desired width, LESS has used it's own calc() function to calculate ...

Overriding Default CSS

Everybody loves twitter bootstrap, but some of us don't like it's default design. So here's a simple guide on how to start customizing boostrap's design. Twitter boostrap when cloned provides a set of default css files which we can override. The mail css file that we need to override is the boostra...

Generate .hidden-* classes for all breakpoints - SCSS

// Mixin to generate hidden classes @mixin generate-hidden-classes { @each $bp in map-keys($grid-breakpoints) { .hidden-#{$bp} { @include media-breakpoint-only($bp) { display: none !important; } } } } // Call to the mixin @include generate-hidden-classes(...

Remove version numbers from css/js

Just add this function to your functions.php. It will remove the version from all enqueued js and css files. function remove_cssjs_ver( $src ) { if( strpos( $src, '?ver=' ) ) $src = remove_query_arg( 'ver', $src ); return $src; } add_filter( 'style_loader_src', 'remove_cssjs_ver', 9...

Including internal css file for your Plugin class

class My_Plugin() { function __construct() { add_action( 'wp_enqueue_scripts', array( $this, 'init_fe_assets' ) ); } public function init_fe_assests() { wp_enqueue_style( 'my-plugin', plugin_dir_url( __FILE__ ) . 'assets/css/frontend/plugin.css', array(), '0.0.1', true ); ...

Installing Plugins for Responsive images|Css Minification|Js minification

Our goal , is to Make your Images conform to widths and scale appropriately, by generating a battery of images of varied widths, and to minify them Lint your Javascript Minimize your assets - JS/CSS/HTML , thus enabling you to host a lighter than lightest code Watch the css/js/image files for ...

Go to member (javaScript function/CSS rule)

Use CTRL+SHIFT+O (⌘+SHIFT+O for mac) to navigate to a javaScript function/CSS rule when viewing a file.

CSS import

Import external style sheet. Working jsBin <!DOCTYPE html> <html> <head> <base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/"> <link rel="import" href="polymer/polymer.html"> ...

Responsive columns same height (CSS or SASS only)

You have to add a div with the class .row-height inside the row, and also add .col-height to the columns. If you want to restrict the effect to a certain media query, just use the responsive .row-height and .col-height classes: for example .row-sm-height with .col-sm-height. CSS version: .row-heig...

Use this method to get the default Font Awesome CSS with the default Bootstrap CSS.

1.Download font-awesome from here. 2.Copy the font-awesome directory into your project. 3.In the of your html, reference the location to your font-awesome.min.css. <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet&quot...

Config using preLoader for eslint, babel for jsx and css loader chaining.

The following configuration can be used as a base config for bundling up your project as a library. Notice how the module config contains a list of preLoaders and loaders. // webpack.config.js var path = require('path'); module.exports = { entry: path.join(__dirname, '..', 'src/index.js...

Pure css3 pointer arrows with outline border

!!! Container should be positioned relatively or absolutely $direction - top, bottom, left, right $margin - margin by the edge in $direction. For top and bottom direction - it's from left to right. For left and right - it's from top to bottom. $colors - first is a border color, second - is a back...

Web Page Using Materializecss

Here is an example of a basic page using the Materialize CSS framework which incorporates the grid system and materialboxed. <!DOCTYPE html> <html> <head> <title>Materializecss Example webpage</title> <!--Import Google Icon Font--> <link href="ht...

create css/js specific to a platform (android/ios)

Let say you want to create css/js file specific to a platform. For that you have to create a merges folder in root folder of you cordova porject. In merges folder create directory for each platform (android/ios..). then in specific platform folder create a css/js folder and put your css/js file spec...

Sass and Css - Preprocessing with Gulp

Before starting gulp we need to install node.js and npm. Then install gulp-sacc $ npm i gulp-sass --save-dev // i = install Gulp Head var gulp = require('gulp'); // Requires the gulp-sass plugin var sass = require('gulp-sass'); Gulp Body gulp.task('sass', function(){ return gulp.src('...

Creating Images, JS, and CSS(SASS) rule for ordering files

Installing Gulp and His Tasks $ npm install gulp --save-dev $ npm install gulp-sass --save-dev $ npm install gulp-uglify --save-dev $ npm install gulp-imagemin --save-dev Determining Folder Structure In this structure, we will use the app folder for development purposes, while the dist folde...

Adding a background-image rule via the CSSOM

To add a background-image rule via the CSSOM, first get a reference to the rules of the first stylesheet: var stylesheet = document.styleSheets[0].cssRules; Then, get a reference to the end of the stylesheet: var end = stylesheet.length - 1; Finally, insert a background-image rule for the bo...

The Basics (Tables and Inline CSS)

Tables for Layout The structure of an HTML email file is similar to that of a web page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello!</title> </head> <body> &...

Resetting Email CSS in