Created
August 23, 2017 17:32
-
-
Save mortendk/cdb337f6f92a6ba9132be2019476b770 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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' | |
| # | |
| # CSS | |
| '.css': | |
| #mediaquery | |
| 'mediauqery small': | |
| 'prefix': 'mediaquerysmall' | |
| 'body': '@media (max-width: 47.99em) {\n\n}\n@media (min-width: 48em) {\n\n}' | |
| 'mediaquery': | |
| 'prefix': 'mediaquery' | |
| 'body': '/* small */\n@media (max-width: 47.99em) {\n\n}/* small */\n/* Medium */\n@media (min-width: 48em) and (max-width: 61.99rem){\n\n}/* Medium */\n/* Large */\n@media (min-width: 62em) and (max-width: 79.99rem) {\n\n}/* Large */\n/* XL */\n@media (min-width: 82em) {\n\n}\n/* XL */' | |
| #var | |
| 'css var': | |
| 'prefix': 'var' | |
| 'body': 'var(--${1:varname});' | |
| 'css anim': | |
| 'prefix': 'anim' | |
| 'body': 'animation: ${1:keyframe} ${2:1}s infinite;' | |
| 'css transition': | |
| 'prefix': 'transition' | |
| 'body': 'transition: ${1:all} ${2:.5}s ${3:ease-in-out};' | |
| 'css background-position': | |
| 'prefix': 'background-position' | |
| 'body': 'background-position: ${1:top} ${2:left} ${3:ease-in-out};' | |
| # TWIG | |
| '.text.html.twig': | |
| # tags | |
| 'Tag twig function': | |
| 'prefix': '%%' | |
| 'body': '{% $1$2 %}\n $0\n{% end$1 %}' | |
| 'Tag twig Comment': | |
| 'prefix': '##' | |
| 'body': '{# $1 #}$0' | |
| # debug | |
| 'Dump twig': | |
| 'prefix': 'dump' | |
| 'body': '<pre>{{ dump( ${1:content} ) }}</pre>' | |
| 'vardumper': | |
| 'prefix': 'dump' | |
| 'body': '{{ vardumper( ${1:content} ) }}' | |
| 'kint': | |
| 'prefix': 'kint debug' | |
| 'body': '{{ kint(${1:_context}) }}$0' | |
| 'dump twig all': | |
| 'prefix': 'dumpit' | |
| 'body': '<ol>\n{% for key, value in _context %} \n<li>{{ key }} </li> \n {% if loop.index == 2 %}}\n <pre>{{ dump( value ) }}</pre>\n{% endif %}\n{% endfor %}\n</ol>' | |
| #add svg file | |
| 'svg': | |
| 'prefix': 'svg' | |
| 'body': '{% include active_theme_path() ~ \'/icons/${1:icon.svg}\' %}' | |
| #attach library | |
| 'library': | |
| 'prefix': 'lib attach' | |
| 'body': '{{ attach_library(active_theme()~\'/${1:libname}\') }}' | |
| #block & extend | |
| 'Block twig': | |
| 'prefix': 'block' | |
| 'body': '{% block ${1:name} %}\n $0\n{% endblock %}' | |
| 'Extends twig block': | |
| 'prefix': 'extends' | |
| 'body': '{% extends \'${1:template}\' %}$0' | |
| # set | |
| 'Set twig': | |
| 'prefix': 'set' | |
| 'body': '{% set ${1:var} %}\n $0\n{% endset %}' | |
| 'Set classes': | |
| 'prefix': 'setc' | |
| 'body': '{% set ${1:classes} = [\n \'field\',\n ]\n%}' | |
| # if / else | |
| 'If (inline)': | |
| 'prefix': 'if' | |
| 'body': '{% if ${1:condition} %}$0{% endif %}' | |
| 'If ': | |
| 'prefix': 'ifb' | |
| 'body': '{% if ${1:condition} %}\n $0\n{% endif %}' | |
| 'If Else': | |
| 'prefix': 'ife' | |
| 'body': '{% if ${1:condition} %}\n $2\n{% else %}\n $0\n{% endif %}' | |
| 'For Loop': | |
| 'prefix': 'forloop' | |
| 'body': '{# for loop #}\n{% for item in items %}\n {{ items|length }} items.\n {% if loop.first %}\n {# first loop #}\n {% elseif loop.last %}\n {# last loop #}\n {% elseif loop.index == "2" %}\n {# 2nd loop #}\n {% elseif loop.revindex == "2" %}\n {# 2nd last reverse counted #}\n {% else %}\n {# default #}\n {% endif %}\n{% endfor %}' | |
| 'For': | |
| 'prefix': 'for' | |
| 'body': '{% for ${1:item} in ${2:items} %}\n $0\n{% endfor %}' | |
| 'For Else': | |
| 'prefix': 'fore' | |
| 'body': '{% for ${1:item} in ${2:items} %}\n $3\n{% else %}\n $0\n{% endfor %}' | |
| 'Else': | |
| 'prefix': 'else' | |
| 'body': '{% else %}\n $0' | |
| # filter | |
| 'Filter': | |
| 'prefix': 'filter' | |
| 'body': '{% filter ${1:name} %}$0{% endfilter %}' | |
| 'Filter (Block)': | |
| 'prefix': 'filterb' | |
| 'body': '{% filter ${1:name} %}\n $0\n{% endfilter %}' | |
| #drupal specific | |
| 'Region (Drupal)': | |
| 'prefix': 'region' | |
| 'body': '{% if page.${1:region} %}\n <${2:aside} role="complementary">\n {{ page.${1:region} }}\n </${2:aside}>\n{% endif %}' | |
| 'include (Drupal theme )': | |
| 'prefix': 'include' | |
| 'body': '{% include active_theme_path() ~ \'/templates/component/${1:comp}/${1:comp}.html.twig\' %}\n' | |
| 'Field': | |
| 'prefix': 'field' | |
| 'body': '{{ content.field_${1:NAME}.0|render()|striptags }}' | |
| ## twig.html.twig ---------------------------------------------------------------- |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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' | |
| # | |
| # CSS | |
| '.css': | |
| #mediaquery | |
| 'mediauqery small': | |
| 'prefix': 'mediaquerysmall' | |
| 'body': '@media (max-width: 47.99em) {\n\n}\n@media (min-width: 48em) {\n\n}' | |
| 'mediaquery': | |
| 'prefix': 'mediaquery' | |
| 'body': '/* small */\n@media (max-width: 47.99em) {\n\n}/* small */\n/* Medium */\n@media (min-width: 48em) and (max-width: 61.99rem){\n\n}/* Medium */\n/* Large */\n@media (min-width: 62em) and (max-width: 79.99rem) {\n\n}/* Large */\n/* XL */\n@media (min-width: 82em) {\n\n}\n/* XL */' | |
| #var | |
| 'css var': | |
| 'prefix': 'var' | |
| 'body': 'var(--${1:varname});' | |
| 'css anim': | |
| 'prefix': 'anim' | |
| 'body': 'animation: ${1:keyframe} ${2:1}s infinite;' | |
| 'css transition': | |
| 'prefix': 'transition' | |
| 'body': 'transition: ${1:all} ${2:.5}s ${3:ease-in-out};' | |
| 'css background-position': | |
| 'prefix': 'background-position' | |
| 'body': 'background-position: ${1:top} ${2:left} ${3:ease-in-out};' | |
| # TWIG | |
| '.text.html.twig': | |
| # tags | |
| 'Tag twig function': | |
| 'prefix': '%%' | |
| 'body': '{% $1$2 %}\n $0\n{% end$1 %}' | |
| 'Tag twig Comment': | |
| 'prefix': '##' | |
| 'body': '{# $1 #}$0' | |
| # debug | |
| 'Dump twig': | |
| 'prefix': 'dump' | |
| 'body': '<pre>{{ dump( ${1:content} ) }}</pre>' | |
| 'vardumper': | |
| 'prefix': 'dump' | |
| 'body': '{{ vardumper( ${1:content} ) }}' | |
| 'kint': | |
| 'prefix': 'kint debug' | |
| 'body': '{{ kint(${1:_context}) }}$0' | |
| 'dump twig all': | |
| 'prefix': 'dumpit' | |
| 'body': '<ol>\n{% for key, value in _context %} \n<li>{{ key }} </li> \n {% if loop.index == 2 %}}\n <pre>{{ dump( value ) }}</pre>\n{% endif %}\n{% endfor %}\n</ol>' | |
| #add svg file | |
| 'svg': | |
| 'prefix': 'svg' | |
| 'body': '{% include active_theme_path() ~ \'/icons/${1:icon.svg}\' %}' | |
| #attach library | |
| 'library': | |
| 'prefix': 'lib attach' | |
| 'body': '{{ attach_library(active_theme()~\'/${1:libname}\') }}' | |
| #block & extend | |
| 'Block twig': | |
| 'prefix': 'block' | |
| 'body': '{% block ${1:name} %}\n $0\n{% endblock %}' | |
| 'Extends twig block': | |
| 'prefix': 'extends' | |
| 'body': '{% extends \'${1:template}\' %}$0' | |
| # set | |
| 'Set twig': | |
| 'prefix': 'set' | |
| 'body': '{% set ${1:var} %}\n $0\n{% endset %}' | |
| 'Set classes': | |
| 'prefix': 'setc' | |
| 'body': '{% set ${1:classes} = [\n \'field\',\n ]\n%}' | |
| # if / else | |
| 'If (inline)': | |
| 'prefix': 'if' | |
| 'body': '{% if ${1:condition} %}$0{% endif %}' | |
| 'If ': | |
| 'prefix': 'ifb' | |
| 'body': '{% if ${1:condition} %}\n $0\n{% endif %}' | |
| 'If Else': | |
| 'prefix': 'ife' | |
| 'body': '{% if ${1:condition} %}\n $2\n{% else %}\n $0\n{% endif %}' | |
| 'For Loop': | |
| 'prefix': 'forloop' | |
| 'body': '{# for loop #}\n{% for item in items %}\n {{ items|length }} items.\n {% if loop.first %}\n {# first loop #}\n {% elseif loop.last %}\n {# last loop #}\n {% elseif loop.index == "2" %}\n {# 2nd loop #}\n {% elseif loop.revindex == "2" %}\n {# 2nd last reverse counted #}\n {% else %}\n {# default #}\n {% endif %}\n{% endfor %}' | |
| 'For': | |
| 'prefix': 'for' | |
| 'body': '{% for ${1:item} in ${2:items} %}\n $0\n{% endfor %}' | |
| 'For Else': | |
| 'prefix': 'fore' | |
| 'body': '{% for ${1:item} in ${2:items} %}\n $3\n{% else %}\n $0\n{% endfor %}' | |
| 'Else': | |
| 'prefix': 'else' | |
| 'body': '{% else %}\n $0' | |
| # filter | |
| 'Filter': | |
| 'prefix': 'filter' | |
| 'body': '{% filter ${1:name} %}$0{% endfilter %}' | |
| 'Filter (Block)': | |
| 'prefix': 'filterb' | |
| 'body': '{% filter ${1:name} %}\n $0\n{% endfilter %}' | |
| #drupal specific | |
| 'Region (Drupal)': | |
| 'prefix': 'region' | |
| 'body': '{% if page.${1:region} %}\n <${2:aside} role="complementary">\n {{ page.${1:region} }}\n </${2:aside}>\n{% endif %}' | |
| 'include (Drupal theme )': | |
| 'prefix': 'include' | |
| 'body': '{% include active_theme_path() ~ \'/templates/component/${1:comp}/${1:comp}.html.twig\' %}\n' | |
| 'Field': | |
| 'prefix': 'field' | |
| 'body': '{{ content.field_${1:NAME}.0|render()|striptags }}' | |
| ## twig.html.twig ---------------------------------------------------------------- |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment