#seven-phases-max I have refactored my code a few times based mostly on your answers to my stackoverflow.com posts but would like to get your feedback to my latest and hopefully final variation:
Ultimately I ended up using :extend to get copies of css properties of styles not under my control:
Below is example of approach I've used in several places create css from base css/less selectors defined in less files outside of my control and optionally over-ridden in another less file outside my control:
.CODE-COLORING-ICON {opacity: 0.0};
Below code works works with and w/o above css / mixin line
.CodeMirror-gutters:before,
.CodeMirror-gutters:hover:after {
&:extend(.CODE-COLORING-ICON);
}
In other places, I created created empty selectors fearing less would not like an extend like above with ".CODE-COLORING-ICON" not defined. I was surprised the above code worked.
The end game is to merge css from theme with override values from another file.
Related
Currently I'm developing a website using the following stack:
vue.js
#vue/server-renderer
vite
tailwind CSS
SSG was chosen as the rendering mode.
Tailwind, as described in the documentation, allows you to specify directories and file extensions (content property) , in which he will try to find the classes, in order to leave only those that are actually used in the project.
As a result, the 'main.css' file is formed, in which only those classes that are used remain.
Next, I just take this file and include it in every page that was rendered during the build phase of the project.
This results in:
index.html - main.css
about.html - main.css
blog.html - main.css
It turns out that main.css file may contain classes that are needed only for one of the pages and are not needed for others.
I would like to implement the following:
Take main.css which turned out
Render a page, for examle about.html
take only those styles that are needed for about.html page from the main.css file
create a new about.css file
link the resulting about.css styles to about.html
I’ve already tried to implement this using an awesome PurgeCSS tool as following:
render page content usind #vue/server-renderer's renderToString() method;
Pass an resulting css and html sources to PurgeCSS
here is an example
But there are too many corner cases around this solution, such as:
Dynamic classes which can be added to the html on the client side
Some components may be missing in rendered html and their content will be added later (for example, v-if directive was used on the component)
A few takeaways:
PurgeCSS is not needed anymore since Tailwind v2 (the latest being v3.x)
as far as I know, you cannot have code-splitting with Tailwind, not that it matters anyway since it will still perform okay with further optmizations
the classes that will be generated, will be only once for the whole app (hence no need to have a bg-red-500 for index or about page, both are referencing the same unique declaration)
if you want to have SSR/SSG, I recommend the usage of Nuxt (in it's v3 if you're using Vue3 or plan to have anything long-term)
dynamic classes are not possible with Tailwind, you can create things like bg-[#ccc] but it goes on the opposite side of what Tailwind is achieving and should be used exceptionally
for Tailwind's content, still the defaults on this page, section Configure your template paths, no need to do anything crazy or complicated
if you want to have some scoped/local style, style to using style scoped, you can still use Tailwind inside of those tags tho
if you want to write vanilla CSS into dedicated CSS files like index, about, blog etc, then Tailwind is probably not the best approach because this is not how it is supposed to work
stay simple, the performance will still be amazing. Only focus on not having too many screens, colors etc that you're not using
you could run some bundle size tests to see if the CSS is taking a huge chunk in terms of size. Will probably not, but if it still is: you can then start making complex configurations
JS will be far harder to reduce and be more impactful regarding the performance (because of how a browser works with it: parsing, executing is indeed blocking the main thread)
I am building a wiki app with lots of static pages (for articles).
I am using the same layout I use everywhere in the mother app, and I want to include only content parts with the articles into a single template based on the request href. For example, if href is "/wiki/article_one", I would like to include partial template article_one.pug in the layout.
Here is my Pug code for the layout
extends partials/layout
block head
include partials/head
block header
include partials/header
block content
include partials/wiki/main // here I would like to replace the last main with partial template name
block logs
include partials/logs
block footer
include partials/footer
block scripts
include partials/scripts-chat
partials/wiki/#{article} approach doesn't work. I looked at mixins but mixin names are also fixed. At this point I can make bunch of full article templates and copy/paste layout. Or there will be huge "if else if" block where I will match the right mixin (really hate this one). Is there a better way?
I have tried to find an answer, but all I get is answers on how to control the speed when implementing Twitter Bootstrap by your self.
I cannot figure out how to do it in TYPO3. I think it should be done through TypoScript, but how?
In Bootstrap 3's Carousel, you can set the option interval or data-interval, see http://getbootstrap.com/javascript/#carousel.
You know that already. Here's how I'd do it:
First you have to find out if the extension can set that parameter at all. Supposing the manual is quiet on that, you want to check the Constant Editor under Templates > Constant Editor first. No luck yet.
So you will have to look at the code of typo3conf/ext/bootstrap_package. Everything that can be set via TypoScript will probably be in /Configuration/TypoScript/: constants.txt and/or setup.txt. Nothing there for the carousel, though.
Now the I would search for interval in the entire extension, using your favourite editor. Ah, there you are: In the file /Resources/Private/Templates/ContentElements/Bootstrap/Carousel.html you will find the interval of 10seconds hardcoded:
<div id="carousel-{data.uid}" class="carousel slide{f:if(condition: '{data.layout} == 110',then:' carousel-small')}" data-interval="10000" data-ride="carousel">
Of course, do NOT edit the extension as you have to keep it updateable. No problem, though.
If you search for Carousel.html, you will find it in /Configuration/ContentElements/Bootstrap/Carousel.ts:
tt_content.bootstrap_package_carousel = COA
tt_content.bootstrap_package_carousel {
10 =< lib.stdheader
20 = FLUIDTEMPLATE
20 {
file = {$plugin.bootstrap_package_contentelements.view.templateRootPath}Bootstrap/Carousel.html
partialRootPath = {$plugin.bootstrap_package_contentelements.view.partialRootPath}
layoutRootPath = {$plugin.bootstrap_package_contentelements.view.layoutRootPath}
}
}
So that's where the path to the template is set. And oho! The thing inside the curly brackets is a constant. Turns out that right at the beginning, we could have set a complete new path to include a copy of all bootstrap templates from bootstrap_package/Resources/Private/Templates/Page/ and do the modification there. As well as for Partials and Layouts, which are other, larger and smaller chunks of fluid templates (cf. http://typo3.org/documentation/article/the-fluidtemplate-cobject/).
If out of some reason you'd only like to modify that very specific part of the bootstrap package, you can set something like this in your TypoScript:
tt_content.bootstrap_package_carousel.20.file = /path/to/my/template/ext/Bootstrap/Carousel.html
Now all you have to do is to create a copy of the carousel template and edit it at will - in the rendering process, your own template will be used, featuring faster intervals.
This should also demonstrate the overriding powers of TypoScript nicely - you can do stuff like that at any point in the page tree for the branch you want.
Also, I'd like to point out that I find this a very good approach to the authoring of TYPO3 extensions: instead of having dozens and dozens of constants that could be set in the backend like in the old days, we now have replaceable fluid templates with clear structure. Much more maintainable and easier to use this way!
I am trying to implement a basic theme roller functionality using LESS CSS.
Suppose I have the following Less Code, which compiles to a .css file included in the page:
#main-background-color: #809BB8;
body
{
background-color: #main-background-color;
}
I would like to change the #main-background-color dynamically with javascript based on an user action (Color Picker) and compile the LESS code dynamically and refresh the styles of the page so that the user changes are reflected immediately in the browser.
Is this possible at all?
Please advise!
Thanks
you could try using less.js functions like:
less.refreshStyles()
or
less.modifyVars()
you can maybe read some more on this here: Dynamically changing less variables
Something along this lines with JavaScript and modifyVars might work:
var $picked-color = "#809BB8";
less.modifyVars({
'#main-background-color': $picked-color
});
i am using TwitterBootstrap and i want to pass button width dynamic..like below code
I want to pass "#wth" value Dynamically from client side(from view(MVC)).
Right now it's comingStatically on varibles.less file....But i want to pass directly from view(MVC).
so, what is the Best Solution ?
Although it gives the impression of being able to do dynamic things if you use less.js in the browser, those styles are all compiled into CSS files, and have fixed values by the time they are applied to your html. So you can't change values of Less variables after the page loads.
If you need to change the width of a button dynamically based on a few pre-set sizes, I'd say you should add classes to your css (small, medium, large, etc.), and then dynamically add that class to your CSS via Jquery's addClass method.
If you need to set the width directly, I'd use Jquery's css method.
If you're going to be doing a lot of this sort of thing, you may want to look into using a data-binding library that can bind a Javascript object to your html styles, such as Knockout.