I want to include mPDF into my WordPress plugin to enable some export to PDF features. However the mPDF files are pretty large at ~98mb.
Are there only specific files I can include to retain exporting to HTML and keeping the formatting? For example, I assume I can remove the fonts I will not be needed. Even then the overall package size is still pretty large. Can any other files/folders be omitted?
Mike,
You can delete all fonts from 'ttfonts' directory and retain only the ones you require. If you are not using any fonts, you can just retain DejaVu fonts and delete others, which will reduce the size of fonts directory from 86.8MB to 8MB & overall library size to 20MB(approx) from 98MB.
Related
Somewhere in my site I have there folders:
(...)/font-awesome/5.0.6/css/
(...)/font-awesome/5.0.6/webfonts/
(...)/font-awesome/5.8.1/css/
(...)/font-awesome/5.8.1/webfonts/
If I include file font-awesome/5.0.6/css/fontawesome-all.min.css, Font Awesome works.
If I include file font-awesome/5.8.1/css/fontawesome.min.css, Font Awesome shows blank squares instead of icons.
It is most likely not due to cache as I've cleared the browser cache and .css cache files.
I remember that in the past, when integrating Font Awesome into a website, I was required to manually change some relative URLs inside the library, but that, if I remember well, was with Font Awesome 4.
I feel however like I'm missing some installation step. I just can't remember since it was "so long ago".
Do you download the .zip file instead of a single all.min.css file?
If not, then download the .zip file, unzip it, and link the main CSS file inside the header.
On the other hand, you can use the CDN link they provide:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Both work perfectly.
Considering the last release note there are some big changes done from 5.0 to 5.8:
Heads Up! This Release Has Breaking Changes
In a recent version, we fixed some issues with using our OTF and TTF font files on mobile projects. The naming, font weight, and version have been modified to be more compatible and stable going forward.
After upgrading your copies of our desktop files, you may need to set the typeface of your text layers again. After doing that, we also recommend double-checking that icons are showing up as expected in your documents. Running into trouble? Get in touch with us and we'll help you out.
You probably need to follow the links there in order to fix your issues:
Install the Ligature-based Font Files
I also advise you to upgrade slowly to a lower version because actually you are moving by the 7 version and it will difficult to know the real issue. So start moving to 5.1 then 5.2 and so on until you find which version is the culprit.
Releases ยท FortAwesome/Font-Awesome
Follow Upgrading Guide for more details about the upgrade between versions.
I found what the issue was. It's something that is specific to my site/application.
I minify most of my .css files using a PHP library then merge them using a homemade library (only the second library is homemade).
Then because, the resulting .css file isn't in the same locations. Links to webfonts get broken. That was the step I was forgetting: making all the relative ../webfont links semi-relative instead.
Everything works perfectly now.
I am making a website with concrete 5.7. and to edit some things i have copied the Elemental theme and created my theme. But there are two things i don't know how to edit:
1)Is there a way to define how the elements are going to be disposed in mobile version or at least at which size the autonav is going to be changed by the menu button?Also in small screens the logo becomes really small and all the elements appear disordered.(attached file shows those problems)
2) When i change the colors of my website,(settings->design->customize) where does this changes store, because for me it would be easier to use a text editor rather than doing it with the tool. I don't want to create a new color preset, only to know where these changes are stored.
Thanks for everything.!
Photo: https://plus.google.com/photos/109724001772064952270/albums/6114581190555851105 The first one is the original and the other is the mobile version.
That's actually a bit complex. In the elemental folder, there's a css folder. Inside that folder there's a bootstrap-modified.css file that is responsible for many things including the grid. As the name suggests, it is minified so hard to read and modify.
You also have a file called main.less and several folders containing a lot of other less files.
main.less gets processed and compiled into a css file on the fly, meaning when the site is visited and the css file was not generated yet or when less files were modified.
Anything you want modified you should modify in the less files.
Look for media queries "#media" to find styles specific to certain screen sizes.
how elements are disposed in mobile version is really something you need to deal with through the use of CSS. It is not really something Concrete5 has control over.
The changes to design made through settings->design->customize are saved in the database.
BUT the things you can modify are defined in the site's css file. You could simply modify the css file directly using any text editor instead of customizing design through the dashboard.
I am using bootstrap.css and I found that there is another css file named bootstrap-combined.min.css, is there any difference in style? Is there any need to include both css files? Which one is more preferable?
The file bootstrap-combined.min.css is for Bootstrap v2, it is the combined css file of bootstrap.css (the main css file) and bootstrap-responsive.css (the responsive Bootstrap styles). It's exactly the same as using those two files separately but it just saves you an extra request.
The "min" part of the filename just means that it has been minified, which is to say that it has had all the unnecessary white-space/comments/etc removed.
Conclusion
bootstrap.min.css = compressed version of bootstrap.css
bootstrap-combined.min.css = bootstrap.min.css + bootstrap-responsive.min.css
Basically min is minified version, which is intend for production. In normal version you can see through codes and edit (In some cases, necessary though). Sizes are remarkable reduced in minified version and relieve bandwidth, time and memory.
The combined indicates a collection of bootstrap components merged into one file. The min indicates a minified file, meaning:
Minification (also minimisation or minimization), in computer
programming languages and especially JavaScript, is the process of
removing all unnecessary characters from source code without changing
its functionality. These unnecessary characters usually include white
space characters, new line characters, comments, and sometimes block
delimiters, which are used to add readability to the code but are not
required for it to execute.
The minified combined version is most preferable for production deployment, as it minimizes the number of requests and bandwidth used, thus improving page load speed. During development you may find a use for non-minified non-combined files for debugging purposes, but that's unlikely. In general, the combined-min version is just fine.
from the comments: afaik in general the min.js versions of .js files dont have any comment-sections or unneccessary blank-spaces to reduce the file size - at the end of the day, as you already said, there's no difference in functionality. in case of bootrap: you dont have to include both of them (as shown here).
When i started using bootstrap, I put in a bunch of colors and fonts into their Customize page, then downloaded what ends up being compiled css (from the less).
i've since lost whatever changes i put in there, and they seem to be spread throughout the code. Since it doesn't actually include the less customizations in the download, there doesn't appear to be a way to get the values i changed back out (to upgrade)
is there a utility out there that pulls the custom colors, fonts, sizes, etc out of bootstrap.css so i can reapply on a new version of bs? or better yet re-generate the less so i can keep it separate and compile new bs.css files as they bump versions
So I'm using the Bootstrap Customize and Download page to generate a version of the Bootstrap files with custom colors. I got the idea that I wanted to add some other colors (e.g. #purpleLight) to make upkeep of the site design easier, so I look through the downloaded contents the site generates, and my customizations don't appear to be anywhere, let alone somewhere for me to add others.
Here's what comes in the bootstrap.zip the site spits out:
css
bootstrap.css
bootstrap.min.css
img
glyphicons-halflings.png
glyphicons-halflings-white.png
js
bootstrap.js
bootstrap.min.js
...and that's it.
So, no colors anywhere in these files as far as I can tell. No LESS files included in the download. Am I doing something wrong? Is the site doing something wrong? Am I just not seeing something that is in fact there? To the best of my diffing abilities, the downloads seem identical regardless of the customization options I choose...
And, pending whose messing up here, what would be the alternative best way for me to customize a color palette for my Bootstrap site?
You can't add more LESS variables with the custom download tool. You can only redefine the values of the existing variables. Upon download, the tool compiles with those set variables but since you don't get the LESS files, you won't be able to add more variables afterwards, like #purpleLight you mentioned.
If you want to extend Bootstrap with more LESS variables, you have to download the full source and compile your css from the included LESS files. There's a file variables.less in the less/ folder where can add your #purpleLight.