I am trying to get UnCss to produce a cut down version of my master CSS file, for now I only want to get this working on the homepage as a test.
I am using the following code:
uncss: {
dist: {
options: {
stylesheets : ['localhost/assets/css/master-2014.css'],
urls : ['localhost/en-gb/']
},
files: {
'css/app.clean.css': ['localhost/en-gb/']
}
}
}
What I am trying to do here is read master-2014.css from my local server (and eventually a remote url e.g. google.com), then look at the page that I have got the stylesheet from (my homepage localhost) and determine which style is needed. I finally want to then produce this into app.clean.css.
Currently I cannot get this to work for the life of me I have tried other variations like:
files: {
'css/app.clean.css': ['**/*.Master', '**/*.ascx']
}
This does not work.
I have also seen people try something like this:
files: {
'css/app.clean.css': ['index.html']
}
Where index.html is a blank html file. This is the only one that succeeds but it just creates me a css file which only contains css for html and body. The rest all throw the following error:
Running "uncss:dist" (uncss) task
Warning: Destination (css/app.clean.css) not written because src files were empty. Use --force to continue.
Aborted due to warnings.
All other examples that I can find are for WordPress which is PHP and this is a .Net site.
I would be very grateful for any help.
Related
As I am extremely new to programming I might just be overlooking some obvious issue so please bare with me.
I wanted to use custom snippets to extend the already existing ones to speed up my future workflow.
I created a snippets.json file, which contains this code
{
"html": {
"snippets": {
"page": "header>h1^main+footer{${0:©}}",
"a:link": "a[href='http://${0}']"
}
},
"css": {
"snippets": {}
}
}
when typing page, then pressing tab (or ctrl+e) in my HTML file, it doesn't output the Markdown, instead it just prints header>h1^main+footer{}
I put the a:link in there because it's a snippet that already exists within Emmet to test if the issue was with my custom snippets file.
And yes, the issue persists, instead of giving me the Markdown it only says a[href='http://']
Inside the Atom settings are 2 checkboxes:
Format Line Breaks
Use Emmet Comments
I have checked and unchecked both individually and together, nothing has resolved the Problem.
Settings inside of Atom
I'm trying to localize my app with angular translate.
here are my modules :
angular.module('myapp', [
'angular-meteor',
'ui.router',
'ngMaterial',
'ngMessages',
'ngAnimate',
'ngCookies',
'pascalprecht.translate'
]);
Then my config :
angular.module('myapp').config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'client/lib/translation/',
suffix: '.json'
});
$translateProvider.preferredLanguage('en-US');
}]);
my en-US.json file content :
{
"TITLE" : "hello"
}
And I'm testing it with this html :
<h1> {{"TITLE" | translate}}</h1>
I tested it with a table in a variable and it works well, the issue seems to be that my .json is not found or ignore, because it display
TITLE
instead of
hello
I'm currently working on the same issue. What it seems to be is that the digest cycle is running too early due to the external file/s being loading asynchronously.
A workaround: In your HTML use the attribute directive instead.
Example:
<p data-translate="TITLE"></p>
Disclaimer: This may not be the best solution, I am still learning AngularJS myself!
Actually I found the issue, I had to put my locales files in the public folder. So this is fixed.
This is a fully working example:
http://plnkr.co/edit/Ibq4EaFcvyUPGpqb81Jo?p=preview
To use a translation one can also use something like
{{"TITLE" | translate}}
or:
<h2 translate="TITLE"></h2>
I also had issues with loading the files, I eventually found the starting path seems to be the www folder.
Then in the config start without a forward slash, so this is what works for me in my app config:
.config(function ($translateProvider) {
//$translateProvider.fallbackLanguage("en");
$translateProvider.determinePreferredLanguage();
$translateProvider.useStaticFilesLoader({
prefix: 'js/translations/locale-',
suffix: '.json'
});
$translateProvider.use('en_US');
$translateProvider.preferredLanguage('en_US');
})
I found it by using the chrome debugger (chrome://inspect), it shows errors in the console that are not showing up in the usual terminal when running ionic with -lc.
I hope that helps anyone :)!
I have lot of CSS ressources for my website.
I decided to use gulp to concatenate all of them, by doing the following :
gulp.task('concat_style', function() {
return gulp.src(['./public/adminLTE/bootstrap/css/bootstrap.min.css',
'./public/adminLTE/dist/css/AdminLTE.min.css',
'./public/adminLTE/dist/css/skins/skin-red.min.css',
'./public/stylesheets/font-awesome.min.css',
'./public/stylesheets/ionicons.min.css',
/*and many more*/])
.pipe(concat('styles.min.css'))
.pipe(gulp.dest('./public/stylesheets/'));
});
NB: I know I could reference all the .css files with a wildcard expression but I first though my problem was caused by the order by which they were concatened, so I referenced them in the same order they are in my non-concatened version.
In the concatened version I get the following error :
Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag
The link : http://localhost:3000/fonts/glyphicons-halflings-regular.woff2 works when I access it with my browser.
How can I solve this error ?
The problem was that I was concatenating my css with the default concat function of gulp, and the needed font was required by an #import directive (that must always be on top of css file, but was in the middle of the concatened css file).
I ended up using gulp-concat-css, it solved the problem
I am using Meteor.js as well as router.js (the package) in order to render other pages of my website. However, all my templates (the other pages) are in one html file. How can I split my templates into different html files and still use router.js?
One sample router configuration for a template is:
Router.route('/events',
function(){
this.render('eventsPage');
},
{
onAfterAction: function() {
document.title = 'Events';
}
});
Where /events is the url associated with the template 'eventsPage'. How can I put the eventsPage template into a separate html file?
Thanks in advance.
You can have each template in separate file, Meteor detects all of your html code.
HTML files in a Meteor application are treated quite a bit differently from a server-side framework. Meteor scans all the HTML files in your directory for three top-level elements: , , and . The head and body sections are separately concatenated into a single head and body, which are transmitted to the client on initial page load.
Read more: http://docs.meteor.com/#/full/whatismeteor
So your HTML file structure depends mostly on your preference.
You should also take a look at:
http://meteortips.com/first-meteor-tutorial/structure/
I'm trying to create an app that loads a website and then adds some custom CSS to adjust it to a mobile device.
I'm using window.open to load the page successfully, and I have a callback on loadstop where I'm calling browser.insertCSS, this is where the problem is.
If I do something like this:
browser.insertCSS({code:"body{background-color:red;}");
The style is applied correctly. However if I do this:
browser.insertCSS({file:"mobile-style.css");
And add the same CSS to the file, it doesn't get loaded
I have tried different paths (putting the file in the www folder, in the css folder, in the same folder as the JS file, and referencing it with "./mobile-style.css", "mobile-style.css", "/www/mobile-style.css", "/mobile-style.css" but none of them seem to load the file correctly.
I saw another post What should file paths fed to insertCSS() be relative to? where this same question was asked, but there is no accepted answer (I have tried the suggestion there and it doesn't work).
Any help would be greatly appreciated.
Thanks
Will
you have to wait until your inAppBrowser page loading finishes.
You must add an event listener:
var inApp = window.open('mypage.html', '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
inApp.insertCSS({
file: 'inAppStyle.css'
},onSuccess);
});
EDITED
Use this path for your android projects file:///android_asset/{your folder}
INFO: https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout
I couldn't find the right local path. Instead, I just uploaded the css file to the web and provided a regular URL
file: 'http://mywebsite.com/path-if-needed/my.css'
Not ideal to have an external dependency, but not a big deal since InAppBrowser itself requires internet access.
I probably know why it won't work, it is because your path isn't right, this css file should not put in www folder, neither the cordova project folder, u should put it into the server, for example, if ur browser is to visit http://192.168.1.1/admin, then the cordova only fetch this file when the browser is under the 192.168.1.1/admin, it fetch the file under the server directory.I don't know if u use any debug tool , if u use one, it's easy to find out what went wrong, ur console will log the error which path it fetch the css file and didn't get it.
If you want to add an external CSS file stored locally in the APP's sandbox and not around in the Internet, this is the only way, that is, you get the external file, you store it into a string variable, and then you insert such code into the Browser.
var inAppBrowserRef = cordova.InAppBrowser.open(url, "_blank", "location=no");
//when load stops call loadedCallbackFunction
inAppBrowserRef.addEventListener('loadstop', loadedCallbackFunction);
function loadedCallbackFunction() {
console.log("InAppBrowser Window loaded");
$.ajax({
type: "GET",
url: cordova.file.applicationDirectory + "www/css/myExternalCSS.css",
dataType: "text",
success: function (CSScode) {
inAppBrowserRef.insertCSS(
{ code: JScode},
function(){
console.log("CSS code Inserted Succesfully into inApp Browser Window");
});
},
error: function () {
console.error("Ajax Error");
}
});
}
You need the cordova-plugin-inappbrowser