pikock/bootstrap-magic

Bootstrap themes generator made with AngularJS

bootstrap-magic's Issues

Live preview not working in some browsers

1. Navigate to: https://pikock.github.io/bootstrap-magic/app/index.html#!/editor
2. Change the colour code in the @gray-dark field, e.g. to #c0ffee
3. Click the red Apply button at the bottom of the screen

Expected Behavior:
The main text in the right preview pane should turn a hard-to-read aqua colour.

Actual Behavior:
Nothing - the preview is unchanged. Seems to happen in the latest Firefox, Chrome and Opera.

More comments here: https://webcompat.com/issues/513

Unable to import from CSS exported from bootstrap-magic

Why are we unable to import CSS that was exported from this project? If we can re-import the SCSS variables, why not import the whole CSS?

Support for SASS

I think now that bootstrap supports SASS as well as LESS it would be a nice addition to support the same here.

Support for Stylus CSS

It would be nice if bootstrap-magic also supported saving edits in Stylus (http://learnboost.github.io/stylus/) as well as LESS format.

Allow custom LESS to be included

The scenario is we have some custom LESS widget code that we would like to be included in magic's compile situation, preferably tagged on the end.

The LESS variables work well for passing in our colours but we would want these applied also to our custom widget LESS code and it also merged into the CSS output file.

Need to fix grammar and syntax errors.

There are mistakes in the (English) text presented to the user. Some of the language could be clearer and stronger.

Navbar Inverted Missing

Thanks you so much, this is save my life
But where for customizing inverted/inverse state
http://getbootstrap.com/components/#navbar-inverted

Regards

Version 3.1 Editor error @screen-md-min is undefined does not update

Error: variable @screen-md-min is undefined
Error
at new r.Parser (less-1.4.1.min.js:9)
at Object.r.modifyVars (less-1.4.1.min.js:11)
at Object.LessCtrl.$scope.applyLess (controllers.js?now=1440607013712:90)
at elementFns (angular.js:6201)
at angular.js:12849
at Object.$get.Scope.$eval (angular.js:7875)
at Object.$get.Scope.$apply (angular.js:7955)
at HTMLButtonElement. (angular.js:12848)
at HTMLButtonElement.v.event.dispatch (jquery-1.8.3.min.js:2)
at HTMLButtonElement.v.event.add.o.handle.u (jquery-1.8.3.min.js:2)(anonymous function) @ angular.js:5590$get @ angular.js:4681$get.Scope.$apply @ angular.js:7957(anonymous function) @ angular.js:12848v.event.dispatch @ jquery-1.8.3.min.js:2v.event.add.o.handle.u @ jquery-1.8.3.min.js:2

Responsive navbar not displayed.

I'm a newbie of bootstrap-magic.
I think that it's a great theme generator.
I tried test it.
And I found a little bug that theme's responsive navbar not displayed.
I compared with a original theme and found what we missed.

We should put code below.

@media screen and (min-width:768px){.navbar-brand{float:left;max-width:none;margin-right:5px;margin-left:-15px}.navbar-nav{float:left;margin-top:0;margin-bottom:0}.navbar-nav>li{float:left}.navbar-nav>li>a{border-radius:0}.navbar-nav.pull-right{width:auto}.navbar-toggle{position:relative;top:auto;left:auto;display:none}.nav-collapse.collapse{display:block!important;height:auto!important;overflow:visible!important}}

Before

@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808} .navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#999}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus{color:#fff;background-color:transparent} .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus{color:#fff;background-color:#080808} .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus{color:#444;background-color:transparent}}

Entering the color manually doesn't reflect the color in the colorpicker

If you enter a color manually, it doesn't reflect the color on the right and on the colorpicker.

box-shadows cannot be customized / removed

I'm not sure bootstrap allows you to customize this value (after a glance on their customize page, you apparently can't) but it would be great if bootstrap-magic would allow you to.

I know we can simply add one more class which can override the shadow, but sometimes when you work with backend developers that don't care much about aesthetics, they can forget to add it. So a 'base override' would be very beneficial.

catch and display errors

When mistyping some color name or function, I get no visible error message. Instead, functionality stops working without a trace about what's wrong.

Please mark the invalid input red and scroll to it.

This was the reason for issues #4 and #6.

modifying @inputBackground does not change anything

When modifying @inputBackground, the input's backgrounds do not change after importing http://p.cweiske.de/43/raw/bootstrap.less.txt

