Skip to content

Instantly share code, notes, and snippets.

View jitendravyas's full-sized avatar

Jitendra Vyas jitendravyas

View GitHub Profile
jitendravyas /
Last active June 21, 2017 19:21
Wingify Fifa 2017 League

Wingify Fifa 2017 League

  • Tournament will contain 17 players
  • Every player will play with 1 team
  • No restriction on team, anyone can take any team and change in every match
  • All teams will play against all other player's teams once
  • The tournament will consist of 136 fixtures


14th Floor, KLJ Tower, Delhi Office

jitendravyas /
Last active June 12, 2017 18:13
Top 16 Fifa 17 teams
  1. Real madrid
  2. FC Barcelona
  3. Liverpool
  4. Manchester united
  5. Manchester City
  6. Arsenal
  7. Chelsea
  8. Paris Saint Germain
  9. Bayern Munich
  10. Borussia Dortmund
jitendravyas / index.html
Created December 27, 2016 15:00
Use :root for Flexible Type
<div class="container">
<h1>Use <code>:root</code> for Flexible Type</h1>
<h2>Resize this Window 😁</h2>
<p>Now that you've set the <code>:root</code> pseudo-class to calculate <code>font-size</code> based on <a href="">viewport height and width</a>, the body will utilize the root <code>em</code> that's based on the value calculated by <code>:root</code>. <em>Notice when you resize the window that the root font size for all elements stays relative no matter viewport size?</em></p>
<p>Sugar plum cake apple pie sweet fruitcake lemon drops gingerbread. Tart icing topping apple pie chupa chups jelly-o chupa chups ice cream. Jelly-o pie chocolate bar lollipop donut.</p>
<p>Powder tiramisu dessert. Chocolate cake marzipan topping. Biscuit croissant gummi bears topping gingerbread cotton candy bonbon cupcake cake.</p>
<p>Chocolate carrot cake jelly dragée. Sugar plum candy canes tiramisu. Chocolate marshmallow tootsie roll cake cake.
jitendravyas / atomic-vs-oocss.html
Created November 7, 2016 04:09 — forked from chinchang/atomic-vs-oocss.html
Comparing code for OOCSS and Atomic CSS
Example: A simple list component with each item as a block one below other with some padding and border.
<!-- Atomic CSS -->
<ul class="MB(baseSpacing) Bgc(#0280ae)">
<li class="P(halfBaseSpacing) BdB(1px)"></li>
jitendravyas / gist:31195c89da14733dccac2115ac2b3a91
Created November 5, 2016 16:00
Story of a Atomic CSS button
Anyway, the <button> example @jitendravyas posted earlier (from the Yahoo's site) may be the very best example to explain everything about ACSS.
People new to ACSS will tell you that this is ugly like hell, that changing some styling for that button means to edit the markup which means to go against the Separation of Concern principle, that they do not understand what all these classes mean, how can somebody learn all that, that it is bloating the markup, and did I mention that it is ugly like hell?
Now let's say you are a Yahoo! engineer working working on the "Universal Header (UH for short)" team. You are in charge of making that big ass component that is the UH work across all the many many web sites Yahoo owns. Web sites built on various tech stacks, dealing with different script directions (RTL/LTR), different release cycles, different CSS resets, etc. etc. I have worked with that team and I can tell you they are facing really big challenges (including styles injected to pages by crappy ads)...
Before A
jitendravyas / head.html
Last active October 21, 2016 16:44
This to keep in HTML Email <head>
<!doctype html>
<!--[if IE]><html xmlns="" class="ie"><![endif]-->
<!--[if !IE]><!-->
<html style="margin: 0;padding: 0;" lang="en" xml:lang="en" xmlns="" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8">
<!--[if !mso]><!-->
jitendravyas / keymap.cson
Created October 11, 2016 19:00 — forked from paulmsmith/keymap.cson
emmet + nunjucks in atom with snippets
'atom-text-editor[data-grammar="text html nunjucks"]:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
'atom-text-editor[data-grammar="source nunjucks"]:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
'tab': 'autocomplete-plus:confirm'
<!doctype html>
<html xmlns="" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#outlook a {
padding: 0;
<mj-text font-family="-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',sans-serif" font-size="16px" color="#212121" font-weight="400" font-style="normal" />
jitendravyas / email.mjml
Created May 10, 2016 17:13 — forked from anonymous/email.mjml
Made with MJML App
<mj-container background-color="#f8f8f8">
<!-- Company Header -->
<mj-section padding-bottom="0" padding-top="0" padding-bottom="0" padding-left="0">
<mj-image padding-top="20" padding-left="15" padding-bottom="15" align="left" src="" width="62px"/>