In SMACSS where should I be defining colours?
I have defined my base font in the base\base.css for the general content, but my footer requires a different coloured font.
Should I be declaring this in my layout/footer.css so it can cascade down to the components, like so:
.l-footer {
background: #333333;
margin: auto;
color: #FFFFFF; /* Here ? */
}
or, at the module level of the actual component which resides inside the footer in modules/testimonial.css.
.testimonial {
color: #FFFFFF; /* Or here ? */
}
Is there any documentation or links that discuss this?
Thanks so much.
If i were you i would use THEME for such tasks. You define BASE, colors, background and so on, then attach THEME classes (theme.css):
.l-footer {
color: #FFFFFF;
}
More info about THEME rules type
Theme Rules - are things like your page background, typography, colors, etc. This is another area I often pass on, except for when I need to override theme elements for different pages. An example of this would be maybe a content-type that has a different style in order to set it apart from the rest of the site. So if your page has a white background - body {background: #fff;} but on blog pages it should be gray, I’d use a theme rule to overwrite my base rule - .node-type-blog {background: #ccc;}
See more at: https://dev.acquia.com/blog/organize-your-styles-introduction-smacss
Related
I am trying to overwrite mat-form-field styles using ::ng-deep .mat-form-field**. But I read that it would be deprecated soon.
I overrode some styles using ::ng-deep and it partially solves my need. But I also want to use default mat-form-field in some cases.
In my case I decreased height and removed extra padding at bottom for hint as I need to use dense fields in form and having hint padding adds scroll bars.
But I have some dialogs where I can use default mat-form-field and use mat-hint like normal.
I have the below styling in a scss file and I import this file into my component scss using #import
::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em;}
::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.1em) scale(.75);
}
::ng-deep .mat-form-field-wrapper{
padding-bottom: 0;
}
Can someone suggest a way to be able to use both styles, like extending mat-form-field and customizing it in applying for my dense form and using mat-form-field normally at other places?
I saw that the Material Team uses attributes like dense for the mat-lists. So, you can have a global customization in your styles.scss like:
.mat-form-field[dense] {
.mat-form-field-flex > .mat-form-field-infix {
padding: 0.4em 0px !important;
}
.mat-form-field-label-wrapper {
top: -1.5em;
}
&.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.1em) scale(.75);
}
.mat-form-field-wrapper{
padding-bottom: 0;
}
}
and just add the attribute to your fields:
<mat-form-field dense ...
This kind of atttibutes can be considered as "component variants", and some CSS methodologies suggest to define a class for it like .mat-form-field-dense but I like the attributes approach better :)
Edit: If you want to include this kind of deep customization in your component, you need to disable the encapsulation including:
#Component({
...
encapsulation: ViewEncapsulation.None
})
that will tell Angular to not mark your Component Styles with an attribute that encapsulates your styles to work only with your component elements, and not interfer with another components sub-elements. Please refer to the Angular Styles official documentation if you want to know how it works ;)
How to change color of mat-spinner
i tried this but doesn't work
Html
<mat-spinner [color]="red" ></mat-spinner>
<mat-spinner [color]="#ffffff" ></mat-spinner>
This code worked for me :
scss
.mat-spinner-color::ng-deep circle{
stroke: #FFFFFF !important;
}
html
<mat-spinner [diameter]="25" class="mat-spinner-color"></mat-spinner>
The color property only accepts the values primary, accent and warning. These are colors that correspond to the Material Design theme used in your project.
<mat-spinner color="primary"></mat-spinner>
If you want to override this with a custom color add the following css:
.mat-progress-spinner circle, .mat-spinner circle {
stroke: /* color */
}
EDIT
Place the styles in the global style sheet, view encapsulation prevents the styles from working when placed in a component style sheet.
The color input accepts three values:
primary: The primary palette of your app
warn: The warn palette of your app
accent: The accent palette of your app
To use hex codes, you can only do it with CSS. I suggest you use the Chrome DevTools to see which CSS classes to target. Note that you should use the !important selector as well.
I am new to using syntaxhighlighter. I am using there latest version 3.0.83. Can some one help how to customize the color of comments, header, etc ?
I am using < pre class="brush: c"> for coding style.
The easiest solution would be to override the CSS rules for comments, but they're marked as !important so you have to do a little extra work.
Open your shBrushCpp.js file. Down towards the bottom there's a set of regular expression rules paired with a css property. Those values correspond to class names in shThemeDefault.css (or whatever theme you're using).
Copy your theme file to something like shThemeCustom.css or whatever you want. Include this file on your page instead of the original theme. From here, you can change whatever you want. Just reference the CSS rules from the brush file against your custom theme to know what needs to be changed.
In case you don't have full control over the .css or .js files, as is my case (since I followed these instructions here and am using Alex Gorbatchev's hosted files instead), there is still a way to override the !important parameter.
You can customize any of the settings shown here (http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css), for example, as follows:
With the default theme, this HTML...
<pre class="brush:cpp" title="test code">
int myFunc()
{
//do something
return 1;
}
</pre>
...yields this result:
Looking here (http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css), I can see the parameters I am currently using. For example, it contains:
.syntaxhighlighter {
background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
background-color: white !important;
}
...
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #008200 !important;
}
In order from top to bottom, as shown just above, my header background color is white and my alternating code lines 1 and 2 are both white. Comments are green (#008200). Let's change all of that. Add the following code to your blogger template, at the very end of your header, just above </head>:
<style type='text/css'>
.syntaxhighlighter {
max-height: 550px;
background-color: #ff0000 !important;
overflow-y: auto !important;
overflow-x: auto !important;
}
.syntaxhighlighter .line.alt1 {
background-color: #99ff99 !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #99ff99 !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #000082 !important;
font-weight: bold !important;
}
</style>
Now, I have set my max-heightto 550 pixels (make a really long code block and you'll see it constrained to this height now, with a vertical slider to see it all), my header background color is red (#ff0000), my code background color (both alternating lines) is light green (#99ff99), and my comments are blue (#000082) and bold. Follow this format to customize anything you see in your .css theme file--example, for me, here: http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css.
Here is my final result--very different from the default look above:
Note that the font-weight parameter I set is simply a CSS styling you can apply. Many other options exist. See here: http://www.w3schools.com/cssref/pr_font_weight.asp.
This is more of a general best practice question rather than a very focused one.
I'm a big fan of the font shorthand as it solves most of the line-height headaches I had when I was using just font-family, font-size etc etc and it really cuts down on the total number of the CSS declarations while providing full control on the typography.
The problem is, as font-sizes change throught a page, so do the line-heights, so I'm finding myself redefining font several times, like so:
.lastUnit h2 {font:normal 23px/23px Calibri,Tahoma,sans-serif;color:#a51d21;padding: 21px 0 15px 70px;}
.lastUnit a:link, .lastUnit a:visited {color:#a57129;font:normal 16px/16px Calibri,Tahoma,sans-serif;}
h1 {font: normal 26px/26px Calibri,Tahoma,sans-serif;border-bottom:2px dotted #bababa;color:#204fe7;padding-bottom: 8px;margin-bottom: 8px;}
h2 {font: normal 22px/22px Calibri,Tahoma,sans-serif;color: #a41d21;margin-bottom:12px;padding-bottom: 12px;}
.internal h2 {border-bottom: 2px dotted #62c6c7;}h2.section {font:normal 20px/16px Calibri,Tahoma,sans-serif;color:#1d7373;border:0;margin: 0 0 15px 0;padding-bottom:12px;border-bottom:2px dotted #62c7c8;clear:both;height:18px;text-transform:uppercase;}
ul,ol,p {font:normal 16px/24px Calibri,Tahoma,serif;}
h3 {font: normal 18px/18px Calibri,Tahoma,sans-serif;color:#204fe7;margin:6px 0;}
I have a strong feeling this code is not optimized... I'm thinking to declare the font-family on my body (or on an id very high in the markup) so I don't have to repeat it each time, but then I'll have to use font-family, line-height and some times font-weight.. Which makes for pretty much the same amount of CSS.
Any ideas or tips to optimise this procedure? Maybe additional classes in the markup?
ps: for Stackoverflow admins: That would be a question for "coding style" tag but it's not allowed to use it..
I would try to write CSS as if I were designing a database or defining OO-classes. I would:
try to eliminate redundancy in the CSS
define generic CSS rules first and then the specific cases
avoid shorthands if necessary
Here is an example:
h1, h2, h3 {
font: normal large/1em Calibri,Tahoma,sans-serif;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
Start from this:
body { font-family: Calibri, sans-serif; }
* { line-height: 1.3; }
Then define h1, h2 etc. sizes in percentages. Then set colors, and so on. To tune spacing between blocks (e.g. between a heading and a paragraph, or between items of a list), it is almost always better to use vertical margins rather than line height.
There is no need to create a mixed salad of font settings, and the font shorthand tends to confuse rather than help.
Calibri is a nice little font, unfortunately with no suitable fallback on systems that lack it—but virtually any sans-serif font is a better fallback than Tahoma, which is completely different from Calibri in almost every way (except being sans-serif).
if all share the same font-family, why not declare it in one place at the top, and then define the "fine details". In other words, the best practice is to set the common/general rules and then redefine the ones you need.
example:
/* define the font family/general characteristics */
h1, h2, h3 {
font:normal 23px/23px Calibri,Tahoma,sans-serif;
}
/* define the details for the ones you would like */
h1 {
font-size:26px;
line-height:26px;
border-bottom:2px dotted #bababa;
color:#204fe7;
padding-bottom: 8px;
margin-bottom: 8px;
}
I believe the best way to shorten this down would be to specify one tag that sets the font family. A bit like this
body {
font-family:Calibri,Tahoma,sans-serif;
}
Then you can fine tune each element further down your css styles.
Also just to mention. CSS doesn't cause that much of an issue when loading the page. I would focus more on optimizing images and any server side code.
Does anyone know how to render the background of the jquery ui tabs or accordion controls as transparent?
Add this to your css file:
.ui-accordion-content-active
{
padding: 0 !important;
border-style: none;
background-color: transparent;
background-image: none;
}
You can adjust the padding to whatever fits your needs.
Find the correct line in the css and change the background attribute to transparent.
In CSS you can make use of the rgba(int, int, int, float) function to define a color. So, I guess you want something like this:
background-color: rgba(255, 255, 255, 0.3);
Note that the RGB components are in the range [0, 255] (which is one byte) and the alpha channel is in the range [0,1].
in the jqueryui css file's 'Component containers' section, you can find the .ui-widget-content class and set
background: transparent;
Note: If you are using overlays, they might get messed up~