drwpow

MVCSS stands for Modular View CSS. It’s a [Sass][sass]-based CSS architecture for creating predictable and maintainable application style. Those familiar with [SMACSS][smacss] will find a lot of overlap.

The Basics

1. Classes only; no IDs. [Why?][classes-only]
2. Try to avoid nesting selectors inside other selectors. [Why?][nesting]
3. Practice single responsibility: each component is in its own file, and never affects the styling of other components. [Why?][single-responsibility]
4. Alphabetize everything (most IDEs can map this to a button).
5. Use camelCase for compound words; no underscores or hyphens (hyphens are explained below).

drwpow

Basics

1. Have an /icons folder with SVGs in it.
2. Saving SVGs on a common artboard size isn’t required, but recommended for consistency (I use 512 × 512 px artboards for most SVGs)
3. Run SVGO (brew install svgo) on the SVGs to minimize them. This just keeps file size really low. It works perfect for simple icons but can be skipped if it messes up more complicated icons.

svgo icons/twitter.svg

4. Open up a new document in your editor, save it as icons.svg (or whatever).

drwpow

• A Trip to the Moon (Le Voyage Dans La Lune) (1902)
• The Great Train Robbery (1903)
• The Birth of a Nation (1915)
• Les Vampires (1915)
• Intolerance (1916)
• The Cabinet of Dr. Caligari (Das Kabinett des Doktor Caligari) (1920)
• Broken Blossoms (1919)
• Within Our Gates (1920)
• Way Down East (1920)
• Orphans of the Storm (1921)

drwpow

.cal-day--disabled
  display: none
  @media screen and (min-width: 450px)
    display: block

.cal-day:not(.cal-day--disabled)
  ~ .cal-day
    display: block

.cal

drwpow

Envy Design Mentorship Proposal

Gotta catch ’em all! There are over 150 mentors to collect. Can you become a Mentémon Master?

The Main Idea

Every willing designer at Envy mentors 1 local mentee looking to start a career in web or app design. A good mentorship program:

1. Gives the mentee realistic expectations about a career in tech
2. Challenges juvenile design thinking and pushes the mentee towards senior-level design

drwpow

Modals

Default (not showing)

<div class="modal">
  <!-- modal stuff -->
</div>

drwpow

<!--
#f0f0f0 / Light gray (margin color)
#d9d9d9 / Medium gray
#455660 / Dark gray (elements)
#88cc00 / Bright green (highlight color)
#333333 / Charcoal (text color)
#41bdeb / Turquoise (link color)
#ffffff / White (background color)
-->
<mjml>

drwpow

<div class="row">
  <div class="medium-4">
    <!-- The left menu goes in here -->
  </div>
  <div class="medium-8">
    <!-- The right-side content goes in here -->
  </div>
</div>

drwpow

{!REQUIRESCRIPT("/soap/ajax/29.0/connection.js")} 

var updateClientApproval = [];
var result = sforce.connection.query("SELECT Id, Create_Client_Approval__c FROM Order__c where Opportunity__c = '{!Opportunity__c.Id}' ");
var records = result.getArray("records"); 

var i = 0;
for (i; i < records.length ; i++) {
  var child = result.records[i];
  child.Create_Client_Approval__c = true;

drwpow

var sliderManager = new Hammer.Manager(document.querySelector('.slider'));
sliderManager.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
sliderManager.on('pan', function(e) {
  console.log(e);
});