Kirby has css. Is it purged?
Tailwind has its own function, when build for production.
Now i read about installing purgecss.
Is there any list which software/function purges which files?
Somehow it feels i should produce static pages and purge the css after that?
Kirby itself doesn’t come with CSS, the Starterkit does and it only contains the style it needs, so no need to purge anything.
If you use Tailwind or Bootstrap or the like which come with lots of classes you will never need, you need to get rid of those unneeded classes/styles.
No. Kirby does not purge CSS by itself.
If you work with Tailwind you have a config file with your build scripts. Mostly a wildcard declaration is used to declare which folders/filers should be considered, e.g. ./site/**/*.php.
By producing distinct statics pages and purging CSS individually, you will probably create the best results, but this will bloat your build process. Wildcard declarations seem to be a good balance.
You can find a create article about Tailwind here:
In case you use another framework (and prefer a GUI) and want to make use of PurgeCSS you might want to have look at:
While i fetch files from the demo, i have now:
/assets/css/templates with css for some pages.
/assets/css/ …
… index.css
… lightbox.css
… own.css
… prism.css
… styles.css
Seems i should clean up this. But i am afraid to delete the wrong things, while i guess that the given blocks needs some css?
Maybe the best is to add the given css from whatever to the tailwind-file at /src/css/tailwind.css?
Then tailwind can care about everything, right?
If you plan to use Tailwind, you shouldn’t use the styles from the Starterkit/Demo, but move to Tailwind completely.
Unlike zurbs foundation, there seems to be no used way to include another file in tailwind.css?
I would await just to write:
@tailwind base;
…
@my_own_stuff.css
This is the easiest way, i guess to add and overwrite styles.
Oh, heaven, so much steps to go?!
Why there is no easy way like:
this_is_kirby.css
this_is_whatever.css (from a framework)
this_is_my_own_super_duper_overwriting_all_and_everything.css
So go for it, Kirby! Eat them, compare the pages to them, delete what you dont need and build a wonderful_final_purged_minimized_and_perfect.css
It seems that tailwind also dont purge like kirby dont purge?
So we have some_kirby.css for given blocks?
Some tailwind that is copied as written in tailwind_config.css? (But the production purges?)
Some own stuff.
And i still need to add the purgeCSS?
And to incude other stuff to tailwind i need postCSS?
It is so wonderful that thousands of clever people do so many wonderful things …
but why the hell nobody can offer a one_hit_wonder?
kirby_config_watch:
subsum css-files: yes
css: /path/x.css+/path/y/y.css
purge: no
minify: no
kirby_config_run:
subsum css-files: yes
css: /path/x.css+/path/y/y.css+the_magic_heaven.css
purge: xes
minify: yes
If there are millions other average idiots like me, you could save their lifes and families with such a one_hit_wonder. 
Because this is nothing that belongs in Kirby, it’s frontend stuff and would just bloat the core, when everyone has their own frontend workflows.
Sorry, still dont got it.
Lets say there is a css for the panel to have three colums, maybe somehing like
div class=left /div
div class=middle /div
div class=right /div
and some css like
left, middle, right { width:33%}
With this i can see a layout with three columns in the panel.
Now i only can imagine:
div class=left /div
div class=middle /div
div class=right /div
then i need to copy the panel css to page.css
or
div class=tailwindleft /div
div class=tailwindmiddle /div
div class=tailwindright /div
then the panel-css doesnt work anymore. I have to replace it with my tailwind css.
or
div class=left /div
div class=middle /div
div class=right /div
wirh panel css and anothervone for the public page that i have to create? Wirh code from tailwind for example?
Example three seems the only way how i can stay with the panel css and use an extern system like tailwind.
Two codes for one layout?
use panel css for page css or use page css (tailwind) to create also a new panel css.
Again only example 3 makes sense to me. Then with 1 or 2 i also have to replace an existing system (the panel css) with tailwind css or camt use tailwind at all, because i use the panel css.
Please let me know how this all is done!
1, 2 or 3 or is there maybe a 4. way, i dont see?
As far as I understand, number 3 is your way to go.
It doesn’t make sense to include the backend panel.css into the frontend (unless you really want to make the frontend look like the panel)
And you are free to create your views with whatever css (framework) you want - but you have to take care of purging unnecessary rules yourself, like @texnixe states, that’s beyond the scope of Kirby CMS.
Maybe there is a way to have two outputs of code, but i dont believe it after reading more and more pages.
For now it seems to my that the only thing that makes sense is to use all the css from the panel-css (that is used for layouts and blocks) in my page.css also.
Everything that is done here with layouts and blocks is just that what i want to see also on the public page, for example to show three columns in red, yellow, black with a headline, a picture and a video.
When i can do all the things that i need in the panel, why i should make myself so much headaches to translate given css in another css?
If i need more blocks than the given ones, i can decide to add any css system to the relevant css from the panel (for layouts and blocks).
Is this the best way?
The only hook could be now that the css for layouts and blocks is based on/connected somehow to the css of the panel itself. Then i have real big problem, but i hope this isnt the case.
BTW: There is a file or function or whatever with name „bootstrap“ - is the kirby-css based on bootstrap-css? Is the kirby-css based on anything or a new set of css?
Can i use these parts of the panel-css as i want?
Are there files to overtake like css_for_layouts.css, css_for_blocks.css? Are they divided from that css that makes the panel itself?
It seems this is a big secret nobody wants to talk about. Or maybe such a normal thing that every other of the nine billions people on the planet knows about …
Wonderful doc to add layouts to a page - but when i watch my page, i have no visible layout, because there is no css for that code.
<section class="6-column-grid" id="blabla">
<div class="column" style="--span:2">
...
</div>
<div class="column" style="--span:4">
...
</div>
Now i have to define the css for 6-column-grid, --span:2 and --span:4?
If there is no answer for me, i cant go on with this system.
Maybe someone wants to buy the license i have bought some days before? I also have a license for the theme zero one to sell.
I think I mentioned it before, but yes, you are responsible for your frontend CSS. If you need classes or CSS variables in block snippets, you have to overwrite the existing ones. And if you want to have the default blocks in the Panel look like your frontend, you have to overwrite the previews as well. And add classes/styles for your custom blocks of course as well, both in the Panel and the frontend.
As regards the Kirby license, you can ask for a refund at support@getkirby.com.
The funny answer lies here almost at the end:
I have changed the output and pray the rest of the day.
<section class="grid grid-cols-12">
<?php foreach ($layout->columns() as $column): ?>
<div class="col-span-<?= $column->span(12) ?>">
But now i have another funny problem:
When i choose 1/2, 1/2 or 1/4,1/4,1/4 or something 1/2 and 1/4 and 1/4 everything is ok.
But when i choose 3*1/3 or 1/3 and 2/3 in both ways, i have a result looking like 1/12,1/12,1/12
is there any problem with tailwind to show:
<section class="grid grid-cols-12">
<div class="col-span-4">
...
</div>
<div class="col-span-4">
...
</div>
<div class="col-span-4">
...
</div>
</section>
While the same with 1/2, 1/2 is ok, also 41/2 or 1/2+21/4
but three columns are not shown correct.
Solved. The code is not visible for purge, so i have a css_dummy.php with code i miss in the final css.