Is it possible to give error/warning if someone in the team tries to add the variable as property (not value) in any other file other than variable.css?
it could be either CSS native variables or Sass variables
There is no rule for that in stylelint as it is a very specific use case. The plugin system was built to accommodate these types of use cases, though. The solution is create your own plugin for your needs.
Related
It's quite simple. I'm working on my first WordPress plugin. Testing on multiple WordPress websites, it seems that it's quite hard to make sure my plugin looks the same on all websites.
I obviously don't want to list every single possible css setting and write none !important.
So what's the right approach here?
While creating any plugin, you can make a common prefix according to your plugin name and add it everywhere. Like if i am creating a plugin i.e. "custom post type" then i will use "cpt" as a class or id on everywhere.
Just use unique prefix according to your plugin name so it will not conflict with theme styling.
Hope this will help!
Use could use custom HTML tags. So instead of this:
<div class="hello">Content</div>
Do this:
<my_element class="hello">Content</my_element>
That's the only way to be 100% sure, without using lots of over-qualifying things like !important etc.
Both are 'incorrect' ways that invalidate 'guidelines'.
But it will work, and it'll be fine forever as long as your tags are uniquely named and never become part of a spec and get treated in a predefined way by browsers.
For input fields etc, unfortunately you'll have to go with standard CSS selectors and qualify them more than any other CSS which may be present.
asdf{
display:block;width:100px;height:100px;background:black;color:white;
}
<asdf>Hello!</asdf>
Note: I'm open to other solutions if this is the wrong approach
I want to used https://github.com/twitter/css-flip for rtl support on
my project
The documentation is sparse and seems to make a lot of assumptions. I can successfully run the CLI against a .css file but not a scss file as I suspected.
I was thinking about adding a step that ran the css-flip on the compiled styles like so:
css-flip app/assets/stylesheets/application.css > app/assets/stylesheets/application.rtl.css
One, I'm not sure this is the best approach, and Two, if it is reasonable, how could I run the css-flip command on the assets after they've been compiled?
I'm not sure if this is the right approach, but I'd say you can use css-flip to generate your css files, and afterwards, I see 2 different solutions. (In the case you don't want to use Pete suggestion about the direction property, but I assume you may want some custom style depending of the orientation of the language.)
1 - depending on the version of your site, you change the asset being loaded.
2 - Or, I'd say you concat your two css files generated to put both behind a class (probably with the help of a preprocessor such as sass), and you put this class on your body, and change it whenever the user changes their language settings.
solution 1 creates lighter css file, but your user need to reload the page when they change language, whereas solution 2 creates bigger css file, but user won't need to reload their page when they change language.
Hope this helps.
I am building an app with theming requirements that can only be determined at run time. At build time it is possible to have theme variables available for all themes.
Is it possible to get webpack to build node modules - in this case bootstrap - with different variables file? I guess at build time I would want it to build multiple versions/themes of bootstrap. Then at run time I could reference the correct css file based on some prefix.
e.g.
theme1.bootstrap.css
theme2.bootstrap.css
theme3.bootstrap.css
I am using bootstrap 4, with webpack 2.
Is possible with webpack and how can I achieve this?
Definitely. I'm assuming you are determining the themes based on a user profile type system. Take a look at below and add an if statement to look for the variable in sql then simply apply the css. simple. Try creating it and if you run into trouble post the code you have on here and i'm sure someone can help. Add stylesheet to Head using javascript in body script-in-body. also if you aren't using already bootstrap allows for theme file so you can keep the overall style loading and simply apply the color scheme you want so that you only need to load the bulkier script once.
You can use the webpack plugin themes-switch, put all your theme files in a directory, the plugin would compile themes to individual files. Then use function changeTheme to switch themes at runtime.
https://github.com/terence55/themes-switch
Specifically common.inc. I need to modify format_date, but I want to do it safely.
You can only override a few specific files (like session.inc or cache.inc), it is not possible to override common.inc.
However, you don't need to. See my answer to your other question: Drupal not using custom time format type
I am attempting to use lesscss to build a templating system where each template has 3 or 4 alternative colour schemes.
So for example, I could have a red.less stylesheet that looks like this:
#main_colour: #ff0000;
#import 'main.less';
So, I only have one main.less stylesheet to maintain which contains all the main styles, and uses the variables set for colour codes. I can then create a seperate colour.less file for each colour scheme.
Only problem is when I try to do this I get a Less::VariableNameError which indicates that LESS is parsing the #imports BEFORE it parses the variables.
Is there a workaround to this or any other way to achieve the same end result?
In reference to your tweet, yes, this would work as you expect in Sass. I'm actually kind of surprised that it doesn't work in Less.
I guess the Less guys wanted to keep the .Less file atomic and independent of external environmental settings. This was what I assumed, but I also didn't like it so our .NET port http://www.dotlesscss.com will allow you to do this by default.
Its not a big change to do in the original Less ruby version and if you fancy tinkering with the source I can point you in the right direction.
Out of interest, without been traitorous to the Less team I quite like the SASS syntax now and there are additional things such as conditional statements and loops that you cant (yet) do with Less.
#nex3 - you guys should stop competing and just work together.
Seems like this isn't a problem any more, or at least not for me using "dotless" for .net?
Seems to work fine now with latest LESS.