From d904f8ee226c958e4c314fd5c3568e1ceeb3a277 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Fri, 8 Jan 2016 01:44:44 +0000 Subject: [PATCH] Fixes #15: Use Bower, update CSS --- .bowerrc | 3 + .gitignore | 2 +- bower.json | 20 +++ composer.json | 3 - composer.lock | 277 +----------------------------- gulpfile.js | 50 ++++-- package.json | 7 +- sass/oliverdavies.scss | 6 - sass/partials/_meetups.scss | 4 +- sass/styles.scss | 14 ++ source/_layouts/default.html.twig | 3 +- 11 files changed, 87 insertions(+), 302 deletions(-) create mode 100644 .bowerrc create mode 100644 bower.json delete mode 100644 sass/oliverdavies.scss create mode 100644 sass/styles.scss diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 00000000..ffe83728 --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "vendor/bower_components" +} diff --git a/.gitignore b/.gitignore index e0667823..8adf4b01 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ /node_modules/ /output_*/ /source/assets/css/ -/source/components/ +/source/assets/fonts/ /.sculpin/ /vendor/ .sass-cache/ diff --git a/bower.json b/bower.json new file mode 100644 index 00000000..22c15d07 --- /dev/null +++ b/bower.json @@ -0,0 +1,20 @@ +{ + "name": "oliverdavies.uk", + "description": "", + "main": "", + "license": "MIT", + "moduleType": [], + "homepage": "https://www.oliverdavies.uk", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "bootstrap-sass": "~3.3.6", + "font-awesome": "fontawesome#~4.5.0", + "compass-breakpoint": "breakpoint-sass#~2.6.1" + } +} diff --git a/composer.json b/composer.json index 0d9d95f4..2aefe190 100644 --- a/composer.json +++ b/composer.json @@ -14,9 +14,6 @@ "require": { "sculpin/sculpin": "dev-master#c4f0814", "tsphethean/sculpin-related-posts-bundle": "~0.1.0", - "components/bootstrap": "3.3.5", - "components/jquery": "~1.9.1", - "components/font-awesome": "@stable", "behat/behat": "2.5.*@stable", "behat/mink": "1.5.*@stable", "behat/mink-extension": "*", diff --git a/composer.lock b/composer.lock index f8be4757..05d17a43 100644 --- a/composer.lock +++ b/composer.lock @@ -4,8 +4,8 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", "This file is @generated automatically" ], - "hash": "a3815d272a20196506517f3333add096", - "content-hash": "d23473718354d281f1fa09937f5421ab", + "hash": "bedf8d0bc4bf4e29597de173643dc69e", + "content-hash": "59ee051250022e2d138a6fbe9c96d068", "packages": [ { "name": "behat/behat", @@ -342,153 +342,6 @@ ], "time": "2013-07-03 18:43:54" }, - { - "name": "components/bootstrap", - "version": "3.3.5", - "source": { - "type": "git", - "url": "https://github.com/components/bootstrap.git", - "reference": "d71c2a234c61f53f1109a26ba8155902a51f8ca5" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/components/bootstrap/zipball/d71c2a234c61f53f1109a26ba8155902a51f8ca5", - "reference": "d71c2a234c61f53f1109a26ba8155902a51f8ca5", - "shasum": "" - }, - "require": { - "components/jquery": ">=1.9.1 <3.0" - }, - "suggest": { - "components/bootstrap-default": "Provide a theme for Bootstrap as components/bootstrap only provides the CSS as file assets" - }, - "type": "component", - "extra": { - "component": { - "scripts": [ - "js/bootstrap.js" - ], - "files": [ - "js/*.js", - "css/*.css", - "css/*.map", - "fonts/*", - "less/mixins/*.less", - "less/*.less" - ], - "shim": { - "deps": [ - "jquery" - ] - } - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Jacob Thornton", - "email": "jacobthornton@gmail.com" - }, - { - "name": "Mark Otto", - "email": "markdotto@gmail.com" - } - ], - "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.", - "homepage": "http://getbootstrap.com", - "keywords": [ - "css", - "framework", - "front-end", - "less", - "mobile-first", - "responsive", - "web" - ], - "time": "2015-06-17 06:08:09" - }, - { - "name": "components/font-awesome", - "version": "4.5.0", - "source": { - "type": "git", - "url": "https://github.com/components/font-awesome.git", - "reference": "069663a8419f9db90f9bec71e71ed4bb9d28d6ee" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/components/font-awesome/zipball/069663a8419f9db90f9bec71e71ed4bb9d28d6ee", - "reference": "069663a8419f9db90f9bec71e71ed4bb9d28d6ee", - "shasum": "" - }, - "type": "component", - "extra": { - "component": { - "styles": [ - "css/font-awesome.css" - ], - "files": [ - "css/font-awesome.min.css", - "fonts/*" - ] - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT", - "OFL-1.1" - ], - "description": "The iconic font designed for use with Twitter Bootstrap.", - "time": "2015-11-24 10:33:56" - }, - { - "name": "components/jquery", - "version": "1.9.1", - "source": { - "type": "git", - "url": "https://github.com/components/jquery.git", - "reference": "ae5c0c13cf163b3751ce55f9d9e97c1ba7ff796d" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/components/jquery/zipball/ae5c0c13cf163b3751ce55f9d9e97c1ba7ff796d", - "reference": "ae5c0c13cf163b3751ce55f9d9e97c1ba7ff796d", - "shasum": "" - }, - "require": { - "robloach/component-installer": "*" - }, - "type": "component", - "extra": { - "component": { - "scripts": [ - "jquery.js" - ], - "files": [ - "jquery.min.js", - "jquery-migrate.js", - "jquery-migrate.min.js", - "jquery.min.map" - ] - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "John Resig", - "email": "jeresig@gmail.com" - } - ], - "description": "jQuery JavaScript Library", - "homepage": "http://jquery.com", - "time": "2014-10-11 11:52:45" - }, { "name": "composer/composer", "version": "1.0.0-alpha11", @@ -1498,83 +1351,6 @@ ], "time": "2016-01-06 14:37:04" }, - { - "name": "kriswallsmith/assetic", - "version": "v1.3.2", - "source": { - "type": "git", - "url": "https://github.com/kriswallsmith/assetic.git", - "reference": "9928f7c4ad98b234e3559d1049abd13387f86db5" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/kriswallsmith/assetic/zipball/9928f7c4ad98b234e3559d1049abd13387f86db5", - "reference": "9928f7c4ad98b234e3559d1049abd13387f86db5", - "shasum": "" - }, - "require": { - "php": ">=5.3.1", - "symfony/process": "~2.1|~3.0" - }, - "conflict": { - "twig/twig": "<1.23" - }, - "require-dev": { - "cssmin/cssmin": "3.0.1", - "joliclic/javascript-packer": "1.1", - "kamicane/packager": "1.0", - "leafo/lessphp": "^0.3.7", - "leafo/scssphp": "~0.1", - "mrclay/minify": "~2.2", - "patchwork/jsqueeze": "~1.0|~2.0", - "phpunit/phpunit": "~4.8", - "psr/log": "~1.0", - "ptachoire/cssembed": "~1.0", - "symfony/phpunit-bridge": "~2.7|~3.0", - "twig/twig": "~1.8|~2.0" - }, - "suggest": { - "leafo/lessphp": "Assetic provides the integration with the lessphp LESS compiler", - "leafo/scssphp": "Assetic provides the integration with the scssphp SCSS compiler", - "leafo/scssphp-compass": "Assetic provides the integration with the SCSS compass plugin", - "patchwork/jsqueeze": "Assetic provides the integration with the JSqueeze JavaScript compressor", - "ptachoire/cssembed": "Assetic provides the integration with phpcssembed to embed data uris", - "twig/twig": "Assetic provides the integration with the Twig templating engine" - }, - "type": "library", - "extra": { - "branch-alias": { - "dev-master": "1.4-dev" - } - }, - "autoload": { - "psr-0": { - "Assetic": "src/" - }, - "files": [ - "src/functions.php" - ] - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Kris Wallsmith", - "email": "kris.wallsmith@gmail.com", - "homepage": "http://kriswallsmith.net/" - } - ], - "description": "Asset Management for PHP", - "homepage": "https://github.com/kriswallsmith/assetic", - "keywords": [ - "assets", - "compression", - "minification" - ], - "time": "2015-11-12 13:51:40" - }, { "name": "michelf/php-markdown", "version": "1.5.1", @@ -1889,54 +1665,6 @@ ], "time": "2012-12-14 00:58:14" }, - { - "name": "robloach/component-installer", - "version": "0.2.3", - "source": { - "type": "git", - "url": "https://github.com/RobLoach/component-installer.git", - "reference": "908a859aa7c4949ba9ad67091e67bac10b66d3d7" - }, - "dist": { - "type": "zip", - "url": "https://api.github.com/repos/RobLoach/component-installer/zipball/908a859aa7c4949ba9ad67091e67bac10b66d3d7", - "reference": "908a859aa7c4949ba9ad67091e67bac10b66d3d7", - "shasum": "" - }, - "require": { - "composer-plugin-api": "^1.0", - "kriswallsmith/assetic": "1.*", - "php": ">=5.3.2" - }, - "require-dev": { - "composer/composer": "1.*@alpha", - "phpunit/phpunit": "4.*" - }, - "type": "composer-plugin", - "extra": { - "branch-alias": { - "dev-master": "1.0.x-dev" - }, - "class": "ComponentInstaller\\ComponentInstallerPlugin" - }, - "autoload": { - "psr-0": { - "ComponentInstaller": "src/" - } - }, - "notification-url": "https://packagist.org/downloads/", - "license": [ - "MIT" - ], - "authors": [ - { - "name": "Rob Loach", - "homepage": "http://robloach.net" - } - ], - "description": "Allows installation of Components via Composer.", - "time": "2015-08-10 12:35:38" - }, { "name": "sculpin/sculpin", "version": "dev-master", @@ -3463,7 +3191,6 @@ "minimum-stability": "dev", "stability-flags": { "sculpin/sculpin": 20, - "components/font-awesome": 0, "behat/behat": 0, "behat/mink": 0 }, diff --git a/gulpfile.js b/gulpfile.js index 3859e0eb..8cbea855 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -5,22 +5,43 @@ var gulp = require('gulp'), del = require('del'); var config = { - cssDir: './source/assets/css', - imagesDir: './source/assets/images', + bowerDir: 'vendor/bower_components', + assetsDir: './source/assets', sassPattern: './sass/**/*.scss', production: !!plugins.util.env.production, - sourceMaps: !plugins.util.env.production + sourceMaps: !plugins.util.env.production, + liveReload: !plugins.util.env.production, }; +var app = {}; + +app.addStyle = function(paths, filename) { + gulp.src(paths) + .pipe(plugins.plumber()) + .pipe(plugins.if(config.sourceMaps, plugins.sourcemaps.init())) + .pipe(plugins.sass()) + .pipe(plugins.concat(filename)) + .pipe(config.production ? plugins.minifyCss() : plugins.util.noop()) + .pipe(plugins.if(config.sourceMaps, plugins.sourcemaps.write('.'))) + .pipe(gulp.dest(config.assetsDir + '/css')) + .pipe(plugins.if(config.liveReload, livereload())); +} + +app.copy = function(srcFiles, outputDir) { + gulp.src(srcFiles) + .pipe(gulp.dest(outputDir)); +} + +gulp.task('fonts', function () { + // Copy fonts from bower_components into source/asset/fonts. + app.copy(config.bowerDir + '/font-awesome/fonts/*', config.assetsDir + '/fonts'); +}); + gulp.task('styles', function () { - gulp.src('./sass') - .pipe(plugins.compass({ - config_file: './config.rb', - css: config.cssDir, - sourcemap: config.sourceMaps - })) - .pipe(plugins.minifyCss()) - .pipe(gulp.dest(config.cssDir)); + app.addStyle([ + config.bowerDir + '/font-awesome/css/font-awesome.css', + './sass/styles.scss' + ], 'all.css') }); gulp.task('images', function () { @@ -31,12 +52,15 @@ gulp.task('images', function () { }); gulp.task('watch', function () { + plugins.livereload.listen(); gulp.watch(config.sassPattern, ['styles']); }); gulp.task('clean', function () { - del.sync('./source/assets/css/*'); + del.sync(config.assetsDir + '/css'); + del.sync(config.assetsDir + '/fonts'); del.sync('./output_*/assets/css/*'); + del.sync('./output_*/assets/fonts/*'); }); -gulp.task('default', ['clean', 'watch']); +gulp.task('default', ['clean', 'styles', 'fonts', 'watch']); diff --git a/package.json b/package.json index f170ac5c..7b436337 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,15 @@ { "devDependencies": { "gulp": "^3.9.0", - "gulp-compass": "^2.1.0", + "gulp-concat": "^2.6.0", + "gulp-if": "^2.0.0", "gulp-imagemin": "^2.4.0", + "gulp-livereload": "^3.8.1", "gulp-load-plugins": "^1.1.0", "gulp-minify-css": "^1.2.3", + "gulp-plumber": "^1.0.1", + "gulp-sass": "^2.1.1", + "gulp-sourcemaps": "^1.6.0", "gulp-util": "^3.0.7" } } diff --git a/sass/oliverdavies.scss b/sass/oliverdavies.scss deleted file mode 100644 index 792c4791..00000000 --- a/sass/oliverdavies.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import 'bootstrap'; -@import 'compass'; -@import 'breakpoint'; - -@import "variables"; -@import "partials/*"; diff --git a/sass/partials/_meetups.scss b/sass/partials/_meetups.scss index 3c2c33e0..2057a3b6 100644 --- a/sass/partials/_meetups.scss +++ b/sass/partials/_meetups.scss @@ -2,10 +2,12 @@ @include clearfix; ul { - @include inline-block-list; + list-style: none; + margin-left: 0; } li { + display: inline-block; padding: 5px 0; margin: 0 5px 5px 0; } diff --git a/sass/styles.scss b/sass/styles.scss new file mode 100644 index 00000000..590df3f9 --- /dev/null +++ b/sass/styles.scss @@ -0,0 +1,14 @@ + +@import '_variables'; + +@import '../vendor/bower_components/compass-breakpoint/stylesheets/breakpoint'; +@import '../vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap'; + +@import 'partials/base'; +@import 'partials/badges'; +@import 'partials/experience'; +@import 'partials/meetups'; +@import 'partials/footer'; +@import 'partials/testimonials'; +@import 'partials/blog-list'; +@import 'partials/blog-post'; diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig index efedd122..87abb550 100644 --- a/source/_layouts/default.html.twig +++ b/source/_layouts/default.html.twig @@ -18,8 +18,7 @@ - - + {% block styles %}{% endblock %} {% for size in site.apple_touch_icon_sizes %}