Skip to content

Commit

Permalink
Bootstrap4 support (#29)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kleinejan
kleinejan authored Feb 6, 2018
1 parent ccb892c commit 5e83bf3
Show file tree
Hide file tree
Showing 54 changed files with 3,133 additions and 1,800 deletions.
21 changes: 21 additions & 0 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.scss]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
39 changes: 20 additions & 19 deletions Gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
var gulp = require('gulp'),
less = require('gulp-less'),
// less = require('gulp-less'),
autoprefixer = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
sass = require('gulp-sass');
fileinclude = require('gulp-file-include'),
runSequence = require('run-sequence'),
browserSync = require('browser-sync'),
Expand All @@ -25,22 +26,22 @@ gulp.task('fileinclude', function () {
});


gulp.task('less:main', function () {
return gulp.src('./less/main.less')
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')]
})).pipe(autoprefixer({
gulp.task('scss:main', function () {
return gulp.src('./scss/main.scss')
.pipe(sass({
paths: [path.join(__dirname, 'scss', 'includes')]
}).on('error', sass.logError)).pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./docs/css'))
.pipe(browserSync.stream());
});

gulp.task('less:slider', function () {
return gulp.src('./less/titatoggle.less')
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')]
gulp.task('scss:slider', function () {
return gulp.src('./scss/titatoggle.scss')
.pipe(sass({
paths: [path.join(__dirname, 'scss', 'includes')]
})).pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
Expand All @@ -49,10 +50,10 @@ gulp.task('less:slider', function () {
.pipe(gulp.dest('./dist'));
});

gulp.task('less:slider-min', function () {
return gulp.src('./less/titatoggle.less')
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')]
gulp.task('scss:slider-min', function () {
return gulp.src('./scss/titatoggle.scss')
.pipe(sass({
paths: [path.join(__dirname, 'scss', 'includes')]
})).pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
Expand All @@ -62,7 +63,7 @@ gulp.task('less:slider-min', function () {
});

gulp.task('copy:src', function () {
return gulp.src('./less/_titatoggle.less')
return gulp.src('./scss/_titatoggle.scss')
.pipe(rename({basename: "titatoggle",}))
.pipe(gulp.dest('./dist'));
});
Expand All @@ -79,20 +80,20 @@ gulp.task('browser-sync', function () {
baseDir: "./docs"
}
});
gulp.watch("less/**/*.*", ['less']);
gulp.watch("scss/**/*.*", ['scss']);
gulp.watch("_includes/**/*.*", ['fileinclude']);
gulp.watch("docs/**/*.*").on("change", reload);

});

gulp.task('less', function (callback) {
runSequence(['less:main', 'less:slider', 'less:slider-min'],
gulp.task('scss', function (callback) {
runSequence(['scss:main', 'scss:slider', 'scss:slider-min'],
callback
)
});

gulp.task('default', function (callback) {
runSequence(['copy:js', 'copy:src', 'less', 'fileinclude'], 'browser-sync',
runSequence(['copy:js', 'copy:src', 'scss', 'fileinclude'], 'browser-sync',
callback
)
});
8 changes: 5 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
TiTatoggle - (bs3 addon without JS)
==========
TiTatoggle - (bootstrap 3 addon without JS)
===========================================

Using awesome toggle buttons without Javascript or any other logic, other than plane form elements.
The Pattern is the same as Twitter-Bootstrap. So it can be implemented without a breeze.

Browser support: Internet Explorer 9, FireFox, Safari, Chrome, Safari Ios, Stock Android browser 4.2, Chrome Android
Browser support: Internet Explorer 9/10/11, Edge, FireFox, Safari, Chrome, Safari Ios, Stock Android browser 4.2, Chrome Android

Install:
'''
$ npm i titatoggle --save-dev (Bootstrap 4.x.x)
$ npm i [email protected] --save-dev (Legacy bootstrap 3.x.x)
$ bower install titatoggle
'''

Expand Down
22 changes: 16 additions & 6 deletions _includes/howto.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,25 @@ <h3 id="howto">Howto</h3>
You have a few options to include this into your project.
</p>

<h4>Install</h4>

<h4>Latest version (Bootstrap 4)</h4>

<code>$ npm install titatoggle --save-dev</code>

<h4>Previous version (Bootstrap 3)</h4>
<code>$ npm install [email protected] --save-dev</code>

<h4>Bower</h4>
<p>
<code>$ bower install titatoggle</code>
</p>
<code>$ bower install titatoggle</code>




<h4>Less</h4>
<h4>SASS</h4>
<p>
Inside the project you will find <code>_titatoggle.less</code> Include this file into your own project, and stuff just works.
If needed, you can fiddle around with some less variables.
Inside the project you will find <code>_titatoggle.scss</code> Include this file into your own project, and stuff just works.
If needed, you can fiddle around with some sass variables.
</p>

<h4>CSS</h4>
Expand Down
38 changes: 19 additions & 19 deletions _includes/indicator.html
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,55 @@
<h3 id="indicator">Indicator</h3>
<p class="lead">
Small visual que for the label to show that the checkbox is checked.
Small visual que for the label to show that the checkbox is checked.
</p>
<div class="alert alert-warning">
Not so usable for the visually impaired, due
to the fact it's only a color and contrast is to low.
Not so usable for the visually impaired, due
to the fact it's only a color and contrast is to low.
</div>
<div class="checkbox checkbox-slider--default">
<label>
<input type="checkbox" checked><span class="indicator-success">success</span>
</label>
<label>
<input type="checkbox" checked><span class="indicator-success">success</span>
</label>
</div>
<div class="checkbox checkbox-slider--default">
<label>
<input type="checkbox" checked><span class="indicator-info">info</span>
</label>
<label>
<input type="checkbox" checked><span class="indicator-info">info</span>
</label>
</div>
<div class="checkbox checkbox-slider--default">
<label>
<input type="checkbox" checked><span class="indicator-warning">warning</span>
</label>
<label>
<input type="checkbox" checked><span class="indicator-warning">warning</span>
</label>
</div>
<div class="checkbox checkbox-slider--default">
<label>
<input type="checkbox" checked><span class="indicator-danger">danger</span>
</label>
<label>
<input type="checkbox" checked><span class="indicator-danger">danger</span>
</label>
</div>

<pre><code class="html">

<div class="checkbox ...">
...
<span class="indicator-success">danger</span>
<span class="indicator-success">danger</span>
...
</div>

<div class="checkbox ...">
...
<span class="indicator-info">danger</span>
<span class="indicator-info">danger</span>
...
</div>

<div class="checkbox ...">
...
<span class="indicator-warning">danger</span>
<span class="indicator-warning">danger</span>
...
</div>

<div class="checkbox ...">
...
<span class="indicator-danger">danger</span>
<span class="indicator-danger">danger</span>
...
</div>
</code></pre>
Expand Down
112 changes: 59 additions & 53 deletions _includes/intro.html
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,62 @@
<div class="hero">
<div class="container">
<h1 class="text-center">Bootstrap 3 Ti-Ta-Toggle <small>(bs3 addon without JS)</small></h1>
<p class="text-center lead">
Using awesome toggle buttons without Javascript or any other logic, other than plane form elements.
The Pattern is the same as Twitter-Bootstrap. So it can be implemented without a breeze.
</p>
<p class="text-center">
<em>Browser support: Internet Explorer 9, FireFox, Safari, Chrome, Safari Ios, Stock Android browser 4.2, Chrome Android</em>
</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<h5>Default checkbox</h5>
<div class="checkbox checkbox-slider--default checkbox-slider-lg">
<label>
<input type="checkbox"><span>Check</span>
</label>
</div>
</div>
<div class="col-sm-3">
<h5>With text</h5>
<div class="checkbox checkbox-slider--a checkbox-slider-lg">
<label>
<input type="checkbox"><span>This</span>
</label>
</div>
</div>
<div class="col-sm-3">
<h5>iOS like</h5>
<div class="checkbox checkbox-slider--b checkbox-slider-lg">
<label>
<input type="checkbox"><span>Out</span>
</label>
</div>
</div>
<div class="col-sm-3">
<h5>Material like</h5>
<div class="checkbox checkbox-slider--c checkbox-slider-lg">
<label>
<input type="checkbox"><span>Dude</span>
</label>
</div>
</div>
</div>
</div>
<hr>
<p class="text-center">
<iframe src="http://ghbtns.com/github-btn.html?user=kleinejan&repo=titatoggle&type=watch&count=true&size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=kleinejan&repo=titatoggle&type=fork&count=true&size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
</p>
<div class="container">
<h1 class="text-center">Bootstrap 4 Ti-Ta-Toggle
<small>(addon without JS)</small>
</h1>
<p class="text-center lead">
Using awesome toggle buttons without Javascript or any other logic, other than plane form elements.
The Pattern is the same as Twitter-Bootstrap. So it can be implemented without a breeze.
</p>
<p class="text-center">
<em>Browser support: Internet Explorer 9/10/11, Edge, FireFox, Safari, Chrome, Safari Ios, Stock Android browser
4.2, Chrome Android</em>
</p>
<p class="text-center">
<em>Version 1.0.0 of TitaToggle has support for Bootstrap v3.x.x </em>
</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<h5>Default checkbox</h5>
<div class="checkbox checkbox-slider--default checkbox-slider-lg">
<label>
<input type="checkbox"><span>Check</span>
</label>
</div>
</div>
<div class="col-sm-3">
<h5>With text</h5>
<div class="checkbox checkbox-slider--a checkbox-slider-lg">
<label>
<input type="checkbox"><span>This</span>
</label>
</div>
</div>
<div class="col-sm-3">
<h5>iOS like</h5>
<div class="checkbox checkbox-slider--b checkbox-slider-lg">
<label>
<input type="checkbox"><span>Out</span>
</label>
</div>
</div>
<div class="col-sm-3">
<h5>Material like</h5>
<div class="checkbox checkbox-slider--c checkbox-slider-lg">
<label>
<input type="checkbox"><span>Dude</span>
</label>
</div>
</div>
</div>
</div>
<hr>
<p class="text-center">
<iframe src="http://ghbtns.com/github-btn.html?user=kleinejan&repo=titatoggle&type=watch&count=true&size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=kleinejan&repo=titatoggle&type=fork&count=true&size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
</p>

</div>
</div>
</div>
Loading

0 comments on commit 5e83bf3

Please sign in to comment.