Nitin Grover: 2014

Friday, 5 December 2014

Wordpress basic CSS - Understanding the Native Classes

Building a site on WordPress is a unique experience. On one hand, you get a ton of functionality right off the gate. On the other, WordPress often expects you to use certain structures when displaying content to take advantage of that functionality.

Some of those structures WordPress are used automatically, no matter how you've built your design (e.g. all menus are <ul> whether you like it or not), while others are more within your control thanks to custom PHP, WordPress actions hooks and other tricks you can use. Although it's a fact that the platform doesn't impose a lot of restrictions, you still need to be mindful of the most basic traits if you want your content to be displayed properly.

Styling Widgets

.widget {} /* top level class for every widget */
.widget-title {} /* usually on the inner header element */

Then, based on the widget type, any of these classes can be used:

/* Archives */
.widget_archive {} /* used next to .widget (on the same tag) */

/* Calendar */
.widget_calendar {} /* used next to .widget (on the same tag) */
#calendar_wrap {} /* on <div> wrapping the calendar */
#wp-calendar {} /* on <table> building the calendar */

/* Categories */
.widget_categories {} /* used next to .widget (on the same tag) */
.cat-item {} /* on each item in the <ul> list */

/* Custom Menu */
.widget_nav_menu {} /* used next to .widget (on the same tag) */
.menu-item {}

/* Meta */
.widget_meta {} /* used next to .widget (on the same tag) */

/* Pages */
.widget_pages {} /* used next to .widget (on the same tag) */
.page_item {}

/* Recent Comments */
.widget_recent_comments {} /* used next to .widget (on the same tag) */
.recentcomments {} /* on each item in the <ul> list */

/* Recent Posts */
.widget_recent_entries {} /* used next to .widget (on the same tag) */

/* RSS */
.widget_rss {} /* used next to .widget (on the same tag) */
.rsswidget {} /* on each RSS link */

/* Search */
.widget_search {} /* used next to .widget (on the same tag) */
.search-form {} /* used with the actual <form> element */

/* Tag Cloud */
.widget_tag_cloud {} /* used next to .widget (on the same tag) */
.tagcloud {} /* on the <div> wrapping the cloud */

/* Text */
.widget_text {} /* used next to .widget (on the same tag) */

.textwidget {} /* on the actual text content of the widget */

Styling the <body>

.home {} /* if it's the homepage */
.page {} /* if it's any page */
.postid-XX {} /* if it's a post - XX is the post's ID */
.rtl {} /* when dealing with right-to-left content */
.blog {} /* if it's the custom blog listing */
.archive {} /* if it's any sort of archive page */
.category {} /* if it's a categories listing page */
.tag {} /* if it's a tags listing page */
.search search-results {} /* if it's a search results page */
.author {} /* if it's an authors page */
.author-XX {} /* if it's an individual author's archive - XX is the author's nickname */
.date {} /* if it's a date-based archives page */
.error404 {} /* if it's a 404 page */

Styling post and pages

.post-XX {} /* the ID of the element being displayed; used for both the posts and the pages */
.post {} /* if it's a post */
.page {} /* if it's a page */
.attachment {} /* if it's an attachment; on most sites this is not used */
.sticky {} /* if it's a sticky post */
.format-YY {} /* assigned to custom content types - YY is the name of the content type, e.g. "audio" */

Styling content

/* the main classes used for alignment */
.alignnone {}
.alignleft {}
.alignright {}
.aligncenter {}
img.alignnone {}
img.alignleft {}
img.alignright {}
img.aligncenter {}

.wp-caption {} /* img caption */
.gallery {}
.gallery-caption {}

/* styles for img sizes */
img.size-full {}
img.size-large {}
img.size-medium {}
img.size-thumbnail {}

/* not classes, but surely something you should take care of */
blockquote {}
code {}
pre {}
hr {}
del {}

Always start by resetting

Starting your CSS work by resetting all the default tags is a good practice regardless of the project you're working on, and WordPress is no different here.

Friday, 28 November 2014

Almanac

