Skip to content

Commit 3f4aa04

Browse files
committed
Create a WIP implementation using SASS.js in lieu of Less.js
- Import new version of SCSS Bootstrap - Fix UI of Navbar - Remove old unusefull versions - Create a backup of 3.1 - Refactor code to use Sass
1 parent 56c09bc commit 3f4aa04

File tree

394 files changed

+85752
-3913
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

394 files changed

+85752
-3913
lines changed
File renamed without changes.

3.1/css/app.css

+4,057
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

3.1/css/app.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

3.1/css/bootstrap.css

+5,768
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

3.1/css/bootstrap.css.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
File renamed without changes.

3.1/img/alpha.png

3.19 KB
199 KB
152 KB
142 KB

3.1/img/ap_icons_black_game-tools.png

86.7 KB
76.9 KB
68.5 KB
60.6 KB

3.1/img/ap_icons_white_2x_editor.png

7.74 KB
127 KB
94.8 KB
88.7 KB

3.1/img/ap_icons_white_editor.png

4.78 KB

3.1/img/ap_icons_white_game-tools.png

46.8 KB
39.3 KB
32.2 KB

3.1/img/background.png

83 Bytes

3.1/img/create-website-pikock.jpg

199 KB

3.1/img/geometry.png

3.28 KB
8.57 KB

3.1/img/glyphicons-halflings.png

12.5 KB

3.1/img/hue.png

2.9 KB

3.1/img/ipad_vision.jpg

44.2 KB

3.1/img/logo_pikock.png

5.81 KB

3.1/img/orson-website-ad.jpg

273 KB

3.1/img/saturation.png

8.61 KB

3.1/index.html

