Atom Snippets - These are just my personal Atom snippets (Fast Sass prefixes, bootstrap templates, and much more)

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:
# https://atom.io/docs/latest/using-atom-basic-customization#cson


#-----------------------------------------------------------------------------------------
# Bootstrap 3 CDN
#-----------------------------------------------------------------------------------------

'.text.html.basic':
  'Bootstrap 3 CSS CDN':
    'prefix': 'bs3css'
    'body': '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />'

  'Bootstrap 3 JS CDN':
    'prefix': 'bs3js'
    'body': '<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>'

#-----------------------------------------------------------------------------------------
# Bootstrap 4 CDN
#-----------------------------------------------------------------------------------------

  'Bootstrap 4 CSS CDN':
    'prefix': 'bs4css'
    'body': '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />'

  'Bootstrap 4 JS CDN':
    'prefix': 'bs4js'
    'body': '<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>'

#-----------------------------------------------------------------------------------------
# jQuery 1.12.4 CDN
#-----------------------------------------------------------------------------------------

  'jQuery 1.12.4 CDN':
    'prefix': 'jquery1cdn'
    'body': '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>'

#-----------------------------------------------------------------------------------------
# jQuery 2.2.4 CDN
#-----------------------------------------------------------------------------------------

  'jQuery 2.2.4 CDN':
    'prefix': 'jquery2cdn'
    'body': '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>'

#-----------------------------------------------------------------------------------------
# jQuery 3.2.1 CDN
#-----------------------------------------------------------------------------------------

  'jQuery 3.2.1 CDN':
    'prefix': 'jquery3cdn'
    'body': '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>'

#-----------------------------------------------------------------------------------------
# Animate.css CDN
#-----------------------------------------------------------------------------------------

  'Animate.css CDN':
    'prefix': 'animatecdn'
    'body': '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />'

#-----------------------------------------------------------------------------------------
# Modernizr CDN
#-----------------------------------------------------------------------------------------

  'Modernizr CDN':
    'prefix': 'modernizrcdn'
    'body': '<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>'

#-----------------------------------------------------------------------------------------
# Normalize CDN
#-----------------------------------------------------------------------------------------

  'Normalize CDN':
    'prefix': 'normalizecdn'
    'body': '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css" />'

#-----------------------------------------------------------------------------------------
# Animate On Scroll CDN
#-----------------------------------------------------------------------------------------

  'AOS CDN':
    'prefix': 'aoscdn'
    'body': '<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>'

#-----------------------------------------------------------------------------------------
# HTML5Shiv CDN
#-----------------------------------------------------------------------------------------

  'html5shiv CDN':
    'prefix': 'html5shiv'
    'body': '<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>'

#-----------------------------------------------------------------------------------------
# Respond.js CDN
#-----------------------------------------------------------------------------------------

  'Respond.js CDN':
    'prefix': 'respondcdn'
    'body': '<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>'

#-----------------------------------------------------------------------------------------
# Bootstrap 3 Starter Template
#-----------------------------------------------------------------------------------------

  'Bootstrap 3 Starter Template':
    'prefix': 'bs3-starter'
    'body': """
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./favicon.ico">
    <title>Title</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <style>
    body {
      padding-top: 50px;
    }
    .starter-template {
      padding: 40px 15px;
      text-align: center;
    }
    </style>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="./assets/js/jquery.min.js"><\/script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
    """

