Skip to content

Instantly share code, notes, and snippets.

@RickCogley

RickCogley/bundle.css

Last active January 16, 2016 21:11
Show Gist options
  • Save RickCogley/b53ec3d723cbbb10814d to your computer and use it in GitHub Desktop.
Save RickCogley/b53ec3d723cbbb10814d to your computer and use it in GitHub Desktop.
Download ZIP
cssrecipes question
Raw
bundle.css
.inline-code{display:inline-block;vertical-align:text-bottom;margin:0 .15em;border-radius:.2em;padding:.17em .4em .25em;font-size:85%;line-height:1;color:#fff;color:hsla(0,0%,100%,.9);background-color:#000;background-color:rgba(0,0,0,.65)}.inline-code svg{position:relative;bottom:.02em;display:inline-block;vertical-align:middle;width:.85em;height:.85em;fill:currentColor}@media (min-width:500px){.intro{padding:2.5em}}@media (min-width:800px){.intro{padding:4em}}.intro{padding:1.5em;text-align:center;font-size:18px;line-height:1.5;color:#404040;background-color:#fff}@media(min-width:500px){.intro{padding:2.5em}}@media(min-width:800px){.intro{padding:4em}}.intro .logo{display:inline-block;max-width:75%}.intro img{display:block;max-width:100%}.intro .details{max-width:52em;margin:auto;text-align:left}.intro .details ol{margin-top:1.8em;margin-bottom:2.2em}.intro .details li{margin-top:.8em}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body{margin:1em;line-height:1;font-family:sans-serif;background-color:#2e2e2e}::-moz-selection{background-color:#0ef;background-color:rgba(0,238,255,.2);opacity:0}::selection{background-color:#0ef;background-color:rgba(0,238,255,.2);opacity:0}.r-Tooltip{position:relative;display:inline-block;-webkit-transform:translateZ(0);transform:translateZ(0)}.r-Tooltip:after,.r-Tooltip:before{z-index:1;pointer-events:none;visibility:hidden;position:absolute;opacity:0;-webkit-transition:.3s ease;transition:.3s ease}.r-Tooltip--visible:after,.r-Tooltip--visible:before,.r-Tooltip:focus:after,.r-Tooltip:focus:before,.r-Tooltip:hover:after,.r-Tooltip:hover:before{visibility:visible;opacity:1}.r-Tooltip:before{content:attr(data-r-tooltip);font-size:13.333px;font-size:.83333rem;line-height:25px;line-height:1.5625rem;margin:0;padding:0 8px;padding:0 .5rem;color:#fff;background:#383838;text-shadow:0 -1px 0 #000;box-shadow:4px 4px 8px rgba(0,0,0,.3);border-radius:2px}.r-Tooltip--nowrap:before{white-space:nowrap}.r-Tooltip--centerText:before{text-align:center}.r-Tooltip:after{content:"";z-index:2;position:absolute;border:6px solid transparent;border:.375rem solid transparent;background:transparent}.r-Tooltip--top:after,.r-Tooltip--top:before{bottom:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.r-Tooltip--top:focus:before,.r-Tooltip--top:hover:before,.r-Tooltip--visible.r-Tooltip--top:before{margin-bottom:14px;margin-bottom:.875rem}.r-Tooltip--top:after{margin-bottom:-12px;margin-bottom:-.75rem;border-top-color:#383838}.r-Tooltip--top:focus:after,.r-Tooltip--top:hover:after,.r-Tooltip--visible.r-Tooltip--top:after{margin-bottom:2px;margin-bottom:.125rem}.r-Tooltip--bottom:after,.r-Tooltip--bottom:before{top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.r-Tooltip--bottom:focus:before,.r-Tooltip--bottom:hover:before,.r-Tooltip--visible.r-Tooltip--bottom:before{margin-top:14px;margin-top:.875rem}.r-Tooltip--bottom:after{margin-top:-12px;margin-top:-.75rem;border-bottom-color:#383838}.r-Tooltip--bottom:focus:after,.r-Tooltip--bottom:hover:after,.r-Tooltip--visible.r-Tooltip--bottom:after{margin-top:2px;margin-top:.125rem}.r-Tooltip--left:after,.r-Tooltip--left:before{right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.r-Tooltip--left:focus:before,.r-Tooltip--left:hover:before,.r-Tooltip--visible.r-Tooltip--left:before{margin-right:14px;margin-right:.875rem}.r-Tooltip--left:after{margin-right:-12px;margin-right:-.75rem;border-left-color:#383838}.r-Tooltip--left:focus:after,.r-Tooltip--left:hover:after,.r-Tooltip--visible.r-Tooltip--left:after{margin-right:2px;margin-right:.125rem}.r-Tooltip--right:after,.r-Tooltip--right:before{left:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.r-Tooltip--right:focus:before,.r-Tooltip--right:hover:before,.r-Tooltip--visible.r-Tooltip--right:before{margin-left:14px;margin-left:.875rem}.r-Tooltip--right:after{margin-left:-12px;margin-left:-.75rem;border-right-color:#383838}.r-Tooltip--right:focus:after,.r-Tooltip--right:hover:after,.r-Tooltip--visible.r-Tooltip--right:after{margin-left:2px;margin-left:.125rem}
/*# sourceMappingURL=bundle.css.map */
Raw
gulpfile.js
/* eslint-env node */
var concat = require('gulp-concat'),
cssnano = require('cssnano'),
cssnext = require('postcss-cssnext'),
gulp = require('gulp'),
postcss = require('gulp-postcss'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify');
var globs = {
js: [
'polyfills/**/*.js',
'library/**/*.js',
'components/**/*.js',
'app/**/*.js'
],
css: [
'polyfills/**/*.css',
'library/**/*.css',
'components/**/*.css',
'node_modules/cssrecipes-tooltip/index.css'
]
};
gulp.task('js', function () {
return gulp
.src(globs.js)
.pipe(sourcemaps.init())
.pipe(concat('bundle.js'))
.pipe(uglify({ mangle: false }))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('bundle'));
});
gulp.task('css', function () {
return gulp
.src(globs.css)
.pipe(sourcemaps.init())
.pipe(concat('bundle.css'))
.pipe(postcss([
cssnext({
autoprefixer: {
browsers: ['IE >= 9']
}
}),
cssnano()
]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('bundle'));
});
gulp.task('build', gulp.parallel('js', 'css'));
gulp.task('watch', function () {
gulp.watch(globs.js, gulp.series('js'));
gulp.watch(globs.css, gulp.series('css'));
});
gulp.task('default', gulp.series('build', 'watch'));
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Barebones</title>
<meta name="description" content="A barebones project." />
<meta property="og:image" content="" />
<link rel="apple-touch-icon" href="/app/apple-touch-icon.png" />
<link rel="icon" href="/app/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/bundle/bundle.css" />
<script defer src="/bundle/bundle.js"></script>
</head>
<body>
<section class="intro">
<a class="logo" href="https://github.com/jaydenseric/Barebones"><img src="/components/intro/barebones-logo.svg" alt="Barebones logo" /></a>
<div class="details">
<p>Follow the <a href="https://github.com/jaydenseric/Barebones#setup" target="_blank">setup instructions</a>. Once you have studied how this intro component with sub-components works:</p>
<ol>
<li>Edit <span class="inline-code"><svg><use xlink:href="/components/inline-code/graphics.svg#file" /></svg> <code>/package.json</code></span> and <span class="inline-code"><svg><use xlink:href="/components/inline-code/graphics.svg#file" /></svg> <code>/readme.md</code></span> to be about your project and not Barebones.</li>
<li>Customize the metadata in the <span class="inline-code"><code>&lt;head&gt;</code></span> of <span class="inline-code"><svg><use xlink:href="/components/inline-code/graphics.svg#file" /></svg> <code>/index.html</code></span>.</li>
<li>Customize the <span class="inline-code"><svg><use xlink:href="/components/inline-code/graphics.svg#folder" /></svg> <code>/app</code></span> global assets.</li>
<li>Customize <span class="inline-code"><svg><use xlink:href="/components/inline-code/graphics.svg#file" /></svg> <code>/components/page/page.css</code></span>.</li>
<li>Remove this intro component by deleting <span class="inline-code"><svg><use xlink:href="/components/inline-code/graphics.svg#folder" /></svg> <code>/components/intro</code></span> and the <span class="inline-code"><code>.demo-component</code></span> HTML from <span class="inline-code"><svg><use xlink:href="/components/inline-code/graphics.svg#file" /></svg> <code>/index.html</code></span>. Also delete <span class="inline-code"><svg><use xlink:href="/components/inline-code/graphics.svg#folder" /></svg> <code>/components/inline-code</code></span>.</li>
</ol>
<span class="r-Tooltip r-Tooltip--bottom" data-r-tooltip="I'm the tooltip body">Hover me to see the tooltip !</span>
</div>
</section>
</body>
</html>
Raw
package.json
{
"name": "barebones",
"version": "3.0.0",
"description": "A barebones framework for getting started on a modern front end.",
"author": "Jayden Seric <[email protected]>",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/jaydenseric/Barebones"
},
"bugs": {
"url": "https://github.com/jaydenseric/Barebones/issues"
},
"devDependencies": {
"cssnano": "^3.4.0",
"cssrecipes-tooltip": "^0.5.0",
"gulp": "github:gulpjs/gulp#4.0",
"gulp-concat": "^2.6.0",
"gulp-postcss": "^6.0.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.1",
"http-server": "^0.8.5",
"postcss-cssnext": "^2.3.0"
},
"scripts": {
"task": "gulp",
"start": "http-server -o"
},
"eslintConfig": {
"extends": "eslint:recommended",
"rules": {
"no-trailing-spaces": 1,
"indent": [
1,
2,
{
"VariableDeclarator": {
"var": 2
}
}
],
"no-multiple-empty-lines": [
1,
{
"max": 1
}
],
"quotes": [
1,
"single",
"avoid-escape"
],
"spaced-comment": 1,
"key-spacing": 1,
"semi-spacing": 1,
"space-in-parens": 1,
"space-before-keywords": 1,
"space-after-keywords": 1,
"space-before-blocks": 1,
"space-before-function-paren": [
1,
{
"named": "never"
}
],
"no-lonely-if": 1,
"require-jsdoc": [
1,
{
"require": {
"MethodDefinition": true,
"ClassDeclaration": true
}
}
],
"valid-jsdoc": [
1,
{
"requireReturn": false,
"prefer": {
"return": "return"
}
}
]
}
}
}
Raw
working-gulpfile.js
/* eslint-env node */
var concat = require('gulp-concat'),
atImport = require('postcss-import'),
/* mqpacker = require('css-mqpacker'), */
cssnano = require('cssnano'),
cssnext = require('postcss-cssnext'),
gulp = require('gulp'),
postcss = require('gulp-postcss'),
sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify');
var globs = {
js: [
'polyfills/**/*.js',
'library/**/*.js',
'components/**/*.js',
'app/**/*.js'
],
css: [
'polyfills/**/*.css',
'library/**/*.css',
'components/**/*.css'
]
};
gulp.task('js', function () {
return gulp
.src(globs.js)
.pipe(sourcemaps.init())
.pipe(concat('bundle.js'))
.pipe(uglify({ mangle: false }))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('bundle'));
});
gulp.task('css', function () {
return gulp
.src(globs.css)
.pipe(sourcemaps.init())
.pipe(concat('bundle.css'))
.pipe(postcss([
atImport(),
cssnext({
autoprefixer: {
browsers: ['IE >= 9']
}
}),
cssnano()
]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('bundle'));
});
gulp.task('build', gulp.parallel('js', 'css'));
gulp.task('watch', function () {
gulp.watch(globs.js, gulp.series('js'));
gulp.watch(globs.css, gulp.series('css'));
});
gulp.task('default', gulp.series('build', 'watch'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment