Since angular 12 the option to add inline critical css is checked by default, the drawback is that the css it includes is only for index.html, is there a way to add more files?
Related
I have a CSS selector that gets a lot of styles from the built-in Storefront theme. I don't want to use any of those styles. Do I have to override/reset each single CSS property in my theme, or is there a way to exclude one specific Storefront SCSS file from compilation? Or even better, exclude that specific CSS selector?
I don't know a built in way to do this.
You might want to try to decorate the following method in a plugin and clear out the existing styles in the array
https://github.com/shopware/storefront/blob/fc16b8db664d077807073397b04ee3c56b7e3735/Theme/ThemeFileResolver.php#L27
When working with Sass for Materialize and wanting to add my own .scss code to a project is it a better practice to directly modify the existing .scss files within the project, or to create your own separate .scss files, compile them to a different .css and refer to it at a later point in an HTML file to override the existing styles?
I would suggest never overwrite the classes of any library's .css or .sccs file if you are using some library like materialize or bootstrap.
Always create your own custom classes and use your CSS to modify the layout. Use your own CSS selectors while writing classes.
We're using the Angular flavor of Material 2 (https://material.angular.io/) for a main project, but would like to create a separate static (HTML/CSS) prototyping workspace that is able to access just the Material 2 CSS styles from that main project. The idea is that this separate directory will pull the compiled CSS from the Angular project, but allow for experimentation in HTML/CSS styling without configuring any JS.
Is it possible to compile the full CSS (components, typography, etc.) from the Angular Material 2 project, without needing AngularJS? It seems like there are styles being inserted by JS using the <style> tag.
Here's a basic demo of the SCSS file I've tried to build to load the Material styles:
#import "~#angular/material/theming";
#include mat-core();
This works for adding things like typography and the class names, but it doesn't add all of the possible styles for those classes. For example, the card component only gets very basic styles—it's missing the other styles such as padding that seem to be injected via JS.
I also tried the material-components-web project, which has compiled CSS here. It comes very close to doing the job. But unfortunately just renaming .mdc- to .mat- is not enough. The component names and usage aren't quite the same.
For example, material-components-web uses BEM: mdc-card__actions.
Whereas the Angular versions calls it .mat-card-actions.
I am using YT Framework on Joomla2.5, I want to add new css file fot the template SJ+, but I could not find any documentation for the framework.
I have general understanding that, as the css will be builded every time I install any component or module, so in order to implement our custom css, I need to add my css in a specific file, but I am unable to find where to keep that file and with what name.
I have tried by adding a "custom.css" file in template's css folder.
For any template if you need to add your custome css code you need to first find index.php file in your template directory,
If you found html code in index.php then add your css code to index file using tag. or add
if you do not found html code in index.php file then you need to find component.php file in template root folder.
and follow the same thing as for index.php
After looking deeper into each of the css file I came to solution for loading of custom css for YT Framework templates.
Keep your custom css in a file named "your_css.css" file under the css folder of your template, this is the functionality of the YT frame work that after loading all the css files required by the template, it loads this css file at the end so that all the default and dynamic css will be overloaded with all the stylings you have written in your_css.css file
Basically I have a module I installed, it is in the modules folders as well, but the css I need to change is in the media folder. How to I override this, do I use the HTML folder in my template folder somehow?
Probably the simplest way is to have a specific CSS file in your template, with selectors that override the standard module CSS. Unfortunately, Joomla doesn't have a standard way of checking for template versions of module or component CSS, in the way it does for view files.
Use the CSS hierarchy to have your override CSS rules loaded AFTER the default module CSS rules, and they will take precedence. Make sure your override CSS file is the last one loaded by the template.
How is the original CSS file loaded? Does the module load it in its template file or someplace else? If it is loaded in the template, just override the template file and change the lines that load that file. If it's not loaded in the template, it is probably loaded just before rendering the template. In this case, the solution is also to override the template and load your own css file which will contain rules to override the ones in the original file. In this case, unfortunately, the original file will be loaded in addition to your css file. It amounts to an extra http request but it's probably not a big deal.