Skip to content

Instantly share code, notes, and snippets.

Jitendra Vyas jitendravyas

View GitHub Profile
@jitendravyas
jitendravyas / Wingify-fifa-17-league.md
Last active Jun 21, 2017
Wingify Fifa 2017 League
View Wingify-fifa-17-league.md

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

Venue

14th Floor, KLJ Tower, Delhi Office

@jitendravyas
jitendravyas / teams.md
Last active Jun 12, 2017
Top 16 Fifa 17 teams
View teams.md
  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
jitendravyas / index.html
Created Dec 27, 2016
Use :root for Flexible Type
View index.html
<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="https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/">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
jitendravyas / atomic-vs-oocss.html
Created Nov 7, 2016 — forked from chinchang/atomic-vs-oocss.html
Comparing code for OOCSS and Atomic CSS
View atomic-vs-oocss.html
<!--
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>
...
</ul>
View gist:31195c89da14733dccac2115ac2b3a91
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
jitendravyas / head.html
Last active Oct 21, 2016
This to keep in HTML Email <head>
View head.html
<!doctype html>
<!--[if IE]><html xmlns="http://www.w3.org/1999/xhtml" class="ie"><![endif]-->
<!--[if !IE]><!-->
<html style="margin: 0;padding: 0;" lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8">
<!--[if !mso]><!-->
@jitendravyas
jitendravyas / keymap.cson
Created Oct 11, 2016 — forked from paulmsmith/keymap.cson
emmet + nunjucks in atom with snippets
View keymap.cson
'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'
#https://github.com/atom/autocomplete-plus/issues/86#issuecomment-82661027
'atom-text-editor.autocomplete-active:not([mini])':
'tab': 'autocomplete-plus:confirm'
View MJML-boilerplate.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#outlook a {
padding: 0;
}
View mjml-default.mjml
<mjml>
<mj-head>
<mj-attributes>
<mj-text font-family="-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',sans-serif" font-size="16px" color="#212121" font-weight="400" font-style="normal" />
</mj-attributes>
</mj-head>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
@jitendravyas
jitendravyas / email.mjml
Created May 10, 2016 — forked from anonymous/email.mjml
Made with MJML App
View email.mjml
<mjml>
<mj-body>
<mj-container background-color="#f8f8f8">
<!-- Company Header -->
<mj-section padding-bottom="0" padding-top="0" padding-bottom="0" padding-left="0">
<mj-column>
<mj-image padding-top="20" padding-left="15" padding-bottom="15" align="left" src="https://s3.eu-central-1.amazonaws.com/airfy-mail-assets/Logo.png" width="62px"/>
You can’t perform that action at this time.