Tell lessphp to compile css AND less files instead only less? - php

Leafos great php class
http://leafo.net/lessphp/
helps us compile all less files in to 1 css file and call it in our web/template head.
Now this is a great tool but 1 issue I have with it is;
All my previous joomla work has used following css folder files structure
-css
--style.css
--post.css
--comments.css
--color.css
than in template head I call only style.css and within that file
I used
#import url("post.css");
#import url("comments.css");
#import url("color.css");
Now Joomla 3.1 is including leafos class and bootsrap in core and they will have a default less folder placed in template folder where you should place all your less files to be compiled.
in order for me to convert templates to use less and bootstrap I would have to convert all those css files extensions to less
and move them to less folder ,
what I am trying to preserve is backwards compatibility with pre joomla 3.0 templates and making double files kinda makes no sense.
isnt there any way that lessphp can compile already existing .css files from css folder instead me making double files structure?
something like
$less->checkedCompile("css/style.css", "css/style.css");
instead
$less->checkedCompile("less/style.less", "css/style.css");
I tried
placing style.less in less folder and on top do
#import "../../../media/jui/less/hero-unit.less";
.. all other boostrap depending less files..
#import url("../css/post.css");
but the generated file is compiling all bootstrap files and just including the post.css #import and not compiling it
Hope I did not confuse you to much.
any help is appreciated.

If you are using lessc version 0.4.0
try commenting the following lines that says
// don't import if it ends in css
if (substr_compare($url, '.css', -4, 4) === 0) return false;

Related

How to combine SCSS and CSS into single file using laravel webpack mix?

I have an issue with compiling scss and CSS files into a single CSS file using laravel webpack mix, already done much research and try all the possible options but the issue is still not fixed.
The app.scss file includes bootstrap and a custom file but after compilation compiled CSS file contains custom CSS first then bootstrap but I want bootstrap CSS first after that my custom CSS on compiled file, my code looks like this
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
#import '/resources/css/style.css';
But compiled CSS file contains style.css code at the top and then bootstrap at the bottom, how can I reverse this?

Compile some SCSS files to CSS (I am a beginner with Sass)

I am currently new to Sass and my friend gave me a project that contained a Material Design 'template', that he made.
Unfortunately there is no .css file that got all the stylesheets in it.
There are a couple of .scss files though but I do not really know how to compile them all to a .css file.
I figured out that I could use 'gulp', but when I add all the files in the gulpfile.js to be compiled, it doesn't work.
I am wondering if someone could help me over Skype or something that I could share my screen and that someone could fix this for me.
Here you can see that there are many scss files and there are two folders with components and mixins.
Some of the scss files also contain '#import' lines, but I do not know if I have to add those files in the gulpfile.
Here is a screenshot of the components folder:
I could not post a 3rd screenshot because of my reputation but the mixins folder contains the following files:
- _alerts.scss
- _buttons.scss
- _md-shadow.scss
- _placeholder.scss
I hope that someone could help me with this!
PS: It is in a Laravel project!
Thank you so much!
Kind regards,
smke
You can use Scout-App easily with sass and you should create a scss file without undescore (_) to import other scss file with underscore. In Scout-App you have to select input folder that include directory with scss files and select output folder where you want to be css file export.
Luckily, there's a SCSS to CSS converter online. Just go to http://www.cssportal.com/scss-to-css/ and copy the paste the code and press Compile. The CSS code will display below the button for you to copy and paste.

How to add bootstrap cdn or pure.css to a block in concrete5 version 5.6?

I want to add/link boostrap CDN to my concrete5 (v. 5.6) block. I want it to be specific to this particular block only.
I tried to search in the old documentation at
https://legacy-documentation.concrete5.org/developers
but couldn't find anything. I found something in new documentation using assets
https://www.concrete5.org/community/forums/5-7-discussion/how-exactly-do-we-use-asset-registering
but this doesn't seem to work in old version.
Thank You
As said in the legacy-docs (version 5.6.x) under Blocks / Directory Setup / Stylesheets, JavaScript and Other Assets:
The following named items will be automatically added to a page's
header, if the block in question has been added to that page:
view.css
view.js
Additionally, this behavior also applies to any files of any name
within the following directories, should they exist:
css/
js/
So the block's CSS folder (under /application or in a package) is as follows:
blocks/block_handle/css/
You can also use the addHeaderItem call from your view function in the block's controller if you wanted to do something like the CDN, keep in mind that any CSS added will be applied to the whole page unless the classes are specific to the block.

Installing Bootstrap theme in Symfony 2 project

I am looking at installing this theme in my SF2 project, and I note that there are 4 files at the top of the page to download, namely:
bootstrap.min.css
bootstrap.css
variables.less
bootswatch.less
I have the less.php (oyejorge/less.php) parser successfully installed along with bootstrap itself, and I have Assetic setup compressing all my CSS together and outputting this to the page:
<link href="/app_dev.php/css/425e28c.css" type="text/css" rel="stylesheet">
However, I would like to install the Superhero theme in the link above but I can't find any tutorials on how to do this? Is it just a case of overwriting variables.less and importing bootswatch.less?
Also read the Usage and Customization sections of the docs at https://github.com/thomaspark/bootswatch.
If you want to use the theme as is (without customization) you only should include the bootstrap.min.css OR bootstrap.css into your HTML:
<link href="/bootstrap.min.css" type="text/css" rel="stylesheet">
Alternatively you can compile your own version of the theme:
Download Bootstrap's source files at http://getbootstrap.com/getting-started/#download
In the source files replace the less/variables.less file with that download from bootswatch
copy the bootswatch.less into the less directory of the bootstrap sources files
Than, open the less/bootstrap.less and add the following line of code at the end of this file: #import "bootswatch"
compile the modified bootstrap as described at: Error while executing assetic dump (parse error: failed at `&:extend(.clearfix all);`)
Also notice that Bootstrap adds the autoprefixer for vendor prefixes into their build process. The vendor prefix mixins in less/mixins/vendor-prefixes.less are deprecated as of v3.2.0. So you should add https://packagist.org/packages/bit3/assetic-autoprefixer to your assetic configuration too.

CSS / JS not loading in custom Concrete5 template

I've got a custom theme running on the latest stable Concrete5 version.
It's all working great - but tonight I've come to create a variation of an existing template.
Inside the theme/themename/ folder I copied the PHP file for the template.
In the theme/themename/css folder I copied the CSS file used by the existing template.
In the CMS itself I created a new pageType with the alias to match both the php and css file's filename I'd created by copying the previous files.
The PHP / template file is loading fine when chosen as the template for a page, but it's now loading in the associated CSS file.
Cache cleared but to no avail.
Can anyone give me any clues what I'm missing?
This usually is because the css and/or js is hardcoded in the header.
Check the html head (in the template) if the path to the css/js is correct.

Categories