jitendravyas

<!--
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>

jitendravyas

'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'

jitendravyas

  <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"/>

jitendravyas

  <mjml>
  <mj-body>
    <mj-container background-color="#f8f8f8">

      
      <!-- Company Header -->
<mj-section padding-bottom="0">
  <mj-column width="100%">
    <mj-image align="left" src="https://avatars0.githubusercontent.com/u/16115896?v=3&s=200" width="50px"/>

jitendravyas

  <mjml>
  <mj-body>
    <mj-container background-color="#ccc">

      
      <!-- Company Header -->
<mj-section padding-bottom="0" background-color="#fff">
  <mj-column width="100%">
    <mj-image align="left" src="https://avatars0.githubusercontent.com/u/16115896?v=3&s=200" width="50px"/>

jitendravyas

UI development as a first-class citizen

The single hardest part of front-end development at scale is making changes to code and understanding all of the visual and behavioral effects that will occur as a result.

When you build a component, tests should be written that expose each state a component can be in. This test should generate a static html file and a corresponding image for every discrete state a component can be in.

jitendravyas

{
  "use_simple_full_screen": false,

  // calculates indentation automatically when pressing enter
  "auto_indent": true,

  // sets the colors used within the text area (default)
  // see https://github.com/olivierlacan/monokaim to download
  // the customized Monokai I use.
  "color_scheme": "Packages/Color Scheme - Default/Monokaim.tmTheme",

jitendravyas

What is the system Ruby?

What version of Ruby shipped by default on Mac OS X?

Default Ruby version * Refers to the fully patched version (e.g. 10.5.8, not 10.5.0). Earlier versions may have shipped with different Ruby patchlevels but the RUBY_VERSION has never changed within major Mac OS X releases.

Mac OS X version*	Mac OS X release date

jitendravyas

/*----------------------------------------------------------------------------------------*/
/* Opt-in typography - http://goo.gl/H6sGd
 * Zero off common semantic elements to stop re-definition
 * Use .text class on the parent of anything requiring text styles
/*----------------------------------------------------------------------------------------*/
$baseline: 1.5em;

@mixin zero-text-elements {

	h1, h2, h3, h4, h5, h6, blockquote, pre,

jitendravyas

// 1. Keeps page centred in all browsers regardless of content height
// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
//    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
html {
    overflow-y: scroll; // 1
    -webkit-text-size-adjust: 100%; // 2
    -ms-text-size-adjust: 100%; // 2
	text-size-adjust: 100%; // 2
}