thomaspark / bootswatch Goto Github PK
View Code? Open in Web Editor NEWThemes for Bootstrap
Home Page: https://bootswatch.com
License: MIT License
Themes for Bootstrap
Home Page: https://bootswatch.com
License: MIT License
On slate theme, the uneditable inputs are unreadable.
Possible fix:
.uneditable-input, input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
color: #fff
}
On Cerulean, <tr class="info">
and <tr class="warning">
both give a blue color. I expected the warning one to be orangeish instead. The Cerulean previews on http://bootswatch.com/cerulean/ doesnt show this because no colored trs are used but it does show all other 'warning' classes to be orange :)
The background gradient does not continue, it only covers the body region in latest Google Chrome or Firefox. A sample screenshot is: http://img585.imageshack.us/img585/751/screenshotfrom201204300.png
The box representing the buttons is the same size, only the interior text changes.
This only happens in amelia; spacelab, spruce, journal, etc. all work as expected.
Also recommend adding btn-small etc. to the preview so problems like this are obvious in the future.
Reason I ask...
I was working with the journal theme before the redo of that theme when it was using opensans font from google etc.
Anyway I can get the last commit of the variables.less and bootswatch.less files for that version of the journal theme?
Thanks,
Scott
Hi,
using Safari 5.1.3 on OSX 10.7.3, whenever I use any Chinese input method to input text into a text field or text area, the browser freezes for about 1 second and automatically refreshes. This problem doesn't occur with any other browser and neither does it affect bootstrap.
You can reproduce this bug by going to System Preferences->Language & Text->Input Sources, checking "Chinese - Traditional", selecting the "Pinyin - Traditional" input method and trying to enter any text on any bootswatch site.
I think the drop-shadow on the broadcrumb li is intended for dark on light themes so looks odd on the darker background of cyborg. I checked a couple of the other dark backgrounds (slate and superhero) and they both override it.
.btn-mini is on line 424 and .btn is overriding it on line 740. Those seem to be out of order?
The swatch pull down download links seem to always download the minified version only, no matter what you select.
Mac on Chrome.
Cheers, Mirko
I saw this issue closed, and wanted to bring your attention to it once agian:
Requesting stuff from https://fonts.googleapis.com/ is very slow, especially with SSL enabled - perhaps we should consider adding the fonts into the Git repo so that they can be served from the local server?
Its not just that, its also a security hazard, as far as I understand.
Can you perhaps post a howto for newbies on how to get rid of google's fonts and serve them locally?
Thanks.
Compiling Slate from less with the PHP less compiler throws an error on the following:
.box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5);
Adding a second closing bracket seems to fix it. It happens on both line 498 and 509 of bootswatch.less.
Hi,
I've tried to build bootstrap.css with Spacelab theme and Font Awesome using less files and I had issue since variables.less from Spacelab theme was missing required variable @horizontalComponentOffset.
After copying it from original bootstrap variables.less it lessc compiled it, missing line:
// Horizontal forms & lists
// -------------------------
@horizontalComponentOffset: 180px;
I get the feeling this might be a stupid question, but how much padding-top on the body element are the bootswatches designed for when using a fixed navbar?
The internet in general seems to suggest 60px is the standard amount, often citing Bootstrap's examples as a source, but the current Bootstrap docs have the slightly vaguer advice of "remember to account for the hidden area underneath it by adding at least 40px padding to the body."
I presume this support is in the works - but I know how fun ticking off an issue on the list is :)
Mark has decided to do away with everything .subnav in the official Bootstrap [1], but I'm hoping Bootswatch will continue to support it. Please say it'll be so?
Hi - bootswatch is very cool.
Poking around a bit with different themes, I notice that modal headers don't show up, because both the text and the modal bg will be white.
Repro:
http://twitter.github.com/bootstrap/javascript.html#modals
You won't see the content in the h3 unless you select it due to:
h3 {
color: #ffffff;
}
and
.modal {
background-color: #ffffff
}
.modal-header h3 {
color: #000000;
}
I downloaded the simplex.less
theme and associated variables.less
.
I imported the variables using @import "variables.less";
on the first line inside simplex.less.
Then I ran lessc on the file (I made no modifications whatsoever):
C:\work\tests\>lessc simplex.less > simplex.css
NameError: .box-shadow is undefined in C:\work\tests\simplex.less:21:1
20 .navbar .navbar-inner {
21 .box-shadow(inset 0 -1px #CFCACA);
22 border-bottom: 1px solid #FFF;
// Bootswatch.less
// Swatch: Simplex
// Version: 2.0.3
lessc 1.3.0 (LESS Compiler) [JavaScript]
Any ideas?
Hello,
I was looking at the theme Cerulean - The bootstrap.CSS related to that specific theme:
How different is it from the default bootstrap.css ?
I'm trying to understand what will be actually different from default bootstrap.css
Just the colors and typography ?
or
The actual layout and structure will be modified as well ?
And lastly:
Is the theme supported in IE 7 + ?
Thanks!
.subnav-fixed is not defined in bootswatch.less, but it's in bootswatch.css. Same for a bunch of different styles.
Can we please get all styles included inside the .less files?
Requesting stuff from https://fonts.googleapis.com/ is very slow, especially with SSL enabled - perhaps we should consider adding the fonts into the Git repo so that they can be served from the local server?
On IE8, Cerulean and United display a 'white block' when the mouse is hovering over a navbar item. This does not happen with some other themes I looked at, those work as expected.
See http://imgur.com/xCCJr for a screenhost where my mouse is hovering over the News item on the http://bootswatch.com/cerulean/ page.
Additionally I noticed there's no special coloring of active navbar items for Cerulean and United, again unlike the other themes I looked at. But this is less of an issue. Note: the exception for this is the inverted United navbar, that one does display a special active coloring (but does have the hover issue).
PS: thanks for Bootswatch, it's great :)
I'm seeing:
lessc ./swatchmaker.less > swatch/bootstrap.css
TypeError: Cannot call method 'charAt' of undefined
at getLocation (/usr/local/lib/node_modules/less/lib/less/parser.js:212:34)
at new LessError (/usr/local/lib/node_modules/less/lib/less/parser.js:221:19)
at Object.toCSS (/usr/local/lib/node_modules/less/lib/less/parser.js:385:31)
at /usr/local/lib/node_modules/less/bin/lessc:107:28
at /usr/local/lib/node_modules/less/lib/less/parser.js:434:40
at /usr/local/lib/node_modules/less/lib/less/parser.js:94:48
at /usr/local/lib/node_modules/less/lib/less/index.js:116:17
at Object.parse (/usr/local/lib/node_modules/less/lib/less/parser.js:436:17)
at /usr/local/lib/node_modules/less/lib/less/index.js:115:16
at [object Object].<anonymous> (fs.js:115:5)
When trying to build with LESS version: lessc 1.3.0 (LESS Compiler) [JavaScript]
This seems related but no resolution yet: less/less.js#592
Any suggestions appreciated!
Thanks a lot !
If you use the United theme on this example: http://twitter.github.com/bootstrap/examples/fluid.html, the link with the username is the same color as the background so you can't see it.
The link is inside the navbar:
Logged in as username
This was originally a specific bug, but it seems it applies to many of the themes.
Bootstrap docs suggest that you can use either 'a' tags (possibly with javascript to deactivate clicks) or 'span' tags for pagination links that are currently active or disabled. But several of the Bootswatch themes behave oddly when you do that.
Specific cases I've noticed:
active link in simplex
active and disabled links in slate
active and disabled links in spruce
active and disabled links in spacelab
active and disabled links in cyborg
but there may be more,
The select's readable theme aren't right. Why are their text so "down"?
The bootswatch themes from the download are missing the new media object
Sometimes when I click on one of the subnav items in the previews, the highlighted subnav item is the one prior to the one I click on.
For example, if I go to http://bootswatch.com/spacelab/ and click "Forms", sometimes "Buttons" will be highlighted instead. If I scroll down, "Forms" then becomes highlighted.
Here's a screenshot showing this bug after clicking "Forms":
(http://i.imgur.com/zJ9de.png)
I am using Google Chrome 21.0.1180.89 on Windows 7 x64.
In the model Ameila, the texts are and background is white
In the large commit updating to 2.0.2, Slate seems to have lost its body background. Noticed while converting it for bootswatch-rails. :) Tried it, background is white.
Please define .nav > li.active > a
to enable subnav scrollspy/magellan on Amelia and Cosmo themes?
For amelia/bootswatch.less, all that's needed is to change this:
.nav > .active > a:hover,
.nav > li > a:hover,
.nav > li.active > a:hover, {
border-right-color: transparent;
background-color: rgba(255, 255, 255, 0.4);
color: @textColor;
}
to this:
.nav > .active > a:hover,
.nav > li > a:hover,
.nav > li.active > a,
.nav > li.active > a:hover, {
border-right-color: transparent;
background-color: rgba(255, 255, 255, 0.4);
color: @textColor;
}
It's already defined in the rest of them, except Journal, which I believe is purposeful, since it doesn't have any :hover effects on its subnav at all.
For the combination Ceruleum theme & IE 8, Navbar collapse does not work (it works fine with Chrome...).
The fix is set overflow property:
.nav-collapse.collapse {
height: auto;
overflow: visible;
}
The pagination in Readable is squashed vertically.
If you take away the rule setting the top and bottom padding to 0px and the line-height of .8em then it looks like all the rest. If you just add back the padding rule, but leave out the line-height of .8em then it looks different (shorter vertically) but more visually pleasing (to me) than the current look.
It would be great to style the background of, e.g. form fields, too. The default white is too bright, especially on dark schemes like cyborg.
After that change this would be a great starting point for people who want to create dark or more fancy color schemes with bootstrap, especially until upstream starts to fix those hardcoded values.
I'm using https://github.com/seyhunak/twitter-bootstrap-rails
and would like to use less so I can use the variables etc.
I've tried importing variables.less and bootswatch.less sort of like this
# bootstrap_and_overrides.css.less
@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";
@import "bootswatch/variables";
@import "bootswatch/bootswatch";
But I get variable @textColor is undefined
when running rake assets:precompile
. Any ideas? Thanks!
Seems like the fix for this bootstrap issue hasn't been applied to (at least) Cerulean. Instead an active dropdown nav item is highlighted as active only when the mouse hovers over it.
Any plans for migrating to Bootstrap 2.1.0 in the near future?
Please update the @import'ed google fonts in Bootswatch themes to use https instead of http to avoid unsecure content warnings on ssl sites. Thanks!
http://fortawesome.github.com/Font-Awesome/
is a great set of icons compatible with Twitter Bootstrap. Could you please embed the icon set as default one ?
Why are there rgba
calls with a color value of 256 in the various bootswatch.less
files ? Something in the Rails asset pipeline thinks this is wrong and stop the asset precompilation with the following message :
Color value 256 must be between 0 and 255 inclusive for `rgba'
By the way, thanks a lot for this project, this is an awesome resource.
I am facing this issue since today morning. When I hit Bootswatch API link http://simplejsonp.nodester.com/bootswatch/ I am not getting any response.
Can anyone please help me on this?
I'm running rails 3.2 with the twitter-bootstrap-rails gem and I get lots of undefined variables when I try to add a bootswatch. Like this:
https://skitch.com/leemcalilly/8shdw/work-senior-living-jsr-associates
Bootstrap itself is working fine.
When I decrease the width of the window and view the menus, there appears to be an extra arrow image, which is confusing. This happens on many of the themes, including Cerulean and Spacelab.
I have uploaded a screenshot with the relevant section circled here: http://i.imgur.com/9xbzJ.png
I am using Google Chrome 21.0.1180.89 on Windows 7 x64.
This also appears to happen on the http://www.bootswatch.com/ site.
so in the css file the icon path are something like below:
.icon-white {
background-image: url("../img/glyphicons-halflings-white.png");
}
where can I get this images?
See http://twitter.github.com/bower/
With Bower, someone could install the Bootswatch package and then include components/bootswatch/THEME_NAME.min.css
in their HTML files.
The landing page for Bootswatch says you only support 2.0.3. I'd love to see support for 2.0.4. I doubt much (if anything) would need to change. Probably just recompile your full bootstrap files so they are based on 2.0.4.
Slate have some issues with pagination. Border probably should not be white and there is some strange rollover effect ('a' element is getting border-left-width: 1px; when :hover)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.