#-----------------------------------------------------------------------------------------
# Bootstrap 4 Starter Template
#-----------------------------------------------------------------------------------------

  'Bootstrap 4 Starter Template':
    'prefix': 'bs4-starter'
    'body': """
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./favicon.ico">
    <title>Title</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="./assets/css/main.css" rel="stylesheet">
    <style>
    body {
      padding-top: 5rem;
    }
    .main {
      padding: 3rem 1.5rem;
      text-align: center;
    }
    </style>
  </head>
  <body>

    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
      <div class="container-fluid">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="">Navbar</a>
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="">Disabled</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu" aria-labelledby="dropdown01">
                <a class="dropdown-item" href="">Action</a>
                <a class="dropdown-item" href="">Another action</a>
                <a class="dropdown-item" href="">Something else here</a>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="main">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>
    </div><!-- /.container -->

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script>window.jQuery || document.write('<script src="./assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script>
    (function () {
      'use strict'
      if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
        var msViewportStyle = document.createElement('style')
        msViewportStyle.appendChild(
          document.createTextNode(
            '@-ms-viewport{width:auto!important}'
          )
        )
        document.head.appendChild(msViewportStyle)
      }
    }())
    </script>
  </body>
</html>
    """

#-----------------------------------------------------------------------------------------
# :hover:focus:active (SASS)
#-----------------------------------------------------------------------------------------

'.source.sass':
  'Hover:Focus:Active Snippet (SASS)':
    'prefix': 'hoverfocus'
    'body': """
.CLASSNAME.active.focus,
.CLASSNAME.active:focus,
.CLASSNAME.active:hover,
.CLASSNAME:active.focus,
.CLASSNAME:active:focus,
.CLASSNAME:active:hover,
.open>.dropdown-toggle.CLASSNAME.focus,
.open>.dropdown-toggle.CLASSNAME:focus,
.open>.dropdown-toggle.CLASSNAME:hover
  
    """

#-----------------------------------------------------------------------------------------
# :hover:focus:active (SCSS)
#-----------------------------------------------------------------------------------------

  'Hover:Focus:Active Snippet (SCSS)':
    'prefix': 'hoverfocus'
    'body': """
.CLASSNAME.active.focus,
.CLASSNAME.active:focus,
.CLASSNAME.active:hover,
.CLASSNAME:active.focus,
.CLASSNAME:active:focus,
.CLASSNAME:active:hover,
.open>.dropdown-toggle.CLASSNAME.focus,
.open>.dropdown-toggle.CLASSNAME:focus,
.open>.dropdown-toggle.CLASSNAME:hover {
  
}
    """

#-----------------------------------------------------------------------------------------
# Background (SASS/SCSS)
#-----------------------------------------------------------------------------------------

  'Background Snippet':
    'prefix': 'bg':
      'body': 'background: '

#-----------------------------------------------------------------------------------------
# Background Color (SASS/SCSS)
#-----------------------------------------------------------------------------------------

  'Background Color Snippet':
    'prefix': 'bgc':
      'body': 'background-color: '

#-----------------------------------------------------------------------------------------
# Background Image (SASS/SCSS)
#-----------------------------------------------------------------------------------------

  'Background Image Snippet':
    'prefix': 'bgi':
      'body': 'background-image: url("") no-repeat'

#-----------------------------------------------------------------------------------------
# :hover:focus:active (CSS)
#-----------------------------------------------------------------------------------------

'.source.css':
  'Hover:Focus:Active Snippet':
    'prefix': 'hoverfocus'
    'body': """
.CLASSNAME.active.focus,
.CLASSNAME.active:focus,
.CLASSNAME.active:hover,
.CLASSNAME:active.focus,
.CLASSNAME:active:focus,
.CLASSNAME:active:hover,
.open>.dropdown-toggle.CLASSNAME.focus,
.open>.dropdown-toggle.CLASSNAME:focus,
.open>.dropdown-toggle.CLASSNAME:hover {

}
    """

#-----------------------------------------------------------------------------------------
# Background (CSS)
#-----------------------------------------------------------------------------------------

  'Background Snippet':
    'prefix': 'bg':
      'body': 'background: '

#-----------------------------------------------------------------------------------------
# Background Color (CSS)
#-----------------------------------------------------------------------------------------

  'Background Color Snippet':
    'prefix': 'bgc':
      'body': 'background-color: '

#-----------------------------------------------------------------------------------------
# Background Image (CSS)
#-----------------------------------------------------------------------------------------

  'Background Image Snippet':
    'prefix': 'bgi':
      'body': 'background-image: url("") no-repeat;'