Page reloads when "Saving LESS"

This doesn't happen often but sometimes clicking on the save less button will reload the page causing all changes to be lost. This is very frustrating since time can be easily wasted.

Upgrade to Bootstrap 3.0

It would be awesome to see this project improved to support the new Bootstrap 3.0

Live Preview appears to be broken

I don't appear to be seeing the changes I'm making in real time. I'm on Chrome OSX

Incorporate bootstrap-magic as part of an interactive style guide

Hey,

Love me some bootstrap magic. I'm in the process of creating an interactive style guide for our web apps. This style guide covers the ins-and-outs of our bootstrap 3 based themes plus our own custom snippets/components and brand/marketing related 'stuff'.

I incorporated bootstrap magic as a configuration tool for our themes, modifying the basic things (the json defaults and such). I thought it would be pretty cool to create an open source project for others to build their own interactive style guide for bootstrap 3 with their own theme(s) and various customizations.

I'm fine forking this to open it up or contributing to bootstrap-magic, but I'm curious what you guys think of the idea too.

Host the POST method on my own server

Hello, I need help. the current app does a post method to http://bootstrapmagics-pikock.dotcloud.com when clicking on the [Save CSS] or [Save Less Variables] button.

services.js (LINE 212 & 245):
var $form = $('<form>').attr('method', 'POST').attr('action', 'http://bootstrapmagics-pikock.dotcloud.com/').

Is there any way to have this post method hosted on my own server? there's usually a server-side processing form in PHP/ASP, which is not included in the project.

Pressing enter on any field causes a form to be submitted

Looks like that there is a form somewhere asking for a email address if you press enter on any field

Export variables should export custom variables

Export variables should export custom variables (not default)

"save css" button does not work

Does not work in Opera and Chromium after importing http://p.cweiske.de/43/raw/bootstrap.less.txt (which was generated with "save less")

No Preview after importing less variables

Styles are not applied after importing previously saved less variables. (Clicking the "Apply" button and/or checking the "Auto" checkbox does not work.)

Text disappear when changing the style of alerts

When I change the "state-success-text" to something like #fff, I'm not able to read the text for eg "input with success". Also the border of the input is not visible anymore. I've attached a screenshot which makes it more clear I think.

Maybe an extra option to set the color of "input with * " and the other text?

Use Bootstrap-3

Twitter Bootstrap 2.3.2 - Save not possible

No Application Configured
This domain is not associated with an application.

download file does not generate less or CSS

I downloaded the application but from not let me save the local variables in css or save less. I have seen leads me to form http://bootstrapmagic.pikock.com/ and I .less not generate the file or css. Why??

I am expanding our application to SASS

help! 👍

"variable @grid-gutter-width is undefined" in local domain on Google Chrome

Experiencing this issue using Version 30.0.1599.66 of Google Chrome on Ubuntu 12.04. Have not been able to test other versions of Google Chrome/Ubuntu.

This appears to be working fine for Firefox 24.0 on Ubuntu 12.04 using the local domain
.
This appears to be working fine for Opera 12.15 on Ubuntu 12.04 using the local domain.

