Is there a way to make font-size and font-weight change more dynamically using Less?
For instance:
#h2font{
font-size: 32px;
font-weight: 700;
}
or is there another solution to this?
I'm not super familiar with less.js but typically if you want to change the font size/weight for ALL h2 tags it would look like:
h2{
font-size: 32px;
font-weight: 700;
}
If you wanted to do it differently you can use id's or classes to setup styling conventions that apply to some but not all.
I'm assuming that your #h2font should just be "h2" but I could be wrong due to my lack of knowledge specifically with less. Otherwise you can use JavaScript/jQuery to dynamically change element styling based on user interaction on the page.
Related
I am trying to add css to my FullCAlendar 5 Events using 'classNames:'; e.g.,
classNames : cssItalic,
When I define the cssItalic css as:
.cssItalic {
font-style: italic;
font-weight: bold;
}
It works. However, when I change it to:
.cssItalic {
font-style: italic;
font-weight: bold;
text-decoration: underline;
}
The underlining is not done (i.e., bold and italic work).
So, what css can be used with FullCalendar 5?
After further testing I found the the underline is shown in the list view however, not in the month, week and day views.
If you inspect the elements you're trying to underline, you'll notice that they have a style definition already:
a:not([href]):not([tabindex]){
color: inherit;
text-decoration: auto;
}
Your problem is that .cssItalic is not as specific as the existing selector that sets text-decoration. This is why bold and italics still work, but underline does not for these elements.
Your two options are: make the selector more specific, or use !important for the text-decoration rule.
This is a somewhat abstract question but here goes.
A company recently partnered with another company for a small project but their brands are not aligned, so in certain areas of their site the pages need to respect the brand guidelines of whatever company they represent.
Currently all of the CSS is geared towards a singular brand e.g.
.solution-featured-video__title {
font-family: CircularStd;
font-size: 40px;
font-weight: 500;
line-height: 1.33;
color: #fff;
}
This is a piece of styling for the title of a solution video.
If the other brand wanted an identical component and I stick loosely to BEM, would it be appropriate to just use modifiers?
E.g.
.solution-featured-video__title--other-brand
In light of the comments I ask because there is also a business rule: whenever someone types easy in any form i.e. Easy, easy, EASY, it needs to be changed to easy.
My idea was to programmatically wrap a span around each instance.
Under BEM (Block, Element, Modifier), I think it would be perfectly acceptable to use the modifier as a means of adding brand specific styling to the element.
.solution-featured-video__title {
font-family: CircularStd;
font-size: 40px;
font-weight: 500;
line-height: 1.33;
color: #fff;
&--brand1 {
color: #000
}
}
You are effectively just modifying the styling of the block based on brand
Does anyone have a good stylesheet snippet for making FontAwesome and the Material-Design icon font work well together spatially - to make Material-Design icons play well in a mostly FontAwesome site? The styles, baselines, widths are different - maybe more. The stock "material-icons" CSS class fixes the font-size at 24px. Also, the effective baseline for the Material-Design icons is far above the text baseline.
So far I've patched Google's "material-icons" CSS class with:
{
font-size: 150%;
transform: translate(-10%,20%);
}
The Material-Design icons are also wider than the Font-Awesome set - I haven't decided how to address that yet. I haven't used many icons - there may be more issues with ones I haven't tried.
I use the following code for use in navbars, buttons, wells, accordions, forms and a few other places, change it to suit your needs (you may want it perhaps bigger or thicker)
.material-icons {
font: normal normal normal 16px/1 'Material Icons';
display: inline-block;
transform: translateY(10%);
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
Better use
font-size: 115%;
vertical-align: text-bottom;
transformations make problems when you use line-height larger than 1
I had exactly the same issue of the two fonts just not playing together nicely at all!
No matter what I tried I could not fix this using CSS - each suggestion worked at first but broke down when using different font-sizes etc.
The closest I got with CSS was this:
.material-icons:before {
position: relative;
top: 0.135em;
}
In the end though, I used font forge to edit the actual font baseline and now it works a treat.
I also remapped the font into the same structure as Font Awesome so instead of:
<i class="material-icons">alarm_on</i>
I can do
<i class="md md-fw md-alarm-on"></i>
Not how the font was intended to be used and personal preference I know, but I much prefer this way of using icon fonts!
I'm using the bootstrap affix js plugin and it works great. The problem I'm having is when I change the body to use a custom font (Google: Lato) it throws the anchor positions completely off.
The affix links lead to bad positions on the page and the page no longer lines up with the affix sidebar when scrolling. It's always off by 100px or so.
ie.
body { font-family: 'Lato', helvetica, arial, sans-serif; color: #221e1e; font-weight: 300; line-height: 150%; }
I'm sure there's another way to compensate for the new smaller font or line-height, but I haven't found it.
If I raise the line-height on the entire body to say 300, it works ok, except that the spacing is horrible. So I tried to adjust the line height on only the titles holding the anchors.
h2 .mw-headline { line-height: 330%; }
And it almost works, except it's still off on the first link and it feels kind of hackish. I'm sure there's a proper way to handle this, I'm just not sure what that is.
You can probably fix this using Bootstrap's custom variables if you're using less or sass.
In your case it'd something like:
#baseFontFamily: 'Lato', helvetica, arial, sans-serif;
#textColor: #221e1e;
#baseLineHeight: 20px;
Find more variables here: http://twitter.github.com/bootstrap/customize.html
I'm trying to adjust the font weight rather than just "bold". It appears to be doing nothing on Verdana text. Has browser support for this dropped or something?
<div class='business-hours'>
Toll free: (866) 528-4930 ยท Mon-Fri 9-5 EST
</div>
#hd .top-nav .business-hours {
text-align: right;
font-family: verdana;
font-weight: 600;
font-size: 10px;
color: #9ea3a0;
}
Numeric and other less usual font-weight properties (like semi-bold, book etc.) are supported very poorly across browsers, and AFAIK relevant only if the font itself provides support for the given value (i.e. has a explicit book or 900 font weight defined). So it's not really a sensible thing to use if consistency is desired.
See Are all css font-weight property's values useful?
And reference info at the W3C
Is it an H1 tag or something? Check that you don't have CSS overwriting your less specific rule. Otherwise Syntax is as follows:
<style>
.myboldtext
{
font-weight: 400;
}
</style>
<span class="myboldtext">This is my bold text</span>
400 for regular, 700 for bold.
Hope this helps!
Depending on parent font-styles it can be hard to see that text has in fact been bolded. For example:
p {
font-weight: lightest;
}
p span {
font-weight: bold;
}
and
<p>Hello, <span>world</span></p>
In many browsers its actually difficult to see any difference between the bold text and the regular body text.
Instead of just specifying font-weight: bold; try changing it to
font-weight: 700;
This will tell the browser to render the text with a heavier than even normal bold weight.