Css Selectors	Css properties
A ::after / ::before :active Adjacent sibling Attribute	A align-content align-items align-self animation appearance
C :checked child Class	B backface-visibility background border border-collapse border-image border-radius bottom box-shadow box-sizing box-inside
D :default :disabled Descendant	C clear clip-path color column-count column-fill column-gap column-rule column-span column-width columns content counter-increment counter-reset cursor
E :empty :enabled	D direction display
F :first-line :first-child :first-of-type :focus	F filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font font-family font-size font-stretch font-style font-variant font-weight
G General sibling	G grid-row / grid-column grid-row-align / grid-column-align grid-row-span / grid-column-span grid-rows / grid-columns
H :hover	H hanging-punctuation height hyphens
I :in-range :invalid ID	J Justify-content
M :matches	M margin max-height max-width min-height min-width
N :not(s) :nth-child :nth-last-child :nth-last-of-type :nth-of-type	O opacity order orphans outline overflow
O :only-child :only-of-type optional :out-of-range	p padding page-break prespective perspective-origin pointer-events position
P ::placeholder Pseudo Class Selector Pseudo Element	Q quotes
R :read-write / :read-only :required :root	R resize right
S ::selection	S scrollbar right
T :target :type	T tab-size text-align text-decoration text-indent text-overflow text-rendering text-shadow text-strolke text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition--timing-function
U Universal	U unicode-bidi user-select
V :valid :vsited	V vertical-align visible
	W White-space widows width word-break word-spacing
	Z z-index zoom

Friday, 7 November 2014

Built with Ionic: Songhop

Songhop, a super fast way to find new music, streams music that can be quickly flipped through using swipe gestures to interact with the Tinder-esque interface. The team behind Thinkster.io: Eric Simons, Albert Pai, and Matt Green, built the app, which is targeted at teens and young adults.

In early 2013, Simons, Pai, and Green wrote what is now the de facto tutorial on AngularJS and have since taught over 500K developers AngularJS. They originally heard about Ionic from the AngularJS community and agreed that it would take significantly more time to learn native languages than to learn how Ionic was set up. They built the entire Songhop app on top of Ionic’s UI elements and plugins: modals, dialogs, navigation controllers, swipe gestures, etc.

“We custom-skinned a lot of components, and it was unbelievably easy to do so,” says Simons. “The framework is absolutely fantastic, and the documentation and resources that Ionic provides is unreal. I’ve honestly never seen such comprehensive docs and resources for a framework or platform. Further, the design decisions that the Ionic team has made are very intuitive and straightforward, which makes it a lot easier to understand how things work.”

Friday, 17 October 2014

Friday, 19 September 2014

Search box in content move to fixed header

It's a cool effect particularly if used to make UX better and not to affix some dumb intrusive ad. Here's the GIF.

For live

http://codepen.io/chriscoyier/pen/AdaKr

Friday, 29 August 2014

How css selector works

Here's what that HTML file would be like

<!DOCTYPE html>
<html lang="en">

<head>
<title>We're learning selectors!</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<h1 id="yay">Yay</h1>

<body>

</html>

Id selectors

css

#happy-cake {

}


<div id="happy-cake"></div>


<aside id="happy-cake"></aside>


<div id="sad-cake">Wrong ID!</div>



<div class="happy-cake">That's not an ID!</div>

ID selectors are the most powerful type of selector in terms of CSS specificity. Meaning that they beat out other types of selectors and the styles defined within win. That sounds good, but that's typically considered bad, because it's nice to have lower-specificity selectors that are easier to override when needed.

Class selectors

css

.module{

}


<div class="module"></div>


<aside class="country module iceland"></aside>


<div class=".module">The dot is for CSS, not HTML</div>



<div class="bigmodule">Wrong class</div>

Class selectors are your friend. They are probably the most useful and versatile selectors out there. In part because they are well supported in all browsers. In part because you can add multiple classes (just separated by a space) on HTML elements. In part because there are JavaScript things you can do specifically for manipulating classes.

Tag selectors

css

h2{

}

<main>

<div>

<h2>Anywhere</h2>

</div>

</main>

<div class="h2">Wrong tag, can't trick it</div>

<h2class="yolo">Make sure that tag has a space after it!</h2>

Attribute selectors

css

[data-modal="open"]{

}

<div data-modal="open"></div>


<aside class='closed' data-modal='open'></aside>


<div data-modal="false">Wrong value</div>


<div data-modal>No value</div>



<div data-modal-open>Wrong attribute</div>

Positional selectors

css

:nth-child(2){

}

<ul>

</ul>

Other pseudo selectors

css

:empty{

}

<div></div>


<aside data-blah></aside>


<div> </div>


<div>

</div>

Leveling up

css

.module.news {
/* Selects elements with BOTH of those classes */
}
#site-footer::after {
/* Adds content after an element with that ID */
}
section[data-open] {
/* Selects only section elements if they have this attribute */
}