I can use either of the above alternatives if needed, but they perform noticably slower than Google Chrome ( when comparing http://pikock.github.io/bootstrap-magic/app/index.html#!/editor which works on Google Chrome )

I cloned https://github.com/pikock/bootstrap-magic.git , and my console is reporting:

"variable @grid-gutter-width is undefined" , which is used in @navbar-padding-horizontal's default value.

Every subsequent change I make reports the error with no change to the style.

If I change the value of @navbar-padding-horizontal to almost anything, the page is then rendered without errors, but looks as though it's missing all of it's styling.

Lastly, everything works as expected when using the tool online at http://pikock.github.io/bootstrap-magic/app/index.html#!/editor via the same browser, I was looking to have a local copy for when I don't have Internet access, so that I could still do some of this type of work.

variables break color preview

When using a variable as variable, e.g. @thirdBrandColor in @btnBackground, the "preview" area right of the color name input field stays white, even if my third brand color is not white.

[Feature Request] Disable some components which require Javascript

Salut Orson!

I would like to save a CSS without Javascript components – alerts, buttons, carousel, collapses, dropdowns, modals, nav, navbar, progress bars, scrollspy, tabs, tooltips for keeping the site quicker and [with Javascript disabled by the user].

Disregard

Nvm.

Not able to import LESS variables

Having some issues importing LESS variables.

When in Chrome or IE (lets just forget IE here, it isnt important), and I click "import" after pasting the variables into the modal text area, the tab crashes and I'm forced to force quit Chrome.

When in other browsers, Safari, Opera, Firefox, pressing "import" works fine, and the variables are placed into the relevant places in the app. However when I click "apply" the changes are not applied. The same goes for if I select "auto" before I import the LESS variables.

Oddly, if I then alter one of the variables manually and then click apply that change is applied, but no others are.

Any ideas would be greatly appreciated here, thanks for building such an awesome tool!

import issue

When importing variables from a previous session, they seem to be applied to the content, but not to the form fields.

In this screenshot, after import you'll notice that the @link-color is set to @brand-info, but the brand-info field is still the original light blue while the example links are the purple I imported.

Importing LESS issue

At some point the importer will not work.

See my example below. I can't find any obvious issue why it wont import.

///////////////////////////////////////////////////////////////////////////////
magic-bootstrap.less
///////////////////////////////////////////////////////////////////////////////

/*

• pikock http://www.pikock.com/ , autreplanete http://www.autreplanete.com/

**/

// Grays

@gray-darker: #222222;

@gray-dark: #35363a;

@gray: #555555;

@Gray-Light: #999999;

@gray-lighter: #f2f2f2;

// Brand Colors

@brand-primary: #cc181e;

@brand-success: #39b54a;

@brand-warning: #f25d18;

@brand-danger: #ffd101;

@brand-info: #5bc0de;

// Scaffolding

@body-bg: #111111;

@text-color: @gray-lighter;

@link-color: @brand-primary;

@link-hover-color: darken(@link-color, 15%);

@padding-base-vertical: 6px;

@padding-base-horizontal: 12px;

@padding-large-vertical: 10px;

@padding-large-horizontal: 16px;

@padding-small-vertical: 5px;

@padding-small-horizontal: 10px;

@border-radius-base: 8px;

@border-radius-large: 12px;

@border-radius-small: 4px;

@line-height-large: 1.33;

@line-height-small: 1.5;

@component-active-bg: @brand-primary;

// Typography

@font-family-sans-serif: Arial;

@font-family-serif: PT Serif;

@font-family-monospace: Monaco;

@font-family-base: @font-family-sans-serif;

@font-size-base: 16px;

@font-size-large: ceil(@font-size-base * 1.25);

@font-size-small: ceil(@font-size-base * 0.85);

@line-height-base: 1.428571429;

@line-height-computed: floor(@font-size-base * @line-height-base);

@headings-font-family: @font-family-base;

@headings-font-weight: bold;

@headings-line-height: 1.1;

// Buttons

@btn-font-weight: normal;

@btn-default-color: @gray-lighter;

@btn-default-bg: @gray-dark;

@btn-default-border: darken(@gray,5%);

@btn-primary-color: @gray-lighten;

@btn-primary-bg: @brand-primary;

@btn-primary-border: darken(@btn-primary-bg, 5%);

@btn-success-color: #fff;

@btn-success-bg: @brand-success;

@btn-success-border: darken(@btn-success-bg, 5%);

@btn-warning-color: #fff;

@btn-warning-bg: @brand-warning;

@btn-warning-border: darken(@btn-warning-bg, 5%);

@btn-danger-color: #000;

@btn-danger-bg: @brand-danger;

@btn-danger-border: darken(@btn-danger-bg, 5%);

@btn-info-color: @gray-lighter;

@btn-info-bg: @brand-info;

@btn-info-border: darken(@btn-info-bg, 5%);

@btn-link-disabled-color: @Gray-Light;

// Dropdowns

@dropdown-bg: rgba(53,54,58,.60);

@dropdown-border: rgba(53,54,58,.75);

@dropdown-divider-bg: @gray-darker;

@dropdown-link-active-color: #fff;

@dropdown-link-active-bg: @component-active-bg;

@dropdown-link-color: @gray-lighter;

@dropdown-link-hover-color: #fff;

@dropdown-link-hover-bg: darken(@dropdown-link-active-bg, 10%);

@dropdown-link-disabled-color: @gray-dark;

@dropdown-header-color: @gray;

@dropdown-caret-color: @brand-primary;

// Forms

@input-bg: @gray-dark;

@input-bg-disabled: @gray-darker;

@input-color: @gray-lighter;

@input-border: @gray-dark;

@input-border-radius: @border-radius-base;

@input-color-placeholder: @Gray-Light;

@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);

