lvl99

/*
 * SCSS Dynamic Breakpoint Media Queries
 * Author: Matt Scheurich <matt@lvl99.com>
 *
 * This is just a few ramshackle mixins I put together based on a theory.
 * Don't know if they're suitable for production yet, but check it out.
 * Please note that it's all only supported by `min/max-width`, no pixel
 * density or orientation, or even anything other than the `screen` media type.
 */

lvl99

[
  {
    "unicode": "U+1F601",
    "bytes": "\\xF0\\x9F\\x98\\x81",
    "description": "grinning face with smiling eyes",
    "htmlchar": "😁"
  },
  {
    "unicode": "U+1F602",
    "bytes": "\\xF0\\x9F\\x98\\x82",

lvl99

import Ember from 'ember';

export default Ember.Component.extend({
  filteredItems: Ember.computed('items', function () {
    // Imagine more than just one filter here
    return this.get('items').filterBy('showMe', true)
  }),
  
  sortDirection: ['lastUpdated:desc', 'createdAt:desc'],
  sortedItems: Ember.computed.sort('filteredItems', 'sortDirection'),

lvl99

import Ember from 'ember'

export default Ember.Component.extend({
  store: Ember.inject.service(),
  title: undefined,
  location: undefined,
  rating: undefined,
  
  inputRatings: [{
    label: 'Not rated',

lvl99

class Modal extends Toggleable {
  // … magic goes here …
}

lvl99

<!-- Modal component HTML structure with modal and toggleable classes applied -->
<!-- This is usually the most basic way to combine multiple classes on an element -->
<div id=”example-a” class=”modal toggleable”>
  <!-- … oh la la, magic~~~ … -->
</div>

lvl99

// Toggleable Mixin Class
// @param @ns Namespaces the custom state classes
// @param @-toggleable-display Sets the display property for showing the toggleable
.ui-lvl99-toggleable(@ns: ~"lvl99-toggleable"; @-toggleable-display: ~"block") {
  // Uses the namespace to build custom state classes
  @-toggleable-ns-class-show: ~".ui-@{ns}-show";
  @-toggleable-ns-class-hide: ~".ui-@{ns}-hide";

  // Class mixin which contain style definitions for `show` state
  .-toggleable-class-show(@rules: {}) {

lvl99

// Import and apply the Toggleable Mixin Class to a specific class
.toggleable {
  // Imports the mixin and its related mixins and variables
  .ui-lvl99-toggleable(@ns: ~"toggleable");
  // Initialise the default since we have no other modifications from the normal
  .-toggleable-init-default();
}

// Let's do a parametric modification since spans should be displayed using `inline` or `inline-block`
span.toggleable {

lvl99

.ui-lvl99-toggleable(@ns: ~"lvl99-toggleable"; @-toggleable-display: ~"block") {
  // … magic beans follows ...
}

lvl99

// Modal component
.modal {
  .ui-lvl99-toggleable(@ns: ~“modal”);
  .-toggleable-init-default();
}

// ... would generate the following CSS
.modal.ui-modal-show {
  display: block;
}