How can I get vuetify typography classes to work? - css

Vuetify supposedly has the following typography classes available:
https://vuetifyjs.com/en/styles/text-and-typography/
However, they don't work with my vue-cli project. The color ones such as red--text work fine, as well others such as text-lowercase and text-uppercase work fine as well. But things such as text-h1, text-caption, etc., no dice.
I'm guessing I have some sort of mis-install, where are these classes supposed to come from?
My project is pretty good sized now (over 30 components) and everything else vue/vuetify is working fine.

The typography classes are recent, need to upgrade to latest veutify version (2.3.1). I was using an older version that didn't have them.

Related

Some classes such as rotate and scale (the known two) stopped working after upgrading from TailwindCSS 2 to 3

I was trying to use the newly introduced arbitrary value in TailwindCSS yesterday and it occured to me that I needed to upgrade from version 2 to the latest version. I religiously followed the upgrade guide and everything seemed working until I realized the scale and rotate in my site have stopped working. I battled it over the night with no luck.
I have another NextJS project that originally uses TailwindCSS version 3, I tried scale and rotate on it and it worked fine. The version is a bit lower (3.X.4) compared to the current version (3.X.23), so I downgraded to that exact version, yet the scaling and rotating wouldn't work.
I'm currently frustrated as I don't know what I didn't do or what I did wrongly. Can someone please rescue?
Haha!!! I figured it!
Actually, I was using custom classes instead of individual utility classes which means I don't necessarily need the import the #tailwind base into my globals.css.
I realized that whenever I import the #tailwind base, the scale and rotate start working, but some of my other stylings are disorganized (because the base styles over-write my styles). So, to make it work I read here https://tailwindcss.com/docs/preflight that one can disable the preset from the tailwind.config.js file by adding
corePlugins: {
preflight: false,
},

Where is the SASS version of all styles for Bootstrap 4?

Bootstrap makes a great deal of how they fully switch to SASS from version 4. However, when I browsed my node_modules, I realized that everything there is still in SCSS.
I know that the difference isn't that big but I do like the absence of curlies and I'd prefer to see SASS-like SASS-ing.
Where can I find the ortodox SASS source code? Or am I missing something profound and am simply reasoning mistakenly?

p:grid not finding css classes

I am struggling with PrimeFaces css grid, I am using version 5.3 and can't get it working. Somehow the classes ui-g, ui-g1, etc. do not exist/work.
The link to PrimeFaces css grid.
Problem
My problem was that I used the classes ui-g, ui-g-1, etc. These are used in the examples on primefaces.org. While these classes not existed in version 5.3.
Solution
I switched these classes to the older ones: ui-grid, ui-grid-col-1, etc.

Is there a graceful way to upgrade from Twitter Bootstrap 3 rc1 to the stable release?

I've been having a good time working with Bootstrap 3 rc1, but now the stable release is out and it's even BETTER. I tried swapping out the files but many things break. I read the summary of changes here but it's a bit vague and a lot seems to have changed between rc1 and rc2. I'm wondering if anyone knows of a straight-forward guide to making that transition.
There doesn't seem to be a definitive answer for this, so here's a collection of what I encountered...
All .col-* classes need to be replaced with .col-sm-* (they also added .col-md-*).
If you're using glyphicons, they're font files now, so you'll need to make sure those files are in the right place.
In previous version, I had .row classes wrapped around things which behaved weirdly when I upgraded. I ended up stripping out and .row classes that aren't parents of .col-*-*s.
navbar component was completely redone, so if you use that you'll have to just redo it.
These 4 things, covered just about everything I encountered, but I'm still working on this so I'll update later if I run into more stuff big stuff.

Foundation zurb nav not showing in rails

It's the first time I use foundation for my Rails project. In the past I only used Bootstrap.
I followed the steps described here http://foundation.zurb.com/docs/gem-install.php#simple2 and I can't manage to create a simple nav ( http://foundation.zurb.com/docs/navigation.php ).
It applies some style, but not fully (for example, it's not black).
I followed the automatic and the manual install as well. The funny thing is that some styles work. For example, applying style "button" to a link works.
I tried many things. Any ideas?
It looks like the link you supplied is outdated (http://foundation.zurb.com/docs/gem-install.php#simple2)
Here are the updated instructions:
http://foundation.zurb.com/docs/rails.php

Resources