I've just installed Grunt and grunt-svgstore and am using it to compile my folder of SVG's into one application.svg where each icon has a unique id that I can reference using:
It works fine for some icons, but for others, part of their shapes turn black. In the case of the ruby logo I am linking to above, it shows like: http://cl.ly/image/0X2J0f3i0C1X/Screen%20Shot%202014-08-03%20at%2011.02.47.png
The actually SVG file can be found here: http://cl.ly/2k012T020d2S/ruby-logo.svg
If I open the ruby-logo.svg file in illustrator, it looks fine. I have rexported it, ensured all settings are correct and it still happens.
Any suggestions?
Thanks,
Neil
Solved by adding the following styles to the application.svg import at the top of my document:
width: 0;
height: 0;
visibility: hidden;
Use the "style" option instead..
eg:
svgstore: {
options: {
prefix : 'icon-', // This will prefix each ID
svg: {
viewBox : '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg',
style: 'display:none;' // This line might help you!
},
cleanup: ['fill','stroke']
},
default: {
files: {
'<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.svg': '<%= app_files.svgIcons %>'
}
}
},
Related
When I use the bin/watch-storefront.sh my custom font does not load properly.
My fonts are defined like the default font in a own file like
/* /MyTheme/src/Ressources/app/storefront/src/scss/vendor/_outfit-fontface.scss */
...
#font-face {
font-family: 'Outfit';
src: url('#{$app-css-relative-asset-path}/font/Outfit/Outfit-SemiBold.woff2') format('woff2'),
url('#{$app-css-relative-asset-path}/font/Outfit/Outfit-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
...
When I run bin/console theme:compile && bin/console assets:install The fonts get loaded just fine on the regular website.
The URL of the font files is like https://my-site.de/theme/f9cf8c2bbd24d1ca2941b5120cde3278/assets/font/Outfit/Outfit-Regular.woff2
But when I run the hot-proxy via bin/watch-storefront the compiled CSS font path is like http://my-site.de:9998/bundles/storefront/assets/font/Outfit/Outfit-Bold.woff2
I looked into the directories and my fonts are not located in storefront/assets but in mythemeplugin/assets
The wrong path seems to be exported to /var/theme-entry.scss where it already sets the $app-css-relative-asset-path to
$app-css-relative-asset-path: '/bundles/storefront/assets'; $sw-asset-public-url: '';
I tried to replace the variable $app-css-relative-asset-path with a hard-coded ../assets/ in my *-fontface.scss but this will cause a compile error in the hot-proxy.
What can I do to make the fonts load properly in the hot-proxy and the normal site?
See this issue on GitHub with a possible workaround.
Adding to the description, you'll have to change the type of your style property in theme.json to an object:
{
// ..
"style": {
"app/storefront/src/scss/overrides.scss": [],
"#Storefront": [],
"app/storefront/src/scss/base.scss": {
"resolve": {
"my-theme-env": "app/storefront/env/default"
}
}
},
// ...
}
In the gruntfile.js i wrote:
// Css Purge
css_purge: {
options: {
"verbose": false,
"no_duplicate_property": true,
},
files: {
src: 'css/bigfile.css',
dest: 'css/purged.css'
},
}
Just to test the bigFile.css is :
body {color: red;}
body, p {color:red;}
p {color: red; font-size: 24px;}
#test p {color: red;}
So terminal message is:
Running "css_purge:files" (css_purge) task
"css/" has been created
Thu May 12 2016 01:33:27 GMT-0400 (EDT) Success! css/bigfile.css : css/purged.css
But the new file purged.css is the same as bigFile.css
Ok just figure it out. It removed only identical rules. So if I have exactly same rule it will be removed in output file. Is there a tool that remove extra css like in my exemple file body,p {color:red;} is extra code since I already have body {color:red;} ?
I used Compass and it compiles all Sass files into CSS with the same name. For example my-style.scss will become my-style.css.
All tutorials about grunt-sass that I found mapped the file name one by one, manually like:
sass: {
dist: {
options: { style: 'compressed' },
files: { 'css/my-style.css': 'sass/my-style.scss' }
}
}
Is there a way to make it more flexible? So I don't need to change the Gruntfile whenever I have new Sass file.
Thanks
Try this format for specifying your source and destination files:
sass: {
src: {
files: [{
expand: true,
cwd: 'source/styles/',
src: ['**/*.scss'],
dest: 'destination/styles/',
ext: '.css'
}]
}
}
This reads as "take all files matching *.scss in source/styles/ and its subfolders, process them and put them into destination/styles/, changing extension to .css. See also http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
You should use the universal notation:
sass: {
dist: {
options: { style: 'compressed' },
files: { 'css/*/**.css': 'sass/my-style.scss' }
}
}
In this case, the Grunt will go for all *.css files inside the css folder (including subfolders) regardless of the file name, and compile to my-style.scss
I'm not able to compile the "main" bootstrap.less into '<%= pkg.name %>.css'. I'm getting this error running grunt less:
Running "less:dist" (less) task
>> ParseError: Syntax Error on line 643 in bower_components\bootstrap\less\mixins.less:643:25
>> padding-right: (#grid-gutter-width / 2);
>> &:extend(.clearfix all);
>> }
Warning: Error compiling LESS. Use --force to continue.
Aborted due to warnings.
My configuration for less task is fairly simple:
less: {
options: {
strictMath: true
},
dist: {
files: {
'dist/assets/css/<%= pkg.name %>.css': [
'<%= bootstrap_less %>/bootstrap.less',
'src/assets/less/style.less'
]
}
}
},
// Arbitrary properties used in task configuration templates.
bower_components: 'bower_components',
bootstrap_less: '<%= bower_components %>/bootstrap/less'
Error line in mixins.less (not modified by me in any way):
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: (#grid-gutter-width / 2);
padding-right: (#grid-gutter-width / 2);
&:extend(.clearfix all);
}
Please also not I'm new to Grunt and maybe I'm missing something.
Perhaps your version of less is outdated? :extend() is a new-ish feature of Less.
I am trying a implement a really simple layout using BorderLayout.
var summary = new Ext.Panel({
region:'west',
id:'summary',
title:'Summary layout',
header: true,
split:true,
collapseMode: 'mini',
collapsible: true,
width: 200,
minSize: 175,
maxSize: 400,
layout:'vbox',
align: 'stretch',
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
flex: 1
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings',
flex: 1
}]
});
The layout renders well, but when I change the width using the handle, the two panels inside the vbox don't resize.
I tried any kind of configuration I thought of, but i did not work.
(layout fit, width auto, autoWidth, etc...)
What do I miss? Thanks
For me, it doesn't work.
But this code works :
layout:{
type:'vbox',
align:'stretch'
}
I finally found by myself.
I set the layout options not correctly
I had to change to
...
layout:'vbox',
layoutConfig: {
align: 'stretch'
},
items: [{
...