+193
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="fragment" content="!">
6+
<title>Bootstrap Magic : Generate your own bootstrap theme quickly and easily</title>
7+
<meta name="description" content="Awesome features like contextual typeahead and colorpicker help you make your custom bootstrap 3.1 themes quickly and easily." />
8+
<link rel="stylesheet" href="css/app.css">
9+
<style>
10+
[ng-cloak] {
11+
display: none;
12+
}
13+
</style>
14+
15+
<script>
16+
// include angular loader, which allows the files to load in any order
17+
/*
18+
AngularJS v1.0.0rc1
19+
(c) 2010-2012 AngularJS http://angularjs.org
20+
License: MIT
21+
*/
22+
'use strict';(function(i){function d(c,a,e){return c[a]||(c[a]=e())}return d(d(i,"angular",Object),"module",function(){var c={};return function(a,e,f){e&&c.hasOwnProperty(a)&&(c[a]=null);return d(c,a,function(){function b(a,b,d){return function(){c[d||"push"]([a,b,arguments]);return g}}if(!e)throw Error("No module: "+a);var c=[],d=[],h=b("$injector","invoke"),g={_invokeQueue:c,_runBlocks:d,requires:e,name:a,provider:b("$provide","provider"),factory:b("$provide","factory"),service:b("$provide","service"),
23+
value:b("$provide","value"),constant:b("$provide","constant","unshift"),filter:b("$filterProvider","register"),directive:b("$compileProvider","directive"),config:h,run:function(a){d.push(a);return this}};f&&h(f);return g})}})})(window);
24+
25+
// include a third-party async loader library
26+
/*!
27+
* $script.js v1.3
28+
* https://github.com/ded/script.js
29+
* Copyright: @ded & @fat - Dustin Diaz, Jacob Thornton 2011
30+
* Follow our software http://twitter.com/dedfat
31+
* License: MIT
32+
*/
33+
!function(a,b,c){function t(a,c){var e=b.createElement("script"),f=j;e.onload=e.onerror=e[o]=function(){e[m]&&!/^c|loade/.test(e[m])||f||(e.onload=e[o]=null,f=1,c())},e.async=1,e.src=a,d.insertBefore(e,d.firstChild)}function q(a,b){p(a,function(a){return!b(a)})}var d=b.getElementsByTagName("head")[0],e={},f={},g={},h={},i="string",j=!1,k="push",l="DOMContentLoaded",m="readyState",n="addEventListener",o="onreadystatechange",p=function(a,b){for(var c=0,d=a.length;c<d;++c)if(!b(a[c]))return j;return 1};!b[m]&&b[n]&&(b[n](l,function r(){b.removeEventListener(l,r,j),b[m]="complete"},j),b[m]="loading");var s=function(a,b,d){function o(){if(!--m){e[l]=1,j&&j();for(var a in g)p(a.split("|"),n)&&!q(g[a],n)&&(g[a]=[])}}function n(a){return a.call?a():e[a]}a=a[k]?a:[a];var i=b&&b.call,j=i?b:d,l=i?a.join(""):b,m=a.length;c(function(){q(a,function(a){h[a]?(l&&(f[l]=1),o()):(h[a]=1,l&&(f[l]=1),t(s.path?s.path+a+".js":a,o))})},0);return s};s.get=t,s.ready=function(a,b,c){a=a[k]?a:[a];var d=[];!q(a,function(a){e[a]||d[k](a)})&&p(a,function(a){return e[a]})?b():!function(a){g[a]=g[a]||[],g[a][k](b),c&&c(d)}(a.join("|"));return s};var u=a.$script;s.noConflict=function(){a.$script=u;return this},typeof module!="undefined"&&module.exports?module.exports=s:a.$script=s}(this,document,setTimeout)
34+
35+
36+
var dev = true;
37+
var ext = (dev) ? '?now=' + new Date().getTime() : '';
38+
39+
// load all of the dependencies asynchronously.
40+
$script([
41+
'lib/less/less-1.4.1.min.js',
42+
'lib/jquery/jquery-1.8.3.min.js'
43+
], function() {
44+
$script([
45+
'../twitter-bootstrap/js/bootstrap.min.js',
46+
'lib/colorpicker/bootstrap-colorpicker.js'
47+
], function() {
48+
$script([
49+
'lib/angular/angular.js',
50+
'js/app.js' + ext,
51+
'js/services.js' + ext,
52+
'js/controllers.js' + ext,
53+
'js/filters.js' + ext,
54+
'js/directives.js' + ext
55+
], function() {
56+
// when all is done, execute bootstrap angular application
57+
angular.bootstrap(document, ['bootstrapVariablesEditor']);
58+
});
59+
});
60+
});
61+
62+
63+
</script>
64+
<title>Bootstrap Magic : Generate simply your own bootstrap 3.1 theme </title>
65+
<meta name="description" content="Awesome features like contextual typeahead and colorpicker to make smooth bootstrap 3.1 theme faster." />
66+
<link id="twitterBootstrapLess" rel="stylesheet/less" href="../twitter-bootstrap/less/bootstrap.less">
67+
<!-- <link id="twitterResponsiveLess" rel="stylesheet/less" href="../twitter-bootstrap/less/responsive.less"> -->
68+
69+
70+
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
71+
<script>
72+
WebFont.load({
73+
google: {
74+
families: ['Droid Sans', 'Droid Serif']
75+
}
76+
});
77+
</script>
78+
79+
80+
<script type="text/javascript">
81+
82+
var _gaq = _gaq || [];
83+
_gaq.push(['_setAccount', 'UA-37710723-1']);
84+
_gaq.push(['_trackPageview']);
85+
86+
(function() {
87+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
88+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
89+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
90+
})();
91+
92+
</script>
93+
</head>
94+
<body data-ng-cloak>
95+
<div class="protected">
96+
<nav class="navbar navbar-default" role="navigation">
97+
<!-- Brand and toggle get grouped for better mobile display -->
98+
<div class="navbar-header">
99+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
100+
<span class="sr-only">Toggle navigation</span>
101+
<span class="icon-bar"></span>
102+
<span class="icon-bar"></span>
103+
<span class="icon-bar"></span>
104+
</button>
105+
<a class="navbar-brand" href="../index.html" title="Bootrstrap Magic written in AngularJS">Bootstrap Magic</a>
106+
</div>
107+
108+
<!-- Collect the nav links, forms, and other content for toggling -->
109+
<div class="collapse navbar-collapse navbar-ex1-collapse">
110+
<ul class="nav navbar-nav">
111+
<li><a href="../index.html" title="bootstrap 3.1 themes generator presentation">Home</a></li>
112+
<li class="dropdown">
113+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Editor <b class="caret"></b></a>
114+
<ul class="dropdown-menu">
115+
<li><a href="index.html#!/editor" title="bootstrap 3.1 themes generator">Version Bootstrap 3.1</a></li>
116+
<li><a href="../3.0">Version Bootstrap 3.0</a></li>
117+
<li><a href="../2.3.2">Version Bootstrap 2.3.2</a></li>
118+
</ul>
119+
</li>
120+
<!-- <li ><a href="index.html#!/submit-theme" title="bootstrap 3.1 themes generator">Submit your theme</a></li>
121+
--> <li ><a href="http://en.orson.io/17/build-responsive-website-without-coding/?utm_source=Bootstrap%20Magic%20&utm_medium=referral&utm_content=Header&utm_campaign=Bootstrap" title="Create website easily">Website builder Orson</a></li>
122+
<!-- <li ><a href="https://medium.com/@tsifei/recrutement-stage-ux-et-webdesign-511c71815546" title="Recruit Web & UX Webdesigner in Paris">Recruit Web & UX Webdesigner in Paris</a></li>
123+
--> </ul>
124+
125+
<ul class="nav navbar-nav navbar-right socialButtons">
126+
<li class="twitter">
127+
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://pikock.github.io/bootstrap-magic/" data-text="Bootstrap Magic feat Bootstrap 3.1 : Awesome theme generator with live preview" data-lang="en" data-hashtags="bootstrap, angularjs">Tweeter</a>
128+
</li>
129+
<li>
130+
<div class="fb-like" data-href="http://pikock.github.io/bootstrap-magic/" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false" data-action="like"></div>
131+
</li>
132+
133+
<li><div class="g-plusone" data-size="medium" data-href="http://pikock.github.io/bootstrap-magic/"></div></li>
134+
</ul>
135+
136+
</div><!-- /.navbar-collapse -->
137+
</nav>
138+
</div>
139+
140+
<div class="protected">
141+
<div class="isViewLoading" ng-show="isViewLoading">
142+
<h1>It's gonna be magic... wait for it...</h1>
143+
<div class="loader">
144+
<div class="bar1"></div>
145+
<div class="bar2"></div>
146+
<div class="bar3"></div>
147+
<div class="bar4"></div>
148+
<div class="bar5"></div>
149+
<div class="bar6"></div>
150+
<div class="bar7"></div>
151+
<div class="bar8"></div>
152+
</div>
153+
</div>
154+
</div>
155+
156+
<div ng-view></div>
157+
158+
<div id="fb-root"></div>
159+
<script type="text/javascript">
160+
(function(d, s, id) {
161+
var js, fjs = d.getElementsByTagName(s)[0];
162+
if (d.getElementById(id)) return;
163+
js = d.createElement(s); js.id = id;
164+
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=239545502808545";
165+
fjs.parentNode.insertBefore(js, fjs);
166+
}(document, 'script', 'facebook-jssdk'));
167+
168+
window.___gcfg = {lang: 'fr'};
169+
170+
(function() {
171+
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
172+
po.src = 'https://apis.google.com/js/plusone.js';
173+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
174+
})();
175+
176+
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
177+
</script>
178+
<script type="text/javascript">
179+
/* <![CDATA[ */
180+
var google_conversion_id = 977336662;
181+
var google_custom_params = window.google_tag_params;
182+
var google_remarketing_only = true;
183+
/* ]]> */
184+
</script>
185+
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
186+
</script>
187+
<noscript>
188+
<div style="display:inline;">
189+
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/977336662/?value=0&amp;guid=ON&amp;script=0"/>
190+
</div>
191+
</noscript>
192+
</body>
193+
</html>

