diff --git a/.gitignore b/.gitignore index 8af8abd..84e2a6c 100755 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ bower_components node_modules +tmp .sass-cache .grunt -tmp +.idea diff --git a/Gruntfile.js b/Gruntfile.js index d2c9b9b..b3eef96 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -4,24 +4,24 @@ module.exports = function(grunt) { // Project configuration. grunt.initConfig({ + package: grunt.file.readJSON('package.json'), nodeunit: { all: ['tests/*_test.js'] }, sass: { options: { - style: 'expanded', + outputStyle: 'expanded', sourcemap: 'none', - // Increase Sass' default (5) precision to 9 to match Less output. + // Increase Sass' number "precision" to 8 to match Less output. // // @see https://github.com/twbs/bootstrap-sass#sass-number-precision // @see https://github.com/sass/node-sass/issues/673#issue-57581701 // @see https://github.com/sass/sass/issues/1122 - precision: 9 + precision: 8 }, dist: { files: { - 'docs/css/select2-bootstrap.css': 'src/build.scss', 'dist/select2-bootstrap.css': 'src/build.scss' } }, @@ -47,11 +47,11 @@ module.exports = function(grunt) { bump: { options: { files: [ - 'package.json', - 'bower.json' + 'package.json' ], push: false, - createTag: false + createTag: false, + commit: false } }, @@ -59,30 +59,38 @@ module.exports = function(grunt) { main: { files: [ { - src: 'bower_components/bootstrap/dist/css/bootstrap.min.css', - dest: 'docs/css/bootstrap.min.css', - expand: false + src: 'node_modules/bootstrap/dist/css/bootstrap.min.css', + dest: 'docs/css/bootstrap.min.css' }, { - src: 'bower_components/bootstrap/dist/js/bootstrap.min.js', - dest: 'docs/js/bootstrap.min.js', - expand: false + src: 'node_modules/bootstrap/dist/js/bootstrap.min.js', + dest: 'docs/js/bootstrap.min.js' }, { - src: 'bower_components/respond/dest/respond.min.js', - dest: 'docs/js/respond.min.js', - expand: false + expand: true, + cwd: 'node_modules/bootstrap/dist/fonts', + src: ['**/*'], + dest: 'docs/fonts' }, { - cwd: 'bower_components/bootstrap/dist/fonts', - src: ['**/*'], - dest: 'docs/fonts', - expand: true + src: 'node_modules/Respond.js/dest/respond.min.js', + dest: 'docs/js/respond.min.js' + }, + { + src: 'node_modules/anchor-js/anchor.min.js', + dest: 'docs/js/anchor.min.js' + }, + { + src: 'dist/select2-bootstrap.css', + dest: 'tmp/select2-bootstrap.css' }, { - src: 'bower_components/anchor-js/anchor.min.js', - dest: 'docs/js/anchor.min.js', - expand: false + src: 'dist/select2-bootstrap.css', + dest: 'docs/css/select2-bootstrap.css' + }, + { + src: 'dist/select2-bootstrap.css', + dest: 'docs/_site/css/select2-bootstrap.css' } ] } @@ -104,25 +112,113 @@ module.exports = function(grunt) { }, build: { d: null + } + }, + + watch: { + sass: { + files: 'src/select2-bootstrap.scss', + tasks: ['buildTheme'] }, - serve: { - options: { - serve: true, - watch: true + jekyll: { + files: ['docs/_layouts/*.html', 'docs/_includes/*.html', '*.html'], + tasks: ['jekyll'] + } + }, + + browserSync: { + files: { + src : ['docs/_site/css/*.css'] + }, + options: { + watchTask: true, + ghostMode: { + clicks: true, + scroll: true, + links: true, + forms: true + }, + server: { + baseDir: 'docs/_site' } } }, - watch: { - files: 'src/select2-bootstrap.scss', - tasks: ['sass'], + postcss: { options: { - livereload: true + map: false, + processors: [ + // Autoprefixer browser settings as required by Bootstrap + // + // @see https://github.com/twbs/bootstrap-sass#sass-autoprefixer + require('autoprefixer')({browsers: [ + "Android 2.3", + "Android >= 4", + "Chrome >= 20", + "Firefox >= 24", + "Explorer >= 8", + "iOS >= 6", + "Opera >= 12", + "Safari >= 6" + ]}) + ] + }, + dist: { + src: [ + 'dist/select2-bootstrap.css' + ] + }, + test: { + src: [ + 'tmp/select2-bootstrap.css' + ] + } + }, + + scss2less: { + convert: { + files: [{ + src: 'src/select2-bootstrap.scss', + dest: 'src/select2-bootstrap.less' + }] + } + }, + + // Only used to generate CSS for the tests. + less: { + test: { + options: { + sourceMap: false + }, + src: 'src/build.less', + dest: 'tmp/select2-bootstrap.css' + } + }, + + stamp: { + options: { + banner: '/*!\n' + + ' * Select2 Bootstrap Theme v<%= package.version %> (<%= package.homepage %>)\n' + + ' * Copyright 2015-<%= grunt.template.today("yyyy") %> <%= package.author %> and contributors (https://github.com/select2/select2-bootstrap-theme/graphs/contributors)\n' + + ' * Licensed under MIT (https://github.com/select2/select2-bootstrap-theme/blob/master/LICENSE)\n' + + ' */\n' + }, + dist: { + files: { + src: 'dist/*' + } + }, + test: { + files: { + src: 'tmp/*' + } } } + }); // Default tasks. - grunt.registerTask('build', ['sass', 'cssmin', 'copy', 'jekyll:build']); - grunt.registerTask('serve', ['jekyll:serve']); + grunt.registerTask('buildTheme', ['sass', 'postcss', 'cssmin', 'stamp', 'copy']) + grunt.registerTask('build', ['buildTheme', 'jekyll:build']); + grunt.registerTask('serve', ['buildTheme', 'build', 'browserSync', 'watch']); }; diff --git a/LICENSE b/LICENSE index 406d19a..7073d7b 100755 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2012-2015 Florian Kissling and contributors +Copyright (c) 2012-2016 Florian Kissling and contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 52a4793..c85bde3 100755 --- a/README.md +++ b/README.md @@ -1,58 +1,154 @@ -A Select2 v4 [Theme](https://select2.github.io/examples.html#themes) for Bootstrap 3 - -**Note: Work in progress – depending on your use case, select2-bootstrap-theme might not be production-ready yet!** +A [Select2](https://select2.github.io/) v4 [Theme](https://select2.github.io/examples.html#themes) for Bootstrap 3 +![select2-bootstrap-theme version](https://img.shields.io/badge/select2--bootstrap--theme-v0.1.0--beta.10-brightgreen.svg) +[![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT) Demonstrations available at -http://select2.github.io/select2-bootstrap-theme/ +[select2.github.io/select2-bootstrap-theme](http://select2.github.io/select2-bootstrap-theme/) + +#### Compatibility + +Built and tested with Bootstrap v3.3.7 and Select2 v4.0.3 in latest Chrome, Firefox and Safari (Mac) and Internet Explorer 11, 10 and 9 (should work in IE8). + +#### Installation + +You can [download select2-bootstrap-theme from this GitHub repo](https://github.com/select2/select2-bootstrap-theme/releases), install it using Bower or npm – required if you want to integrate the Sass or Less sources in your build process – or source the compiled CSS directly from CDNJS or jsDelivr. + +##### Install using Bower or npm/yarn + +You may install select2-bootstrap-theme with [Bower](https://bower.io/), [npm](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/): -Tested with Bootstrap v3.3.5 and Select2 v4.0.0 -in latest Chrome. +```shell +// Bower +bower install select2-bootstrap-theme -##### Installation +// npm +npm install select2-bootstrap-theme -The Select2 Bootstrap Theme only works with Select2 v4.x. Applying the theme requires `select2-bootstrap.css` referenced after the default `select2.css` that comes with Select2: +// yarn +yarn add select2-bootstrap-theme +``` - - +##### Source select2-bootstrap-theme from CDNJS or jsDelivr + +select2-bootstrap-theme [is also available on CDNJS](https://cdnjs.com/libraries/select2-bootstrap-theme/) and [jsDelivr](http://www.jsdelivr.com/projects/select2-bootstrap-theme). + +#### Usage + +select2-bootstrap-theme only works with Select2 v4.x. Applying the theme requires `select2-bootstrap.css` referenced after the default `select2.css` that comes with Select2: + +```html + + +``` To apply the theme, tell Select2 to do so by passing `bootstrap` to the [`theme`](https://select2.github.io/examples.html#themes) option when initializing Select2: - $( "#dropdown" ).select2({ - theme: "bootstrap" - }); +```js +$( "#dropdown" ).select2({ + theme: "bootstrap" +}); +``` + +You may also set it as the default theme for all Select2 widgets like so: + +```js +$.fn.select2.defaults.set( "theme", "bootstrap" ); +``` + +#### Changelog -##### Changelog +##### 0.1.0-beta.10 -###### 0.1.0-beta.4 +* Compiled with grunt-sass v2.0.0 (was v1.2.1). +* Merged pull request [#54](https://github.com/select2/select2-bootstrap-theme/pull/54) by @odahcam (and fixed it: `:first-child/:not(:first-child)/:last-child` for `.select2-container--bootstrap` won’t play nice in our case; we have to take the original `