mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-09 15:16:51 +02:00
rebuild + first bit of customizer urls
This commit is contained in:
fat
@@ -9,6 +9,14 @@
|
|||||||
|
|
||||||
<script src="{{ page.base_url }}assets/js/application.js"></script>
|
<script src="{{ page.base_url }}assets/js/application.js"></script>
|
||||||
|
|
||||||
|
{% if page.slug == "customize" %}
|
||||||
|
<script src="{{ page.base_url }}assets/js/less.js"></script>
|
||||||
|
<script src="{{ page.base_url }}assets/js/jszip.js"></script>
|
||||||
|
<script src="{{ page.base_url }}assets/js/uglify.js"></script>
|
||||||
|
<script src="{{ page.base_url }}assets/js/jquery.bbq.min.js"></script>
|
||||||
|
<script src="{{ page.base_url }}assets/js/customizer.js"></script>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<!-- Analytics
|
<!-- Analytics
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
52
_layouts/customize.html
Normal file
52
_layouts/customize.html
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<!-- Meta, title, CSS, favicons, etc. -->
|
||||||
|
{% include header.html %}
|
||||||
|
<!-- Place anything custom after this. -->
|
||||||
|
</head>
|
||||||
|
<body data-spy="scroll" data-target=".bs-sidebar">
|
||||||
|
<a class="sr-only" href="#content">Skip navigation</a>
|
||||||
|
|
||||||
|
<!-- Docs master nav -->
|
||||||
|
{% include nav-main.html %}
|
||||||
|
|
||||||
|
<!-- Docs page layout -->
|
||||||
|
<div class="bs-header" id="content" role="banner">
|
||||||
|
<div class="container">
|
||||||
|
<h1>{{ page.title }}</h1>
|
||||||
|
<p>{{ page.lead }}</p>
|
||||||
|
{% include ads.html %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Callout for the old docs link -->
|
||||||
|
{% include old-bs-docs.html %}
|
||||||
|
|
||||||
|
<div class="container bs-docs-container">
|
||||||
|
<div class="col-lg-12">
|
||||||
|
{{ content }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer
|
||||||
|
================================================== -->
|
||||||
|
<footer class="bs-footer">
|
||||||
|
{% include social-buttons.html %}
|
||||||
|
|
||||||
|
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
|
||||||
|
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="{{ site.blog }}">Blog</a></li>
|
||||||
|
<li class="muted">·</li>
|
||||||
|
<li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
|
||||||
|
<li class="muted">·</li>
|
||||||
|
<li><a href="{{ site.repo }}/releases">Releases</a></li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JS and analytics only. -->
|
||||||
|
{% include footer.html %}
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
175
assets/js/customizer.js
Normal file
175
assets/js/customizer.js
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
window.onload = function () { // wait for load in a dumb way because B-0
|
||||||
|
var cw = '/*!\n * Bootstrap v3.0.0-rc.2\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
|
||||||
|
|
||||||
|
function generateUrl() {
|
||||||
|
var vars = {}
|
||||||
|
|
||||||
|
$('#less-variables-section input')
|
||||||
|
.each(function () {
|
||||||
|
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
|
||||||
|
})
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
vars: vars,
|
||||||
|
css: $('#less-section input:not(:checked)').map(function () { return this.value }).toArray(),
|
||||||
|
js: $('#plugin-section input:not(:checked)').map(function () { return this.value }).toArray()
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
|
||||||
|
|
||||||
|
window.location = jQuery.param.querystring('/customize/', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseUrl() {
|
||||||
|
var data = jQuery.deparam.querystring()
|
||||||
|
|
||||||
|
if (data.js) {
|
||||||
|
for (var i = 0; i < data.js.length; i++) {
|
||||||
|
var input = $('input[value="'+data.js[i]+'"]')
|
||||||
|
input && input.prop('checked', false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.css) {
|
||||||
|
for (var i = 0; i < data.css.length; i++) {
|
||||||
|
var input = $('input[value="'+data.css[i]+'"]')
|
||||||
|
input && input.prop('checked', false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.vars) {
|
||||||
|
// todo (fat): vars
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateZip(css, js, complete) {
|
||||||
|
if (!css && !js) return alert('you want to build nothing… o_O')
|
||||||
|
|
||||||
|
var zip = new JSZip()
|
||||||
|
|
||||||
|
if (css) {
|
||||||
|
var cssFolder = zip.folder('css')
|
||||||
|
for (var fileName in css) {
|
||||||
|
cssFolder.file(fileName, css[fileName])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (js) {
|
||||||
|
var jsFolder = zip.folder('js')
|
||||||
|
for (var fileName in js) {
|
||||||
|
jsFolder.file(fileName, js[fileName])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var content = zip.generate()
|
||||||
|
|
||||||
|
location.href = 'data:application/zip;base64,' + content
|
||||||
|
|
||||||
|
complete()
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateCustomCSS(vars) {
|
||||||
|
var result = ''
|
||||||
|
|
||||||
|
for (var key in vars) {
|
||||||
|
result += key + ': ' + vars[key] + ';\n'
|
||||||
|
}
|
||||||
|
|
||||||
|
return result + '\n\n'
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateCSS() {
|
||||||
|
var $checked = $('#less-section input:checked')
|
||||||
|
|
||||||
|
if (!$checked.length) return false
|
||||||
|
|
||||||
|
var result = {}
|
||||||
|
var vars = {}
|
||||||
|
var css = ''
|
||||||
|
|
||||||
|
$('#less-variables-section input')
|
||||||
|
.each(function () {
|
||||||
|
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
|
||||||
|
})
|
||||||
|
|
||||||
|
css += __less['variables.less']
|
||||||
|
if (vars) css += generateCustomCSS(vars)
|
||||||
|
css += __less['mixins.less']
|
||||||
|
css += $checked
|
||||||
|
.map(function () { return __less[this.value] })
|
||||||
|
.toArray()
|
||||||
|
.join('\n')
|
||||||
|
|
||||||
|
css = css.replace(/@import[^\n]*/gi, '') //strip any imports
|
||||||
|
|
||||||
|
try {
|
||||||
|
var parser = new less.Parser({
|
||||||
|
paths: ['variables.less', 'mixins.less']
|
||||||
|
, optimization: 0
|
||||||
|
, filename: 'bootstrap.css'
|
||||||
|
}).parse(css, function (err, tree) {
|
||||||
|
if (err) return alert(err)
|
||||||
|
|
||||||
|
result = {
|
||||||
|
'bootstrap.css' : cw + tree.toCSS(),
|
||||||
|
'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} catch (err) {
|
||||||
|
return alert(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateJavascript() {
|
||||||
|
var $checked = $('#plugin-section input:checked')
|
||||||
|
if (!$checked.length) return false
|
||||||
|
|
||||||
|
var js = $checked
|
||||||
|
.map(function () { return __js[this.value] })
|
||||||
|
.toArray()
|
||||||
|
.join('\n')
|
||||||
|
|
||||||
|
return {
|
||||||
|
'bootstrap.js': js,
|
||||||
|
'bootstrap.min.js': cw + uglify(js)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var $downloadBtn = $('#btn-download').on('click', function (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
$downloadBtn.addClass('loading')
|
||||||
|
generateZip(generateCSS(), generateJavascript(), function () {
|
||||||
|
$downloadBtn.removeClass('loading')
|
||||||
|
setTimeout(function () {
|
||||||
|
generateUrl()
|
||||||
|
}, 1)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
var inputsComponent = $('#less-section input')
|
||||||
|
var inputsPlugin = $('#plugin-section input')
|
||||||
|
var inputsVariables = $('#less-variables-section input')
|
||||||
|
|
||||||
|
$('#less-section .toggle').on('click', function (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
inputsComponent.prop('checked', !inputsComponent.is(':checked'))
|
||||||
|
})
|
||||||
|
|
||||||
|
$('#plugin-section .toggle').on('click', function (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
|
||||||
|
})
|
||||||
|
|
||||||
|
$('#less-variables-section .toggle').on('click', function (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
inputsVariables.val('')
|
||||||
|
})
|
||||||
|
|
||||||
|
try {
|
||||||
|
parseUrl()
|
||||||
|
} catch (e) {
|
||||||
|
// maybe alert user that we can't parse their url
|
||||||
|
}
|
||||||
|
}
|
||||||
1287
assets/js/jquery.bbq.min.js
vendored
Normal file
1287
assets/js/jquery.bbq.min.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
130
customize.html
130
customize.html
File diff suppressed because one or more lines are too long
230
dist/css/bootstrap.css
vendored
230
dist/css/bootstrap.css
vendored
@@ -4663,6 +4663,32 @@ td.visible-sm {
|
|||||||
display: table-cell !important;
|
display: table-cell !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.visible-sm {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
tr.visible-sm {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
th.visible-sm,
|
||||||
|
td.visible-sm {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.visible-sm {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
tr.visible-sm {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
th.visible-sm,
|
||||||
|
td.visible-sm {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.visible-md {
|
.visible-md {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
@@ -4676,6 +4702,32 @@ td.visible-md {
|
|||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.visible-md {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
tr.visible-md {
|
||||||
|
display: table-row !important;
|
||||||
|
}
|
||||||
|
th.visible-md,
|
||||||
|
td.visible-md {
|
||||||
|
display: table-cell !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.visible-md {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
tr.visible-md {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
th.visible-md,
|
||||||
|
td.visible-md {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.visible-lg {
|
.visible-lg {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
@@ -4689,6 +4741,32 @@ td.visible-lg {
|
|||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.visible-lg {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
tr.visible-lg {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
th.visible-lg,
|
||||||
|
td.visible-lg {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.visible-lg {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
tr.visible-lg {
|
||||||
|
display: table-row !important;
|
||||||
|
}
|
||||||
|
th.visible-lg,
|
||||||
|
td.visible-lg {
|
||||||
|
display: table-cell !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.hidden-sm {
|
.hidden-sm {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
@@ -4702,6 +4780,32 @@ td.hidden-sm {
|
|||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.hidden-sm {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
tr.hidden-sm {
|
||||||
|
display: table-row !important;
|
||||||
|
}
|
||||||
|
th.hidden-sm,
|
||||||
|
td.hidden-sm {
|
||||||
|
display: table-cell !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.hidden-sm {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
tr.hidden-sm {
|
||||||
|
display: table-row !important;
|
||||||
|
}
|
||||||
|
th.hidden-sm,
|
||||||
|
td.hidden-sm {
|
||||||
|
display: table-cell !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.hidden-md {
|
.hidden-md {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
@@ -4715,6 +4819,32 @@ td.hidden-md {
|
|||||||
display: table-cell !important;
|
display: table-cell !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.hidden-md {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
tr.hidden-md {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
th.hidden-md,
|
||||||
|
td.hidden-md {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.hidden-md {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
tr.hidden-md {
|
||||||
|
display: table-row !important;
|
||||||
|
}
|
||||||
|
th.hidden-md,
|
||||||
|
td.hidden-md {
|
||||||
|
display: table-cell !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.hidden-lg {
|
.hidden-lg {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
@@ -4729,56 +4859,6 @@ td.hidden-lg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) and (max-width: 991px) {
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
.visible-sm {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
tr.visible-sm {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
th.visible-sm,
|
|
||||||
td.visible-sm {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.visible-md {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
tr.visible-md {
|
|
||||||
display: table-row !important;
|
|
||||||
}
|
|
||||||
th.visible-md,
|
|
||||||
td.visible-md {
|
|
||||||
display: table-cell !important;
|
|
||||||
}
|
|
||||||
.visible-lg {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
tr.visible-lg {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
th.visible-lg,
|
|
||||||
td.visible-lg {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.hidden-sm {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
tr.hidden-sm {
|
|
||||||
display: table-row !important;
|
|
||||||
}
|
|
||||||
th.hidden-sm,
|
|
||||||
td.hidden-sm {
|
|
||||||
display: table-cell !important;
|
|
||||||
}
|
|
||||||
.hidden-md {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
tr.hidden-md {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
th.hidden-md,
|
|
||||||
td.hidden-md {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.hidden-lg {
|
.hidden-lg {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
@@ -4792,56 +4872,6 @@ td.hidden-lg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.visible-sm {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
tr.visible-sm {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
th.visible-sm,
|
|
||||||
td.visible-sm {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.visible-md {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
tr.visible-md {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
th.visible-md,
|
|
||||||
td.visible-md {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
.visible-lg {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
tr.visible-lg {
|
|
||||||
display: table-row !important;
|
|
||||||
}
|
|
||||||
th.visible-lg,
|
|
||||||
td.visible-lg {
|
|
||||||
display: table-cell !important;
|
|
||||||
}
|
|
||||||
.hidden-sm {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
tr.hidden-sm {
|
|
||||||
display: table-row !important;
|
|
||||||
}
|
|
||||||
th.hidden-sm,
|
|
||||||
td.hidden-sm {
|
|
||||||
display: table-cell !important;
|
|
||||||
}
|
|
||||||
.hidden-md {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
tr.hidden-md {
|
|
||||||
display: table-row !important;
|
|
||||||
}
|
|
||||||
th.hidden-md,
|
|
||||||
td.hidden-md {
|
|
||||||
display: table-cell !important;
|
|
||||||
}
|
|
||||||
.hidden-lg {
|
.hidden-lg {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user