3.1/js/app.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
'use strict';
2+
3+
// Declare app level module which depends on filters, and services
4+
angular.module('bootstrapVariablesEditor', ['bootstrapVariablesEditor.filters', 'bootstrapVariablesEditor.services', 'bootstrapVariablesEditor.directives']).
5+
config(['$locationProvider','$routeProvider', function($locationProvider,$routeProvider) {
6+
$locationProvider.hashPrefix('!');
7+
//$routeProvider.when('/intro', {templateUrl: 'partials/intro.html', controller: IntroCtrl});
8+
$routeProvider.when('/editor', {templateUrl: 'partials/editor.html', controller: LessCtrl});
9+
$routeProvider.when('/create-website-pikock', {templateUrl: 'partials/create-website-pikock.html', controller: PageCtrl});
10+
$routeProvider.when('/submit-theme', {templateUrl: 'partials/submit-theme.html', controller: PageCtrl});
11+
$routeProvider.otherwise({redirectTo: '/editor'});
12+
}]);

3.1/js/controllers.js

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
/* Controllers */
2+
3+
function LessCtrl($scope, $http, ap_less, $timeout) {
4+
5+
$scope.variables = {};
6+
$scope.fonts = {};
7+
var initLessVariables = function () {
8+
$http.get('less/variables.json').success(function(data) {
9+
10+
if (window.localStorage) {
11+
for (var key in window.localStorage) {
12+
var url = "http://pikock.github.io/bootstrap-magic/twitter-bootstrap/less/bootstrap.less:timestamp"
13+
if (key == url) {
14+
delete window.localStorage[key];
15+
};
16+
}
17+
};
18+
19+
$scope.variables = data;
20+
$timeout(function() {
21+
$scope.applyLess(false);
22+
},0);
23+
$timeout(function() {
24+
// move into a service
25+
var keys = ap_less.getKeys($scope);
26+
var icons = ap_less.getUrls();
27+
var font = ap_less.getFonts();
28+
$timeout(function() {
29+
var $colorpicker = $('.colorpicker');
30+
$colorpicker.colorpicker().on('changeColor', function(ev){
31+
var scope = angular.element(this).scope();
32+
scope.variable.value = ev.color.toHex();
33+
34+
$timeout(function() {
35+
if ($scope.autoapplyless){
36+
$scope.autoApplyLess();
37+
}
38+
}, 500);
39+
40+
});
41+
42+
$('.lessVariable').each( function(index){
43+
var scope = angular.element(this).scope();
44+
switch ( scope.variable.type ) {
45+
case 'icons':
46+
var src = icons;
47+
break;
48+
49+
case 'font':
50+
var src = font;
51+
break;
52+
53+
case 'color':
54+
default:
55+
var src = keys;
56+
57+
}
58+
$(this).typeahead({
59+
source: src,
60+
updater: function (item) {
61+
scope.variable.value = item;
62+
return item;
63+
}
64+
});
65+
});
66+
67+
},0);
68+
},0);
69+
});
70+
};
71+
initLessVariables();
72+
73+
$scope.autoapplyless = false;
74+
75+
$scope.autoApplyLess = function (event) {
76+
if ($scope.autoapplyless){
77+
var vars = ap_less.getVariables($scope, false);
78+
less.modifyVars(vars.variables);
79+
80+
WebFont.load({
81+
google: {
82+
families: vars.fonts
83+
}
84+
});
85+
}
86+
};
87+
88+
$scope.applyLess = function (applyAll) {
89+
var vars = ap_less.getVariables($scope, applyAll);
90+
less.modifyVars(vars.variables);
91+
92+
WebFont.load({
93+
google: {
94+
families: vars.fonts
95+
}
96+
});
97+
};
98+
99+
$scope.colorpicker = function(type) {
100+
return (type == 'color') ? true : false;
101+
}
102+
103+
$scope.color = function(type, value) {
104+
return (type == 'color' && /^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(value) ) ? value : '#ffffff';
105+
}
106+
107+
$scope.$on('applyLess', function() {
108+
$scope.applyLess();
109+
});
110+
111+
$scope.setIsViewLoading = function(val) {
112+
$scope.isViewLoading = val;
113+
};
114+
115+
$scope.minified = false;
116+
117+
118+
$scope.saveCSS = function() {
119+
// $scope.isViewLoading = true;
120+
ap_less.saveCSS($scope);
121+
// $scope.isViewLoading = false;
122+
}
123+
124+
$scope.saveLessVariables = function () {
125+
ap_less.saveLessVar(ap_less.getVariablesToString($scope));
126+
};
127+
128+
$scope.resetLessVariables = function () {
129+
initLessVariables();
130+
setTimeout(function() {
131+
$scope.applyLess();
132+
},0);
133+
};
134+
135+
$scope.importLessVariables= function (string) {
136+
$scope = ap_less.importVariables($scope, string);
137+
$scope.applyLess();
138+
};
139+
140+
$scope.upDateValue = function () {
141+
        
142+
    };
143+
144+
$scope.isViewLoading = false;
145+
146+
$scope.$on('$routeChangeStart', function() {
147+
$scope.isViewLoading = true;
148+
});
149+
150+
$scope.$on('$routeChangeSuccess', function() {
151+
$scope.isViewLoading = false;
152+
});
153+
154+
$scope.getGroupUrl = function() {
155+
return 'preview/' + angular.lowercase(this.group.name).replace(/[^\w ]+/g,'').replace(/ +/g,'-') + '.html';
156+
};
157+
158+
}
159+
LessCtrl.$inject = ['$scope', '$http', 'ap_less', '$timeout'];
160+
161+
function PageCtrl($scope, $http, ap_less) {
162+
}
163+
PageCtrl.$inject = ['$scope', '$http', 'ap_less'];
File renamed without changes.

0 commit comments

Comments
 (0)