I am new to bootstrap, and I added bootstrap 3 into my project and it shrunk all the font sizes, I never had any font size specified in these classes. I thought bootstrap 3 had the default size to 14.. is there something else I need to do?
Thanks
It appears to be happening, at least as of version 3.3.6, due to this block on line 1097:
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
You can restore your font-size by adding this to your stylesheet:
html
{
font-size: 100%;
}
You can customize/override anything - if, for example, you load YOUR css file AFTER the bootstrap file, then your settings will override it. Whatever you can dream:
p {
font-size 18px;
}
and so on...
I strongly recommend digging into the source code: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
UPDATE: TO clarify, "No" you shouldn't have to do anything else. It sounds like there is another problem. The linked source code has changed since the original answer date... as of Feb 2015, it looks like this:
html {
font-size: 10px;
}
body {
font-size: 14px;
}
Assuming we've set our project up correctly, (bower install bootstrap is pretty easy)... attempting to echo text outside of the body should result in 10px text, inside body should be 14px.
If you don't see 14 point text inside the body, then something else might be stepping on it. I'd next inspect in in Chrome (for example) to confirm where the font-size was coming from.
I'd like to add that I think it's helpful to understand how these values we see in this /dist/css file are derived from less variables... the defaults should work out of the box, but you have easy control over everything, including the body text size: see http://getbootstrap.com/css/#less-variables.
Related
I have long Msg and they are the same except the last part. As you can see below - i can't tell the difference: - they are actually different.
I've open up the debugger with chrome and i saw this:
But this doesn't work on page reload as you might expect. It reverts back to 30 ch.
Question:
Where are this styles kept? So that by modifying them i always have this debugger-sidebar at 70 ch.
Or is there a better way to do this?
Node: It would be even better if i can make it resizable instead of fixed at 70 ch. But this is enough for now.
You are not alone, there is a Github issue for this.
As #Simon H pointed out this is not fixed yet . But until then - to have a resizable debugger-sidebar you can do this:
Go into:
elm-stuff/packages/elm-lang/VirtualDom/Debug.elm
Do a search for the class: .debugger-sidebar
and then add:
.debugger-sidebar {
display: block;
float: left;
width: 30ch;
height: 100%;
color: white;
background-color: rgb(61, 61, 61);
/* add this 2 lines */
overflow-x: auto;
resize: horizontal;
}
It works on save with elm-live also. But if you delete the elm-stuff folder for some reason it will get back to normal - because elm-stuff is build on the fly.
I've taken this from #rtfeldman pull-request here
Hope that helps:)
EDIT:
There has been some improvements recently (model stays open during updates.. awesome !!:D ) and stuff was moved around. If you want this:
My gif recorder only does 600px - can't record the hole thing. To change the styles:
step 1. go to:
elm-stuff/packages/elm-lang/virtual-dom/ < your version number ex 2.0.4 > /src/VirtualDom/Debug.elm - and open up Debug.elm
step 2.
Find styles function, and inside, locate:
#debugger {
width: 100%
height: 100%;
font-family: monospace;
display: flex; -- add display flex here.
}
step 3. find:
.debugger-sidebar {
display: block;
float: left;
width: 30ch;
height: 100%;
color: white;
background-color: rgb(61, 61, 61);
width: 30%; -- add this 3 lines - maybe you want more width then 30%.
overflow-x: auto;
resize: horizontal;
}
Don't delete elm-stuff folder - if you do all this steps need to be done again.
For webpack users.
And also make sure you restart webpack build after doing this - because webpack-dev-server is working form the unchanged elm-stuff folder in memory - and will not pick up this change without a restart.
As you can see at http://semantic-ui.com/usage/theming.html, there are predefined variables for each element, collection, module etc (for example button.variables: https://github.com/Semantic-Org/Semantic-UI/blob/master/src/themes/amazon/elements/button.variables).
Unfortunally, I cannot find all the possible variables for each element, module, collection etc. Is there something like a cheatsheet with all possible theme variables for Semantic-UI?
what you are actually looking for is Labeled as Definitions under the folder src.
https://github.com/Semantic-Org/Semantic-UI-Meteor-Data/tree/master/lib/semantic-ui/src/definitions
Here is an example: https://github.com/Semantic-Org/Semantic-UI-Meteor-Data/blob/master/lib/semantic-ui/src/definitions/globals/site.import.less
You can only change a few variable for each tag, for example for body:
body {
margin: 0px;
padding: 0px;
overflow-x: #pageOverflowX;
min-width: #pageMinWidth;
background: #pageBackground;
font-family: #pageFont;
font-size: #fontSize;
line-height: #lineHeight;
color: #textColor;
font-smoothing: #fontSmoothing;
}
Hope this helps you out!
Bests!
Jules
With preprocessor variables it's easy to set up one variable and manipulate it so that I can use it to set multiple properties. (demo)
While experimenting with native css variables, I noticed that I could combine them with preprocessor variables, so in the following example: (use firefox)
h1 {
--length: 40px;
#length: var(--length);
line-height: #length;
border: 5px solid tomato;
}
line-height was correctly rendered at 40px
But, when I tried to manipulate the preprocessor variable - like this:
h1 {
--length: 40px;
#length: var(--length);
#length2: #length*2;
line-height: #length;
padding: #length2;
border: 5px solid tomato;
}
... the code failed.
Is this possible somehow?
As mentioned in my comment, my understanding of CSS variables is that the variable is resolved into its actual value by the UA. This happens after the Less compiler compiles the file and thus it wouldn't be aware of what is the actual value contained by the CSS variable.
To the compiler, the value of #length is only var(--length). Since this is not a number, an error is thrown during compilation indicating that the math operation is being done on an invalid type.
OperationError: Operation on an invalid type on line 4, column 3:
One way to fix this would be to make the Less compiler output the variable name as it is and have the multiplier appended to it (like string concatenation). This would then leave the control to the UA.
But since all CSS math operations have to be given within calc() function, the entire thing has to be wrapped within it. So, the below code would work fine.
h1 {
--length: 40px;
#length: var(--length);
#length2: ~"calc(#{length} * 2)";
line-height: #length;
padding: #length2;
border: 5px solid tomato;
}
Or, even the below would be enough if --strict-math is enabled during compilation:
h1 {
--length: 40px;
#length: var(--length);
#length2: calc(#length * 2);
line-height: #length;
padding: #length2;
border: 5px solid tomato;
}
Above code when compiled produces an output similar to the one in Example 11 of the specs and so it should be a reasonably good way of doing this :)
... Note, though, that calc() can be used to validly achieve the same thing, like so:
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
var() functions are substituted at computed-value time...
I've got an inline-block element that contains a very long word. When I resize the viewport until I reach the breakpoint of the text wrapping to the next line, I get a substantial amount of space. However, I would like the inline-block element to wrap immediately to the width of its contents.
I found it hard to explain exactly what's going on, so below an animated gif to illustrate my issue:
Upon resizing the viewport:
To be clear, the image above is me continuously resizing the viewport.
Does anybody know a way to achieve what I'd like? Even with CSS hyphenation the white-space still remains (which I don't want).
JSFiddle. Resize the frames to see what I mean.
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
The inline-block indeed extends on resizing as your animation shows, so that it keeps place for the long word to go into that space again.
One simple solution would be to add text-align: justify, but I'm afraid it may not exactly be what you want (see demo).
Another one would be the use of media queries, as #Parody suggested, but you would have to know the dimentions of the containing div, and that would not be very scalable as you mentionned.
The word-break: break-all suggested by #yugi also works but causes the words to to collapse letter by letter, regardless of their length.
The only way to achieve the exact behavior is (as far as I know) to use javascript. For example, you would have to wrap your text into a span element inside the div, and then add something like this :
var paddingLeft = parseInt($('#foo').css('padding-left')),
paddingRight = parseInt($('#foo').css('padding-left')),
paddingTop = parseInt($('#foo').css('padding-top')),
paddingBottom = parseInt($('#foo').css('padding-Bottom')),
cloned = $('#foo span').clone(),
cloned_wrap = document.createElement('div');
$(cloned_wrap).css({
paddingLeft : paddingLeft,
paddingRight : paddingRight,
display : 'inline-block',
visibility: 'hidden',
float: 'left',
});
$(cloned_wrap).insertAfter('#foo');
cloned.appendTo(cloned_wrap);
$(window).on('resize', function(){
$('#foo').css('width', cloned.width() + 1);
$(cloned_wrap).css('margin-top',- $('#foo').height() - paddingTop - paddingBottom);
}).resize();
Please see the jsfiddle working demo. (← edited many times)
That's quite a lot of code, but it works ; )
(PS : I assumed jquery was available, if not, quite the same is achievable in pure JS)
I don't think this is possible only with CSS for the one element. The reason for your behavior is that the width of the element is still 100% of its container. The only way I could think to accomplish this is by doing something a little bit "creative"...try setting the style to inline so you get the shrink-wrap behavior, but to get around the background color issue, also put it in a container that shares the same background. That should work.
If im understanding you correctly you could use the #media type to decide what css to use depending on the width of the screen
here is an example of what i mean
#media(min-width:0px) and (max-width:200px){
div {
display: block;
background-color: black;
color: white;
padding: 5px;
}
}
#media (min-width:200px){
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
}
I am still very appreciative of #lapin's answer (which I accepted and awarded bounty to), I found out after the fact that it didn't quite work on multiple elements next to each other (that has nothing to do with #lapin, I just didn't mention it in my original question as I thought it would be irrelevant information).
Anyway, I've come up with the following that works for me (assuming the elements it should be applied to are .title and .subtitle):
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $(document.createElement('span')),
bar = $(document.createElement('span'));
inner.addClass('inner');
bar.addClass('bar');
el.wrapInner(inner)
.append(bar)
.css({
backgroundColor: 'transparent'
});
});
function shrinkWrap() {
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $('.inner', el),
bar = $('.bar', el),
innerWidth = inner.width();
bar.css({
bottom: 0,
width: innerWidth + parseFloat(el.css('paddingLeft')) + parseFloat(el.css('paddingRight'))
});
});
}
shrinkWrap();
$(window).on('resize', function() {
shrinkWrap();
});
Basically what I do is:
put the text in an inner wrap element
create an additional absolutely-positioned background element
get the width of the inline inner wrap element
apply said width to the background element (plus padding and whatnot)
The CSS:
.title, .subtitle {
position: relative;
z-index: 500;
display: table;
padding-left: 10px;
margin-right: 10px;
background-color: red;
}
.title .bar, .subtitle .bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: -10;
background-color: red;
}
How should I go about optimizing CSS code? There's various CSS3 lines, like -moz- and -webkit-, border-top-left-radius, etc.. I believe bigger CSS files increase page load time significantly.
And another question: I've written quite some code, however some of it is left unused. I have over 2000 lines of CSS code, and I bet around 200-300 lines could be removed, perhaps even more. Is it worth revising all the code? It would take quite some time...
GZip the files before uploading them on server
It will reduce the files size significantly
Edit: Effect of GZipping -
By gzipping the .css file on Bargaineering, its size dropped from 28.2K to 7.3K, a 74.1% savings.
always remove the last semicolon:
body { background: black; color: white; }
to
body { background: black; color: white }
combine multiple properties:
.class { margin-top: 10px; margin-right : 20px; margin-bottom: 30px; margin-left: 40px; }
to
.class { margin: 10px 20px 30px 40px; }
use simple colors (instead of `#FFFFFF, #AABBCC, #FF0000 put #FFF, #ABC, #F00)
the most important thing: minify your code before uploading on the server. It will remove whitespaces and comments and significantly reduce your code and file size.
The smaller the file, the quicker it will download and the faster users can render the styles. There are various minifying scripts, I'd check out the YUI Compressor: http://refresh-sf.com/yui/