.module > h2 {
/* Select h2 elements that are direct children of an element with that class */
}
h2 + p {
/* Select p elements that are directly following an h2 element */
}
li ~ li {
/* Select li elements that are siblings (and following) another li element. */

}

Saturday, 2 August 2014

CSS Triggers

When you change a CSS properties value, the browser needs to react to your change. Some values change the layout of the page. For instance, a change in width requires the browser to update layout, then "paint" any pixels that have changed, then "composite" them together. That's a lot of work. Some CSS properties can be changed more inexpensively. For instance, a change in background-image doesn't require any layout changes, but does require paint and composite.

Paul Lewis did all the research on which properties do what. A good reference to help you think about what kind of changes you can make that are easy for the browser (thus fast) and what kind of changes are hard (thus slow).

Game of layout, paint and composite

Friday, 25 July 2014

CSS3 backface-visibility Property

The backface-visibility property is currently only supported in Internet Explorer 10+ and Firefox. Opera 15+, Chrome, and Safari support an alternative, the -webkit-backface-visibility property.

The backface-visibility property defines whether or not an element should be visible when not facing the screen. This property is useful when an element is rotated, and you do not want to see its backside.

The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the "front" of an element no longer faces the screen. For instance, this would flip an element away from the screen:

Prefixes

Firefox 10+ and IE 10+ support backface-visibility with no prefix. Opera (post Blink, 15+), Chrome, Safari, iOS, and Android all need -webkit-backface-visibility.

Css syntax

backface-visibility: visible | hidden | initial | inherit;

Values

visible (default) - the element will always be visible even when not facing the screen.
hidden - the element is not visible when not facing the screen.
inherit - the property will gets its value from the its parent element.
initial - sets the property to its default, which is visible.

jsfiddle

Friday, 30 May 2014

Single line comments

CSS uses the same "block comment" syntax as the C-like languages - you start a comment with /*, and end it with */.

However, CSS is missing the "line comment" syntax that those languages have, where everything from // to the end of the line is commented out.

People have asked for this syntax to be added repeatedly, but unfortunately our hands our mostly tied - CSS minifiers don't know about line comments, so if we added it and the minifier removed all the linebreaks (as they tend to do), the line comment would accidentally comment out the entire rest of your stylesheet!

That said, CSS does actually already allow you to use //, after a fashion. It's not quite a line comment, but a next construct comment.

That is, whenever you use //, the next CSS construct - either declaration or block - will be "commented out".

For example:

.foo {
width: auto;
// height: 500px;
background: green;

}

Here, the // commented out the height declaration.

Similarly:

//@keyframes foo {
from, to { width: 500px; }
50% { width: 400px; }
}
@keyframes bar {
from, to { height: 500px; }
50% { height: 400px; }

}

Here, the // commented out the first @keyframes declaration.

Note, though, that if you try to use // just for writing comments into your stylesheet, you have to be careful - raw text isn't a CSS construct, so it'll look past that and comment out the next construct in your page:

// Do some stuff.
.foo { animation: bar 1s infinite; }

/* Whoops, the .foo block is commented out! */

Friday, 23 May 2014

Git Basics - Viewing the Commit History

Viewing the Commit History

After you have created several commits, or if you have cloned a repository with an existing commit history, you’ll probably want to look back to see what has happened. The most basic and powerful tool to do this is the git log command.

When you run git log in this project, you should get output that looks something like this:

$ git log

commit ca82a6dff817ec66f44342007202690a93763949

Author: Scott Chacon <schacon@gee-mail.com>

Date: Mon Mar 17 21:52:11 2008 -0700

changed the version number

commit 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7

Author: Scott Chacon <schacon@gee-mail.com>

Date: Sat Mar 15 16:40:33 2008 -0700

removed unnecessary test code

commit a11bef06a3f659402fe7563abf99ad00de2209e6

Author: Scott Chacon <schacon@gee-mail.com>

Date: Sat Mar 15 10:31:28 2008 -0700

first commit

Saturday, 17 May 2014

Rotated Table Column Headers

Perhaps not a huge problem for two columns, but if you had 20 that would be very hard to navigate and a poor use of space. A better use of space is to rotate the headers so that the column width can be much narrower.

Rotating 90-degrees is too far though. It makes it hard to read.

Interestingly, we get just about the same amount of space saving if we rotate the headers 45 degrees instead, and they are much easier to read.

for live

http://codepen.io/chriscoyier/pen/Fapif

Friday, 9 May 2014

Transform origin

The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform

