| var Note = function(options){ | |
| console.log(window); | |
| this.StaveNote = new Vex.Flow.StaveNote(options); | |
| this.removed = false; | |
| /** | |
| * moves the note right from its ORIGINAL position by x pixels | |
| * (sets the trasform: translate(x) value to x) | |
| */ | |
| this.setOffsetX = (x) => { | |
| if(this.removed){ |
| /** | |
| * gulp file that will restart keystonejs app and compile sass | |
| */ | |
| 'use strict'; | |
| var gulp = require('gulp'); | |
| var watch = require('gulp-watch'); | |
| var shell = require('gulp-shell') | |
| var sass = require('gulp-sass'); |
| /** | |
| * - num columns per card | |
| * - num possible column | |
| * - include @cards > * > * as a flex item | |
| */ | |
| @mixin cards($card-columns: 4, $possible-columns: 12, $flex: true){ | |
| width: 100%; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; |
| import React from 'react'; | |
| import services from '../services/index'; | |
| import BigCalendar from 'react-big-calendar'; | |
| import moment from 'moment'; | |
| import 'react-big-calendar/lib/css/react-big-calendar.css'; | |
| // setting to use Saturday as the first day of the week | |
| moment.updateLocale('en-gb', { | |
| week : { |
| 'use strict'; | |
| const gulp = require('gulp'); | |
| const shell = require('gulp-shell') | |
| const spawn = require('child_process').spawn; | |
| const fs = require('fs'); | |
| const mkdirp = require('mkdirp'); | |
| const pug = require('pug'); | |
| const marked = require('marked'); | |
| const path = require('path'); |
| <!--[if (gte mso 9)|(IE)]> | |
| <table width="600" align="center" style="border-spacing: 0; font-family: sans-serif; color: #333333;"><tr> | |
| <td style="padding: 0;"> | |
| <![endif]--> | |
| <table align="center" style="border-spacing: 0; font-family: sans-serif; color: #333333; margin: 0 auto; width: 100%; max-width: 600px;"> | |
| <tr> | |
| <td style="padding: 0; text-align: center; font-size: 0;"> | |
| <!--[if (gte mso 9)|(IE)]> | |
| <table width="100%" style="border-spacing: 0; font-family: sans-serif; color: #333333;"><tr> | |
| <td width="33%" valign="top" style="padding: 0;"> |
| /** | |
| * This has a specific use case for writing to the contentDocument allowing for a separated scope | |
| * | |
| * There are probably other ways to do this with ShadowDom but this works well for my purposes | |
| * | |
| * USAGE: | |
| * | |
| * <CustomIframe html={<head><title>Doc Title</title></head><body>Hello React User</body>} /> | |
| * | |
| */ |
| Verifying that "stevenkaspar.id" is my Blockstack ID. https://onename.com/stevenkaspar |
You can use the above 2 files to create dynamically generated atomic CSS files
I only added pug and React support but it would be very easy to add more
Say you have this file structure. You can use the above config to get all CSS classes defined in your app.jsx file and views files that match a key in the config.yaml file and build a CSS file that has only the used classes
.
├── gulpfile.js
├── config.yaml
| import React from 'react'; | |
| import { withApollo } from 'react-apollo' | |
| // will add a logout function to this.props when used around a component | |
| // i.e. | |
| // export default logout(LogoutButton) | |
| const logout = function(WrappedComponent) { | |
| class Logout extends React.Component { | |
| constructor(props) { |