@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);

@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);

@legend-color: @gray-dark;

@legend-border-color: #e5e5e5;

@input-group-addon-bg: @gray-darker;

@input-group-addon-border-color: @input-border;

// Table

@table-cell-padding: 8px;

@table-condensed-cell-padding: 5px;

@table-cell-padding: 8px;

@table-condensed-cell-padding: 5px;

@table-bg: rgba(53,54,58,.25);

@table-bg-accent: darken(@gray-dark, 5%);

@table-bg-hover: rgba(53,54,58,.50);

@table-bg-active: @table-bg-hover;

@table-border-color: @gray-dark;

// Navbar

@navbar-height: 80px;

@navbar-margin-bottom: @line-height-computed;

@navbar-default-color: @gray;

@navbar-default-bg: @dropdown-bg;

@navbar-default-border: darken(@navbar-default-bg, 6.5%);

@navbar-border-radius: @border-radius-base;

@navbar-padding-horizontal: floor(@grid-gutter-width / 2);

@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);

@navbar-default-link-color: @Gray-Light;

@navbar-default-link-hover-color: @gray-lighter;

@navbar-default-link-hover-bg: @gray-dark;

@navbar-default-link-active-color: #555;

@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);

@navbar-default-link-disabled-color: @gray-dark;

@navbar-default-link-disabled-bg: transparent;

@navbar-default-brand-color: @brand-primary;

@navbar-default-brand-hover-color: @gray-lighter;

@navbar-default-brand-hover-bg: transparent;

@navbar-default-toggle-hover-bg: @gray-lighter;

@navbar-default-toggle-icon-bar-bg: @Gray-Light;

@navbar-default-toggle-border-color: @gray;

// Navs Tabs

@nav-link-padding: 10px 15px;

@nav-link-hover-bg: @gray-darker;

@nav-disabled-link-color: @gray;

@nav-disabled-link-hover-color: @gray;

@nav-tabs-border-color: @gray-dark;

@nav-tabs-link-hover-border-color: @gray-dark;

@nav-tabs-active-link-hover-bg: transparent;

@nav-tabs-active-link-hover-color: @gray-lighter;

@nav-tabs-active-link-hover-border-color: @gray-dark;

@nav-tabs-justified-link-border-color: @gray-dark;

@nav-tabs-justified-active-link-border-color: @body-bg;

@nav-pills-active-link-hover-bg: @component-active-bg;

@nav-pills-active-link-hover-color: @gray-lighter;

// Jumbotron

@jumbotron-padding: 30px;

@jumbotron-color: inherit;

@jumbotron-bg: @gray-darker;

// Pagination

@pagination-bg: #fff;

@pagination-border: #ddd;

@pagination-hover-bg: @gray-lighter;

@pagination-active-bg: @brand-primary;

@pagination-active-color: #fff;

@pagination-disabled-color: @Gray-Light;

@pager-border-radius: 15px;

@pager-disabled-color: @Gray-Light;

// Form States

@state-warning-text: #c09853;

@state-warning-bg: #fcf8e3;

@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);

@state-danger-text: @brand-primary;

@state-danger-bg: darken(@brand-primary, 25%);

@state-danger-border: darken(spin(@state-danger-bg, -10), 60%);

@state-success-text: darken(@brand-success, 15%);

@state-success-bg: lighten(@brand-success, 10%);

@state-success-border: darken(spin(@state-success-bg, -10), 5%);

@state-info-text: #3a87ad;

@state-info-bg: #d9edf7;

@state-info-border: darken(spin(@state-info-bg, -10), 7%);

// ToolTip

@tooltip-max-width: 300px;

@tooltip-color: @gray-lighter;

@tooltip-bg: @brand-primary;

@tooltip-arrow-width: 5px;

@tooltip-arrow-color: @tooltip-bg;

// Popover

@popover-bg: @gray-dark;

@popover-max-width: 300px;

@popover-border-color: rgba(0,0,0,.2);

@popover-fallback-border-color: #ccc;

@popover-title-bg: darken(@popover-bg, 20%);

@popover-arrow-width: 15px;

@popover-arrow-color: @popover-bg;

@popover-arrow-outer-width: (@popover-arrow-width + 1);

