dehuszar

autocmd FileType python set omnifunc=pythoncomplete#Complete
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
autocmd FileType html set omnifunc=htmlcomplete#CompleteTags
autocmd FileType css set omnifunc=csscomplete#CompleteCSS
autocmd FileType xml set omnifunc=xmlcomplete#CompleteTags
autocmd FileType php set omnifunc=phpcomplete#CompletePHP
autocmd FileType html,hbs,handlebars,php setlocal omnifunc=htmlcomplete#CompleteTags
autocmd BufEnter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif
autocmd BufEnter * lcd %:p:h
autocmd StdinReadPre * let s:std_in=1

dehuszar

# place in [app]/public so it gets compiled into the dist folder
Options FollowSymLinks

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

dehuszar

module.exports = function(grunt) {

    grunt.initConfig({

        watch: {
            css: {
                files: '**/*.styl',
                tasks: ['stylus'],
                options: {
                    livereload: true

dehuszar

// run script like so:
// node placeholdernater.js input="path/to/files/[file.css]" type="styl"
// TODO:: right now an "output" folder needs to be created where you run the script.  Need to roll an output= param into the process and handle default folder testing and creation

// dependancies
var fs = require('fs'),
    path = require('path'),
    rework = require('rework'),
    selectors = require('rework-mutate-selectors');

dehuszar

Semantic Remapping Nested Extend Example (LESS)

This is an example of how you can use LESS to create deeply nested extendable objects. Here I've basically created a page layout for an article view. It extends from Yahoo's Pure framework, specifically it's grid.

Because we import Pure with the (reference) option we are able to extend out only the items we need making the use of a framework much easier on bandwidth and override specificity.

With the object defined (.layout-article-full) I can have my markup use a simple semantic class on it's parent, which extends the object. Nice and easy.

Minified, the CSS output is 4.32k --which is incidentally about the size of Pure's core library without the responsive grids we are using. Minified and gzipped it's 822 bytes.

dehuszar

Semantic Remapping Layout Example (LESS)

Here is a quick site layout concept that uses Semantic Remapping to keep the markup super clean. The layout is based off of a template available from Pure's website: http://purecss.io/layouts/pricing/

This example is used and explained in greater detail in my article: https://medium.com/@dehuszar/semantic-remapping-with-css-pre-processors-906ba1a9910c

A Pen by dehuszar on CodePen.

License.

dehuszar

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  actions: {
        sendOutput(value) {
          alert(value);
        }
  }
});

dehuszar

Calendar Component (LESS, no framework)

This is an example of how LESS can be used to create a semantically remapped calendar component.

A Pen by dehuszar on CodePen.

License.

dehuszar

/* Move this file into src/ folder */
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var atImport = require('postcss-import');
var nested = require('postcss-nested');
var reference = require('postcss-reference');
var mqpacker = require('css-mqpacker');

gulp.task('css', function () {
  return gulp.src('./src/*.css')

dehuszar

// dependencies
var fs = require("fs");
var postcss = require("postcss");
var atImport = require("postcss-import");
var nested = require("postcss-nested");
var reference = require("postcss-reference");

var file = "style.css";

// css to be processed