TheWebTech

/* CSS styles that highlight the hubspot grid components so you can better visualize what is happening in a page. 
  1. You could use this a few different ways, you could add this to your inspector-stylesheet.css when inspecting a page.
  2. You could integrate this into a browser extension ;)
  3. You could literally upload the stylesheet to HubSpot, and use {% if request.query_dict.hsDebug == "true" %}{{ require_css(PATH TO YOUR CSS FILE) }}{% endif %}
  
  Additionally in-case it's useful as a prototyping/layout planning tool: https://codepen.io/thewebtech/pen/bGdrQyN??editors=1100
*/

.dnd-module {background: #eaf0f6;min-height: 50px!important; }
.dnd-module::before {content:"{% dnd_module %}";}

tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

JacobLett

.active
.affix
.alert
.alert-danger
.alert-dismissable
.alert-dismissible
.alert-info
.alert-link
.alert-success
.alert-warning

Langmans

/**
 * To install:
 * install npm
 * cd public_html/files/stylesheets
 * npm update
 *
 * to watch:
 * gulp
 * or to run sass once:
 * gulp sass

mgd020

/*
cookies.get() gets all cookies by name
cookies.get('name') gets single cookie
cookies.set('name', 'value', {max_age, expires, path, domain})
cookies.del('name', {path, domain})

https://javascript-minifier.com/ = 731 bytes

window.cookies=function(){function e(e){return e.replace(/[;,\s]+/g,e=>escape(e))}var n=unescape,c=document,i="; ",o="",u="path",s="domain",p="max",t="age",r="expires",a="secure",h="samesite",f="=",g=p+"_"+t;function m(n,m,d){if(n){var l=[e(n),f,e(m||o)];(d=d||{})[u]&&l.push(i,u,f,d[u]),d[s]&&l.push(i,s,f,d[s]),d[g]?l.push(i,p,"-",t,f,d[g]):d[r]&&l.push(i,r,f,d[r].toUTCString()),d[a]&&l.push(i,a),d[h]&&l.push(i,h,f,d[h]),c.cookie=l.join(o)}}return{get:function(i){return i?new RegExp("\\b"+e(i).replace(/\W/g,"\\$&")+"=([^;]*)").exec(c.cookie)[1]:c.cookie.split("; ").map(e=>/([^=]+)=?(.*)/.exec(e).slice(1,3)).map(e=>[n(e[0]),n(e[1])]).reduce((e,n)=>(e[n[0]]=n[1],e),{})},set:m,del:function(e,n){(n=n||{})[g]=-1,m(e,o,n)}}}();
*/

elijahmanor

Comparison of npm scripts vs Gulp

npm scripts

Pros

• npm scripts are low-level and leverage the actual library you want to use (example: "lint": "eslint ./")
• package.json is a central place to see what scripts are available (also npm run will list all scripts)
• When things get too complicated you can always defer to another file (example: "complex-script": "babel-node tools/complex-script.js")
• npm scripts are more powerful than one might first think (pre/post hooks, passing arguments, config variables, chaining, piping, etc...)

sheck

<!-- Navbar
================================================== -->
<div class="bs-docs-section clearfix">
  <div class="row">
    <div class="col-lg-12">
      <div class="page-header">
        <h1 id="navbar">Navbar</h1>
      </div>
      <div class="bs-component">

praveenvijayan

/*****************************************************************
 *
 * Copy Layer text 1.0 - by Praveen Vijayan! - http://www.decodize.com/
 *
 * Compatibility above Photoshop CS6
 *
 * Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
 * 
 *****************************************************************/
 

cosmicscr

Here are all the classes from Bootstrap 3 (version 3.1.1).

Method of extraction:

1.  Download Bootstrap 3 and rename bootstrap.css as "bootstrap.html"
2.  Add the following 24 lines of code to the very bottom of the bootstrap.html file:

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script>

ricardozea

IE6 Only
==================
_selector {...}

IE6 & IE7
==================
*html or { _property: }

IE7 Only
==================