Summary

The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

Syntax

transform-origin: x-offset /* One-value syntax */ E.g. transform-origin: 2px
transform-origin: offset-keyword E.g. transform-origin: bottom

transform-origin: x-offset y-offset /* Two-value syntax */ E.g. transform-origin: 3cm 2px
transform-origin: y-offset x-offset-keyword E.g. transform-origin: 2px left
transform-origin: x-offset-keyword y-offset E.g. transform-origin: left 2px
transform-origin: x-offset-keyword y-offset-keyword E.g. transform-origin: right top
transform-origin: y-offset-keyword x-offset-keyword E.g. transform-origin: top right

transform-origin: x-offset y-offset z-offset /* Three-value syntax */ E.g. transform-origin: 2px 30% 10px
transform-origin: y-offset x-offset-keyword z-offset E.g. transform-origin: 2px left 10px
transform-origin: x-offset-keyword y-offset z-offset E.g. transform-origin: left 5px -3px
transform-origin: x-offset-keyword y-offset-keyword z-offset E.g. transform-origin: right bottom 2cm

transform-origin: y-offset-keyword x-offset-keyword z-offset

Friday, 2 May 2014

List of Mistakes in the Design of CSS

List of mistakes

white-space: nowrap should be white-space: no-wrap
vertical-align should not apply to table cells. Instead the CSS3 alignment properties should exist in Level 1.
vertical-align: middle should be text-middle because it's not really in the middle.
Percentage heights should be calculated against fill-available rather than being undefined in auto situations.
Table layout should be sane.
Box-sizing should be border-box by default.
background-size with one value should duplicate its value, not default the second one to auto.
z-index should be called z-order or depth and should Just Work on all elements (like it does on flex items).
word-wrap should have been called overflow-wrap from the beginning because it confuses everybody.
The top and bottom margins of a box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.
Partial collapsing of margins instead of weird rules to handle min/max-heights?
Tables (and other non-blocks, e.g. flex containers) should form pseudo-stacking contexts.
The currentcolor keyword should have a dash, current-color.
There should have been a predictable color naming system instead of arbitrary X11 names.
border-radius should have been border-corner.
Absolutely-positioned replaced elements should stretch when opposite offset properties (e.g. left+right) are set, instead of being start-aligned.
The hyphens property should be called hyphenate. (It's called hyphens because the XSL:FO people objected to hyphenate.)
rgba() and hsla() should not exist, rgb() and hsl() should have gotten an optional fourth parameter instead (and the alpha value should have used the same format as R, G, and B or S and L).
descendant combinator should have been » and indirect sibling combinator should have been ++, so there's some logical relationships among the selectors' ascii art

Friday, 18 April 2014

12 Little-Known CSS Facts

The color Property Isn’t Just for Text
The visibility Property Can Be Set to “collapse”
The background Shorthand Property Has New Values
The clip Property Works Only on Absolutely Positioned Elements
Vertical Percentages are Relative to Container Width, Not Height
The border Property is Kind of Like Inception
The text-decoration Property is Now a Shorthand
The border-width Property Accepts Keyword Values
Nobody Uses border-image
There’s an empty-cells Property
The font-style Property Accepts a Value of “oblique”
word-wrap is the Same as overflow-wrap

For more details click below link

http://www.sitepoint.com/12-little-known-css-facts/

Friday, 11 April 2014

CSS Font-Size: em vs. px vs. pt vs. percent

Meet the units

“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

What is the difference

Monday, 7 April 2014

Dynamic Div Height To Browser Window

I was trying it get a div to always be the height of the browser window and i finally got it to work with this code.

Set an article to 100% height

Jquery

$('article') .css({'height': (($(window).height()))+'px'});
$(window).resize(function(){
$('article') .css({'height': (($(window).height()))+'px'});
});

jsfiddle

http://jsfiddle.net/Nitin_Grover/BPz7X/

Friday, 21 March 2014

Images with srcset

How srcset works

First implementation of srcset only lets us define a set of images for different pixel densities using resolution modifiers.

simply add the srcset attribute to an img element and at least one resolution modifier. The browser then display the most appropriate image from the available options. For example, the 2x modifier targets the image to use if the display has a pixel density of 2 or higher.

<img src="hello.jpg" srcset="hello-2x.jpg 2x" />

Consclusion

Undoubtedly, srscet has a long way to go, but it's pressing forward in the right direction and helping us solve a problem. Overall, this will be a more intelligent way to serve our content images.

A future implementation of srcset will alloy us to load images based on the viewport size:

<img src="hello.jpg" srcset="hello-2x.jpg 720w, hello-3x 1280w" />

Thursday, 6 March 2014

Accordian using checkbox

HTML

<div class="schools_accordian">
<ul>
<li class="block">
<input type="checkbox" name="item" id="item1" />
<label for="item1">Friends</label>
<ul class="options">
<li><a href="#">Find New Friends</a></li>
<li><a href="#">Poke A Friend</a></li>
<li><a href="#">Incinerate Existing Friends</a></li>
</ul>
</li>

<li class="block">
<input type="checkbox" name="item" id="item3" />
<label for="item3">Galleries</label>
<ul class="options">
<li><a href="#">My Deviant Art</a></li>
<li><a href="#">My Deviant Art</a></li>
<li><a href="#">My Deviant Art</a></li>
</ul>
</li>
</ul>

</div>

CSS

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.schools_accordian{
width: 100%;
}
ul {
list-style:none;
margin:0;
padding:0;
width:100%;
margin:0 auto;

}

ul li label {
background: #575e63; /* fallback colour */
border-top:1px solid #878e98;
border-bottom:1px solid #33373d;
color: #fff;
text-shadow: 0 1px 1px #000;
letter-spacing: 0.09em;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#575e63), to(#3f4347));
background: -webkit-linear-gradient(top, #575e63, #3f4347);
background: -moz-linear-gradient(top, #575e63, #3f4347);
background: -ms-linear-gradient(top, #575e63, #3f4347);
background: -o-linear-gradient(top, #575e63, #3f4347);
}

ul li input[type='checkbox'] {
display: none;
}

ul li label {
display:block;
padding:12px;
width:100%;
}

ul li label:hover {
background: #566f82; /* fallback colour */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#566f82), to(#3e505e));
background: -webkit-linear-gradient(top, #566f82, #3e505e);
background: -moz-linear-gradient(top, #566f82, #3e505e);
background: -ms-linear-gradient(top, #566f82, #3e505e);
background: -o-linear-gradient(top, #566f82, #3e505e);
}

ul li input[type='checkbox']:checked ~ label {
background: #44c6eb; /* fallback colour */
border-top:1px solid #878e98;
border-bottom:1px solid #2799db;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#44c6eb), to(#2799db));
background: -webkit-linear-gradient(top, #44c6eb, #2799db);
background: -moz-linear-gradient(top, #44c6eb, #2799db);
background: -ms-linear-gradient(top, #44c6eb, #2799db);
background: -o-linear-gradient(top, #44c6eb, #2799db);
}

ul li input[type='checkbox']:checked ~ label span {
background: #2173a1; /* fallback colour */
border-top:1px solid #1b5f85;
border-bottom:1px solid #4cb1e4;
-moz-box-shadow: inset 0 0 5px #111;
-webkit-box-shadow: inset 0 0 5px #111;
box-shadow: inner 0 0 5px #111;
}

ul li input[type='checkbox']:checked ~ .options {
height: auto;
display:block;
min-height:40px;
max-height:400px;
}

ul ul {
background:#fff; margin:0; padding:0;
-moz-box-shadow: inset 0 2px 2px #b3b3b3;
-webkit-box-shadow: inset 0 2px 2px #b3b3b3;
box-shadow: inner 0 2px 2px #b3b3b3;
}

ul ul li a {
display:block;
padding:6px 12px;
color:#999;
text-decoration:none;
}

ul ul li a:hover {
color:#44c6eb;
}
ul ul li {
border-bottom:1px solid #ccc;
}

ul ul li:first-child {
padding-top:6px;
}

ul ul li:last-child {
padding-bottom:6px; border:0;
}

.options {
height: 0;
display: block;
overflow: hidden;

}

Live demo jsfiddle

Friday, 5 December 2014

Friday, 28 November 2014

Friday, 7 November 2014

Friday, 17 October 2014

Sponsored: Stack – Task Management for Dev Teams

Friday, 19 September 2014

Friday, 29 August 2014

Saturday, 2 August 2014

Friday, 25 July 2014

Prefixes

Css syntax

Values

Friday, 30 May 2014

Friday, 23 May 2014

Viewing the Commit History

Saturday, 17 May 2014

Friday, 9 May 2014

Friday, 2 May 2014

Friday, 18 April 2014

Friday, 11 April 2014

Monday, 7 April 2014

Friday, 21 March 2014

How srcset works

Consclusion

Thursday, 6 March 2014