@popover-arrow-outer-color: rgba(0,0,0,.25);

@popover-arrow-outer-fallback-color: #999;

// List Group

@list-group-bg: @gray-darker;

@list-group-border: @gray-dark;

@list-group-border-radius: @border-radius-base;

@list-group-hover-bg: @gray-dark;

@list-group-active-color: @gray-lighter;

@list-group-active-bg: @component-active-bg;

@list-group-active-border: @list-group-active-bg;

@list-group-link-color: lighten(@gray, 10%);

@list-group-link-heading-color: @gray-lighter;

// Sprites

@icon-font-path: '../app/fonts/';

@icon-font-name: glyphicons-halflings-regular;

Panels missing

As per title, Bootstrap panels (introduced in the final release I believe, as they removed the accordion) are missing. Panels seem to take the primary color and are styled ok so it isn't a breaking issue.

http://getbootstrap.com/components/#panels

Cant apply modification

Hi,

I cant aply modification en all browser on OS X thet is a eror message after click on "apply"
Error: variable @grid-gutter-width is undefined

on windows not working!

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev"
npm ERR! node v6.11.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: ./node_modules/serve/bin/serve.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script './node_modules/serve/bin/serve.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the bootstrap-magic package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ./node_modules/serve/bin/serve.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs bootstrap-magic
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls bootstrap-magic
npm ERR! There is likely additional logging output above.

NavbarBackgroundhighlight is set to (wrong) hex value; should be variable

I really appreciate Bootstrap Magic. A great way to customize a Bootstrap theme.

However when I compared the value for NavbarBackgroundhighlight I noticed a difference between on the Twitter Bootstrap site and in Bootstrap Magic. On the Twitter Bootstrap site the variable @Graydark is used. Bootstrap Magic sets a value (= #ffffff) instead of using the variable.

@grid-columns is missing

I've exported the less variables, but since @grid-columns is missing, it can't be compiled.

Modal dialog and other components not stylable

All modal LESS variables are not present. Also, some components, like progress bars, inverse navbar (see #23) and panels are not stylable.

Bad numbering

In the Editor (http://pikock.github.io/bootstrap-magic/app/index.html#!/editor), the first paragraph ("How to build your theme faster ?") is numbered 1, 3, 2, ... instead of 1, 2, 3, ...

Navbar text shadow not stylable

It's not possible to style text shadow on navbar links.This is due to default Bootstrap's

text-shadow: 0 1px 0 @navbarBackgroundHighlight; in navbar.less

It would be great to have the possibility to use another color or just specify "none" for text-shadow

"reset" button missing

There should be a way to reset single values to its default state.

Errors trying to run locally

Hi,

I have downloaded the repository and I am trying to run it locally.

It seems to run ok, but I get errors, the main one being "variable @grid-gutter-width is undefined"

Here is what I am getting.

http://d.pr/i/12zzd

I am not running grunt at this stage yet. Is it needed or only for compiling?

Any help with this would be much appreciated.

Should we fork this project and maintain it there?

The project owner doesn't seems to be maintaining this.

Should we create a fork and update it to bootstrap 3 there?

style is not applied in components like navbar

Hi..I don't know if I'm doing this wrong but I've tried several times, changing de navbar color and other stuff..but when I apply the saved css to my project the navbar style is not applied although other changes as font config are applied correctly...thanks

I'm using the latest bootstrap...thanks!.....

Clicking save css does nothing on firefox

Having done the custom variables, at the end I tried saving and it does nothing on firefox.

Bootstrap v3.7.

Glyphicon Path

From Bob BELL

I'm writing about your Bootstrap Theme Generator at https://pikock.github.io/bootstrap-magic/app/index.html#!/editor What a great tool! Thank you for that. I noticed some bugs in the CSS that is generated, that I'd like to share with you, with regards to Bootstrap v3.7. 1. Some of the newer Glyphicons are missing. 2. The path to the Glyphicons folder is incorrect (assuming I place the generated CSS document in the same folder as the other bootstrap CSS files.) Here's the latest Glyphicon code from Bootstrap & the correct paths.

Ability to import previous theme

As a developer, I would like to be able to import previous theme so that I can come back and adjust values after marketing has reviewed.

Double colon

Download produces a double colon on line 361:
@badge-color:: #fff;

Move to Bootstrap 4 and SASS

Do you plan to move to Bootstrap 4 and SASS?
See: http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/