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.
Related
I installed phpspreadsheet on my subdirectory banana(OMG.com/fruits/banana).
And tried to open its sample page.(banana/vendor/phpoffice/phpspreadsheet/samples/index.php)
But it didn't work.
So I followed source, and changed css and js path on Header.php like this.
From <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"/>
To <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
Then the sample page (samples/index.php) shows correctly. So I clicked its sample menu. But it didn't work again. Error code was 404. I opened sample/index.php and observed sample menu link. The link was this.
OMG.com/Autofilter/10_Autofilter.php
But 10_Autofilter.php was not in there. it was in here.
OMG.com/fruits/banana/vendor/phpoffice/phpspreadsheet/samples/Autofilter/10_Autofilter.php
I found the reason is path. But I didn't know how to solve. I thought the easiest way is install phpspreadsheet by composer on root directory. But I thought again and it's not gonna success. because if I install phpspreadsheet on root directory, the sample pages will be on here.
OMG.com/vendor/phpoffice/phpspreadsheet/samples/Autofilter/10_Autofilter.php
But the link was like this.
OMG.com/Autofilter/10_Autofilter.php
Maybe this can be easy fundamental problem. But I don't know how.
Help...
PS. I installed phpspreadsheet on here.
OMG.com/fruits/banana> composer require phpoffice/phpspreadsheet
PHPSpreadsheet is a library, intended to be used by your programs, and not directly accessible through a web interface.... and the examples are written to be run from the command line (if you want to run them).
You need to create a script in your normal home directory that includes the vendor autoloader, and then the classes in PHPSpreadsheet will be accessible to your script
I have the following folder structure:
Previously, the classes were placed directly in /rest/ folder and they were referenced so in autoload.php:
After doing Refactor->Move for all classes in PhpStorm to /rest/class/ directory, PhpStorm does not refactor string file paths (seen on the above screenshot). Does someone know why is that? Standard filename refactor works fine. Is there better way to change folder structure for the project without the need to check all the references in other files?
This issue has been reported some time ago as https://youtrack.jetbrains.com/issue/WI-33398 but did not have much votes there. Would be great if you could vote for it with Thumb Up button and leave a comment to get a devs attention.
I am new to Symfony as well as Sylius. Can anyone guide me how can I change design of Sylius front end. I want to use the Kuteshop template in it?
I want to change the front end UI of the Sylius project.
What I did is:
I copied my css, js, images etc files in web directory in a separate folder with name template (template/asstes/css/, template/assets/js/ and so on). Then I created a folder app/resources/SyliusWebBundle/Views/frontend/Homepage and also I created a file app/resources/SyliusWebBundle/Views/frontend/layout.html.twig. I defined the assets and other components but no result.
My template assets was not showing up, also I was not getting any information in it.
Does it help to get some solution to me?
Thanks so much.
The path must be app/Resources/SyliusWebBundle/views/Frontend/Homepage
I am trying to edit css
"css_pF25-gpJPC5E_dzDNqsHs9AriR_AGzKkzgs-0VLNBgI.css"
when me put any my css in above file like float:left no effect appear in front-end and ,
Why the css file name is too complicated in drupal , what should I do ?
it is in drupal it contain in "C:\xampp\htdocs\drupal_1\sites\default\files\css"
You need to simply create css file at "projectname/sites/all/themes/theme_name/css/abc.css". Write css code.
Clear cache from
if using windows then
"Home » Administration » Configuration » Development » Performance" this path and press clear all cache button.
if using linux
go to the project path for example "/var/www/project_name/" and hit drush cc all it will clear all cache. and changes will be reflect.
Note: You should installed drush module.
Actually drupal merges all css and create a css file with dynamic name.
Hpe it will help you. Happy coding.
I am quite confused how you got "css_pF25-gpJPC5E_dzDNqsHs9AriR_AGzKkzgs-0VLNBgI.css" in your DRUPAL file system.
Since its aggregated CSS file, you wont find any CSS file which has named like that. CSS aggregation is being done by DRUPAL end.
So best way of doing this is, got to following path: In admin menu,
Configuration >> Development >> Performance. In this page under "BANDWIDTH OPTIMIZATION" section, you see "Aggregate and compress CSS files" check box.
DE-select that check box and clear DRUPAL cache. And then inspect element which CSS your are going to change, there you see exact CSS file name which not is aggregated one.Go to that CSS file and make CSSchanges and save.
Then clear Drupal cache and you need to clear browser history also some times.
Then see changes on front end. If changes effected , go to
Configuration >> Development >> Performanace ,check "Aggregate and compress CSS files" check box.
Stop, why you CSS file named "css_pF25-gpJPC5E_dzDNqsHs9AriR_AGzKkzgs-0VLNBgI.css"? Create normal style.css file, put on theme_floder/css/ and include style in theme.info file. But i don't understend you question?
You are trying to edit a temporary file generated by Drupal's cache. Edit your actual CSS file (you can find this in the .info file of your theme) and then clear the cache: /admin/config/development/performance
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;