cmalven

Let's make npm the standard for managing front-end packages.

Why?

• The state of front-end package managers is all over the place.
• Bower is still very non-standardized, resulting in bloated downloads and making it difficult to rely on libraries being packaged up in a consistent way.
• None of the other package system (e.g. Component) seem to have enough momentum that they're going to reach critical mass.
• The npm community has a single good, effective way to use npm modules in the browser with Browserify.
• Browserify doesn't try to do too much or too little. It simply traces dependencies and bundles everything into a nice, tidy package.
• The CommonJS module system is reasonably easy to understand, easy to read, and generally pleasant to work with. While AMD has its advantages, it generally loses in the categories of clarity, readability, and consistency (in that you still need to use a separate module system for backend node modules.)

cmalven

<span data-picture>
  <span data-src="{{ asset.getUrl('smallFullHi') }}"></span>

  <span data-src="{{ asset.getUrl('medium') }}" data-media="(min-width: 600px)"></span>
  <span data-src="{{ asset.getUrl('mediumHi') }}" data-media="(min-width: 600px) and (min-device-pixel-ratio: 2.0)"></span>

  <span data-src="{{ asset.getUrl('large') }}" data-media="(min-width: 1000px)"></span>
  <span data-src="{{ asset.getUrl('largeHi') }}" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></span>

  <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->

cmalven

{# If str contains a character with descender ('gjpqy'), outputs a class #}

{% macro descender_class(str) %}
    {% set chars = [ 'g', 'j', 'p', 'q', 'y'] %}
    {% set hasDescender = false %}
    {% for c in chars %}
        {% if c in str %}
          {% set hasDescender = true %}
        {% endif %}
    {% endfor %}

cmalven

var Collection = require('ampersand-collection');
var SubCollection = require('ampersand-subcollection');
var Model = require('ampersand-model');

var MyModel = Model.extend({
  props: {
    name: 'string',
    selected: 'boolean'
  }
});

cmalven

// ...

gulp.task('concatStyles', function() {
    return gulp.src(['assets/styles/objects/**/*.scss', 'assets/styles/layout/**/*.scss'])
        .pipe(concat)
        .pipe(gulp.dest('/'))
        .pipe(concat('_combined-object-layout.scss'));
});

gulp.task('styles', ['concatStyles'], function() {

cmalven

// ----
// libsass (v3.1.0-beta)
// ----

$base-colors: (
  red: #ea1c2c,
  drkred: #5b0411,
  ltred: #e28a91,
  blue: #2daae1,
  drkblue: #2596c7,

cmalven

// ----
// libsass (v3.1.0-beta)
// ----

$base-colors: (
  red: #ea1c2c,
  drkred: #5b0411,
  ltred: #e28a91,
  blue: #2daae1,
  drkblue: #2596c7,

cmalven

if (Modernizr.getUserMedia || Modernizr.flash ) {
  // The user has either getUserMedia or Flash available, so we can show the button.
  $('.js-use-webcam-btn').show();
}

cmalven

<meta name="viewport" content="width=320">

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="initial-scale=1">

<meta name="viewport" content="maximum-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

cmalven

{
	"folders":
	[
		{
			"path": "root-project-folder",
			"folder_exclude_patterns": ["css", ".sass-cache"]
		}
	]
}