snippets.cson

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson

# SCSS
  # Media queries
'.source.scss':
  'Media Query':
    'prefix': 'media'
    'body': '
    @media (${1:size}) {
      \n
      \n    ${2:propiedades}
      \n
      \n}'
  'Media Mobile':
    'prefix': 'media mobile'
    'body': '
    @media ($mobile) {
      \n
      \n    ${1:propiedades}
      \n
      \n}'
  'Media Desktop':
    'prefix': 'media desktop'
    'body': '
    @media ($desktop) {
      \n
      \n    ${1:propiedades}
      \n
      \n}'
  'Media Tablet':
    'prefix': 'media tablet'
    'body': '
    @media ($tablet) {
      \n
      \n    ${1:propiedades}
      \n
      \n}'
  'Media Phone':
    'prefix': 'media phone'
    'body': '
    @media ($phone) {
      \n
      \n    ${1:propiedades}
      \n
      \n}'
  'Media Phone Small':
    'prefix': 'media phone small'
    'body': '
    @media ($phoneSmall) {
      \n
      \n    ${1:propiedades}
      \n
      \n}'
  'Media Desktop Large':
    'prefix': 'media desktop large'
    'body': '
    @media ($desktopLarge) {
      \n
      \n    ${1:propiedades}
      \n
      \n}'
  'Media Desktop Medium':
    'prefix': 'media desktop medium'
    'body': '
    @media ($desktopMedium) {
      \n
      \n    ${1:propiedades}
      \n
      \n}'
  'Media Only Tablet':
    'prefix': 'media tablet only'
    'body': '
    @media ($onlyTablet) {
      \n
      \n    ${1:propiedades}
      \n
      \n}'
  'Media Only Desktop Medium':
    'prefix': 'media desktop medium only'
    'body': '
    @media ($onlyDesktopMedium) {
      \n
      \n    ${1:propiedades}
      \n
      \n}'
  'Media Only From Tablet':
    'prefix': 'media tablet only from'
    'body': '
    @media ($fromTablet) {
      \n
      \n    ${1:propiedades}
      \n
      \n}'

  'Interpolación':
    'prefix': 'interpolación'
    'body': '#{$${1:variable}}'
  'Selector de atributos Término':
    'prefix': 'attribute term'
    'body': '
    [${1:atributo}*="${2:término}"] {
      \n
      \t    ${3:propiedades}
      \n}'
  'Selector de atributos':
    'prefix': 'attribute'
    'body': '
    [${1:atributo}="${2:término}"] {
      \n
      \t    ${3:propiedades}
      \n}'
  'Padding model':
    'prefix': 'padding model'
    'body': '
    padding: {
      \n    top: ${1:value};
      \n    right: ${2:value};
      \n    bottom: ${3:value};
      \n    left: ${4:value};
      \n}'
  'Margin model':
    'prefix': 'margin model'
    'body': '
    margin: {
      \n    top: ${1:value};
      \n    right: ${2:value};
      \n    bottom: ${3:value};
      \n    left: ${4:value};
      \n}'
  'Box model':
      'prefix': 'boxmodel'
      'body': '$boxModel'
  'Animation - Cubic bezier':
      'prefix': 'cubicbezier'
      'body': '$cubicBezier'
  'Animation - Linear':
      'prefix': 'linear'
      'body': '$linear'

# SCSS Directivas de control
  'Control directive @for':
      'prefix': 'for'
      'body': '@for $${1:variable} from ${2:value} through ${3:value} {
      \n    ${4:statement}
      \n}'
  'Control directive @each':
      'prefix': 'each'
      'body': '@each $${1:variable} in $${2:variable} {
      \n    ${3:statement}
      \n}'
  'Control directive @each key value':
      'prefix': 'each key value'
      'body': '@each $${1:variable}, $${2:variable} in $${3:variable} {
      \n    ${4:statement}
      \n}'
  'Control directive @if comparison':
      'prefix': 'if is equal'
      'body': '@if ${1:declaración} == ${2:comparación} {
      \n    ${3:statement}
      \n}'

## UI
    # 'UI button':
    #     'prefix': 'ui button'
    #     'body': '.ui-button {
    #     \n    ${1:statement}
    #     \n}'
    # 'UI button shorthand':
    #     'prefix': 'ui button shorthand'
    #     'body': '.ui-btn {
    #     \n    ${1:statement}
    #     \n}'
    # 'UI button ghost':
    #     'prefix': 'ui button ghost'
    #     'body': '.ui-button-ghost {
    #     \n    ${1:statement}
    #     \n}'
    # 'UI button ghost shorthand':
    #     'prefix': 'ui button ghost shorthand'
    #     'body': '.ui-btn-ghost {
    #     \n    ${1:statement}
    #     \n}'

