I get how to add Tachyons to use them for instance like this
`<div>
<div className="f4 bg-green blue">Example</div>
</div>`
but how can you make to use in a CSS file so that you can make your own class (which I've seen before) something like
`.example {
#extension .f4;
#extension .bg-green;
#extension .blue;
}`
I've tried googling and looking for examples but can't exactly find what I'm trying to do. I'd rather just have a className instead of a ton of tachyons
By using this type of format you can use tachyons in html
(link rel="stylesheet" href="https://unpkg.com/tachyons#4.12.0/css/tachyons.min.css"/)
Related
I want my custom class pm_btn to get all the properties that bootstrap's btn class has. One way is to use the actual source code of the btn class. But I believe that there has to be a better way. Therefore, I tried a bit of scss, where inheriting properties is quite easy and trivial using #extend as follows:
.pm_btn{
#extends .btn;
}
But this throws error :
Error: The target selector was not found.
Use "#extend .btn !optional" to avoid this error.
I am trying to achieve: apply bootstrap like classes to django-postman classes.
Please suggest me how can I achieve this, if I am on the right track by choosing SCSS or should I think in some other directions. Thank you for your valuable time.
Not sure what your tooling setup is, but if it will allow it, Bootstrap has a Sass version you can use. This will allow you to extend bootstrap's functionality with your own custom classes.
You can use bootstrap sass files and #extends keyword to extend .btn class to your needs
or
more easily you can write a separate class along and modify its properties to suit your needs and you can call that style for reusability , For eg
.button--custom {
/* required properties here */
}
<button class="btn btn-primary text-light button--custom">my button</button>
You need to call in the given class order or it wont work
I need to get some colour values out of a DB and use them in my CSS so that each customer has a colour branded version of my React.js application, but I'm not sure how.
I have other elements of branding such as logos, slogans and terminology which I'm pulling out of the DB, storing as a JSON file, and referencing around the site, which works fine, but the problem is the colours which I need to use in my stylesheet as I need to use the pseudo classes that CSS offer.
I've found this postcss-import-json package which claims to do this, but I can't seem to get it to work as intended.
So far I've...
Imported the package...
npm install --save-dev postcss-import-json
Created a JSON file called 'masterConfig.json'
Imported the above file into my main stylesheet using the name i've called my colour (primary)...
:root { #import-json "../Assets/MasterConfig/masterConfig.json" (primary); }
Added the above colour name to my list of colours...
:root {primary: primary}
I've also tried this with the -- prefix by changing to #import-json... (primary as primary prefix --)
...and added it in my code where it is to be used...
style={{background: "var(--primary)"}}
^^^ with and without the prefix
Am I doing something wrong?
I've noticed in the example it uses the $ symbol, so can this only be used with SCSS?
Any help with this, or any other way to achieve this would be great, thanks!
So, I was quite surprised that I didn't already know how to do this, it seems so trivial and doesn't need any additional package.
To change a CSS varibale from JavaScript code, simply target the root element as you normally would, and set the property!
CSS
Create a variable (I'm using a fallback colour)
:root {--primary: #123456;}
JavaScript
I'm using React, and set this is my App.js componentDidMount function so it's global to my app. I've hard-coded the colour, but this can be pulled from the DB.
componentDidMount() {
const root = document.documentElement;
root.style.setProperty('--primary', '#CCCC00');
}
BooYaa!
There appears to be two was to access the variable you've defined, I've done it in two separate ways and you can implement whichever makes your code neater!
Referencing the variable inline:
CSS
:root {
--testcolor: red;
}
HTML
<div style="background:var(--testcolor)">
Many words
</div>
Example of the working product in JS Fiddle: https://jsfiddle.net/ta37nzer/
Accessing the variable through a class:
CSS
:root {
--testcolor: red;
}
.exampleClass {
background: var(--testcolor);
}
HTML
<div class="exampleClass">
Many words
</div>
Example of the working product in JS Fiddle: https://jsfiddle.net/ta37nzer/1/
I'm trying to use font icons with the zurb foundation icon pack and while of course you can display them inline via of course something as simple as;
<i class="fi-alert"></i>
Except when I try to use it as css content (which is how they display them...) I don't get the same result when I do something like content: "\f101" inside of a css class. I just get those squares to display.
Is the only difference that I include them externally? via;
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=132456789blahblahblah" rel="stylesheet">
Or what? Am I just missing a src ref in my sass or something inane like that? I'm doing it just how I would expect it to work and have done with others in the past but I get no icon using them from the css, only shown inline with the html? I know it's going to be some dumb oversight so could use another pair of eyes.
Sorry, kicking the dust off my web experience, it's been awhile.
You need to set the font-family to the icon font in the same class where you set the content.
.icon:after{
font-family: "foundation-icons";
content: "\f101";
}
To use them in a css selector like that you have to actually install the font-family for your page and declare that font-family in your css selector before using the code.
This is a decent tutorial https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
Please provide an example of code that works and doesn't work for you.
If you are trying to display icon by adding :content to an existing css element that is not part of icon pack, this will not work. For example this WILL NOT WORK:
HTML: <li class="icon">text </li>
CSS: .icon:before { content: "\f101"; }}
Use 'i' tag to add icons:
HTML: <li class="icon"><i class="fi-alert"></i>text </li>
Every time you see squares you need to check if font files are loaded. There are 4 fonts are used by icon set in case you want to load css on your server and link them manually:
/foundation-icons.eot
/foundation-icons.woff
/foundation-icons.ttf
/foundation-icons.svg
Alrighty, so I am trying to add classes to my page via css. Below is an example of the less.css file I am writing:
.someClass {
.col-sm-6;
}
I swear this worked before, but for whatever reason, my compiler throws an error:
".col-sm-6 is undefined"
Compiler: WinLess
Essentially I'm just trying to assign the col-sm-6 class to a div for width/float etc... Please let me know if you can think of any reasons this wouldn't work.
Thanks!
Bootstrap 3 makes these class names via a dynamic mixin, so they are not directly accessible as mixins themselves (dynamically generated class names are not currently able in LESS to be accessed as mixins). Instead, you need to call the mixin to generate the code by doing this:
.someClass {
.make-sm-column(6);
}
I'm wanting to use properties from other css classes without having to rewrite the code...I'm not too savvy with css so please forgive me for the simple question.
Is it possible to do something like this or similar to it in css?
.class_a {
background:red;
}
.class_b{
.class_a;
}
The best way (that I know of) to re-use css classes is to decide on the css attributes you want to re-use, and put this in a seperate class, like so:
.class_a {
background:red;
}
Then, every time you want to re-use these attributes, you add the class to the html element, with spaces in between different class names, like so:
<div class="text class_a">This will be red, and have the properties of the text class</div>
<div class="text">This will only have the properties of the text class</div>
You can use the same property list for more than one selector:
.class_a, .class_b {
background:red;
}
There are CSS tools which allow you to code in the way you describe. You just do some post-processing of your code to produce valid CSS.
Check out LESS.
Not possible using CSS. However, you can achieve this using something like Sass. Sass allows you write CSS with enhancements such as the one you described. Unfortunately, this introduces an extra step since Sass files must be converted to CSS before you can use them on your page. Could help save you a lot of typing though :)