# WORDPRESS

'.source.php':
    'WP Query':
        'prefix': 'query'
        'body': '
        \n    $args = array(
        \n        \'post_type\'   => \'${1:post type}\',
        \n    );
        \n
        \n    $wp_query = new WP_Query( $args );
        \n
        \n?>
        \n
        \n<?php if( $wp_query->have_posts ) : while( $wp_query->have_posts ) : $wp_query->the_post; ?>
        \n
        \n    <?php ${2:the_title()}; ?>
        \n
        \n<?php endwhile; echo \'Aún no se han publicado entradas\'; endif; ?>'
    'WP Query Counter':
        'prefix': 'query counter'
        'body': '
        \n    $args = array(
        \n        \'post_type\'   => \'${1:post type}\',
        \n    );
        \n
        \n    $wp_query = new WP_Query( $args );
        \n
        \n?>
        \n
        \n<?php if( $wp_query->have_posts ) : $counter; while( $wp_query->have_posts ) : $counter++; $wp_query->the_post; ?>
        \n
        \n    <?php ${2:the_title()}; ?>
        \n
        \n<?php endwhile; echo \'Aún no se han publicado entradas\'; endif; ?>'
    'WP Loop':
        'prefix': 'loop'
        'body': 'if( have_posts ) : while( have_posts ) : the_post; ?>
        \n
        \n    <?php ${2:the_title()}; ?>
        \n
        \n<?php endwhile; echo \'Aún no se han publicado nada\'; endif; ?>'
    'ACF rows':
        'prefix': 'acf rows'
        'body': 'if( have_rows( \'${1:field}\' ) ) : while( have_rows( \'${1:field}\' ) ) : the_row; ?>
        \n
        \n    <?php the_sub_title( \'${2:sub_field}\' ) ?>
        \n
        \n<?php endwhile; endif; ?>'
    'ACF field':
        'prefix': 'acf field'
        'body': 'the_field( \'${1:field}\' ); ?>'
    'ACF sub field':
        'prefix': 'acf sub field'
        'body': 'the_sub_field( \'${1:sub_field}\' ); ?>'

# HTML
# WK framework
'.text.html':
    'WK section':
        'prefix': 'wk section'
        'body': '
        \n<section id="${1:id}" class="wk-section">
        \n    <div class="wk-section-wrap">
        \n
        \n        ${2:statement}
        \n
        \n    </div>
        \n</section>'
    'WK wrap':
        'prefix': 'wk wrap'
        'body': '
        \n<div class="wk-wrap-${1:size 900 to 1900 px}">
        \n    <section id="${2:id}" class="wk-section">
        \n        <div class="wk-section-wrap">
        \n
        \n            ${3:statement}
        \n
        \n        </div>
        \n    </section>
        \n</div>'
    'WK cols 2 Columnas':
        'prefix': 'wk cols'
        'body': '<div class="wk-cols">
        \n
        \n    <div class="wk-col">
        \n        ${1:contenido}
        \n    </div>
        \n
        \n    <div class="wk-col">
        \n
        \n    </div>
        \n
        \n</div>
        \n'
    'WK cols 2 Columnas declaradas':
        'prefix': 'wk cols 2 state'
        'body': '<div class="wk-cols">
        \n
        \n    <div class="wk-col-2">
        \n        ${1:contenido}
        \n    </div>
        \n
        \n    <div class="wk-col-2">
        \n
        \n    </div>
        \n
        \n</div>
        \n'
    'WK cols 3 Columnas':
        'prefix': 'wk cols 3'
        'body': '<div class="wk-cols">
        \n
        \n    <div class="wk-col">
        \n        ${1:contenido}
        \n    </div>
        \n
        \n    <div class="wk-col">
        \n
        \n    </div>
        \n
        \n    <div class="wk-col">
        \n
        \n    </div>
        \n
        \n</div>
        \n'
    'WK cols 3 Columnas declaradas':
        'prefix': 'wk cols 3 state'
        'body': '<div class="wk-cols">
        \n
        \n    <div class="wk-col-3">
        \n        ${1:contenido}
        \n    </div>
        \n
        \n    <div class="wk-col-3">
        \n
        \n    </div>
        \n
        \n    <div class="wk-col-3">
        \n
        \n    </div>
        \n
        \n</div>
        \n'
    'Slick slider':
        'prefix': 'slick slider'
        'body': '
        \n<div class="${1:slider}">
        \n    <div class="${2:slide}">
        \n
        \n        ${3:statement}
        \n
        \n    </div>
        \n</div>'