As an experiment I'm going to try use sass and 960gs system together on sinatra, but it occurs many trouble with this. Has nobody any idea what can go wrong in my case?
app.rb:
get '/reset.css' do
sass :reset
end
get '/960.css' do
sass :'960gs'
end
get '/main.css' do
sass :main
end
get '/' do
erb :index
end
layout.erb:
<link rel="stylesheet" href="/reset.css" type="text/css" />
<link rel="stylesheet" href="/960gs.css" type="text/css" />
<link rel="stylesheet" href="/main.css" type="text/css" />
960gs.sass, reset.sass, main.sass is in views subdirectory, but only main.sass renders whe I run application.
Thanks for help.
Greetings
Z.
I'm sure I've given this answer before but couldn't find it…
My advice, having used the route you've tried above in the past, is to precompile assets such as these. I use Guard along with Guard-SASS with a line like:
guard 'sass', :input => 'app/views/stylesheets', :output => 'app/public/css', :style => "compressed"
and then use normal stylesheet links in the layout. It's easier to manage and faster.
Related
So I need to add the attribute media="all" to these two link tags:
<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/farmers/clientlibs/clientlib-base.css" type="text/css">
but my local HTML file is configured as:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.css # categories=['farmers.new.libraries','farmers.new.base']}" /> </sly>
It is a language called HTL, HTML Template Language. There's a way to add attributes via HTL but you need to create a whole java class in the back end and call it, it's a headache.
I want to know if I can add some javascript to append the attribute media="all" to the link tags to these specific CSS file path.
I was thinking of putting both paths inside a div and then with javascript find that div and append an attribute to each link tag inside that div.
var head = document.getElementsByTagName('head');
var element = document.createElement('link');
element.rel = 'stylesheet';
element.type = 'text/css';
element.href = '/etc.clientlibs/farmers/clientlibs/clientlib-libraries.css';
// Here's the magic
element.media = 'all';
head.appendChild(element, head.firstChild);
setTimeout(function () {
element.media = 'all';
});
A script tag is being created and I want to add async="" to this:
<!--/* Include Context Hub */-->
<sly data-sly-call="${clientlib.js # categories='granite.utils'}" />
<sly data-sly-resource="${'contexthub' # resourceType='granite/contexthub/components/contexthub'}" />
Yes, it looks fine. But your code has a mistake. You should get the first element from the collection to access <head></head> element.
var head = document.getElementsByTagName('head')[0];
Why would you do that? Just do not use the clientlib mechanism. Most frontend developers will use their IDEs to build and minify CSS and JS anyway so there is not much to be lost if you import those artifacts at buildtime and add the tags in your code directly in the way you need them.
Suppose I have files vendor/lib.js and index.html in my PWD. I am adding a script tag to index.html (cursor position denoted by |):
....
<script src="vendor/|"></script>
....
Then I hit C-TAB and the string "vendor/" gets completed to "vendor/lib.js" (or suggestions are shown if there is ambiguity).
More formally, I want this functionality to be available for several attributes of the specific set of tags. For example, <script src=""/>, <a href=""/>, <link href=""/>, <img src=""/>, and so on.
Is there a minor mode for that? If there is no, I will appreciate any insights on how it can be implemented.
Following coffee-script code:
try
any_error_here
catch err
alert err.stack
Gives following stack trace:
ReferenceError: any_error_here is not defined
at eval (coffeescript:5:3)
How to get coffeescript line number for this stack (line 2)?
Here is simple html with same question:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Coffee-script stack trace problems</title>
<script type="text/javascript" language="javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
</head>
<body id="dt_example">
<script type="text/coffeescript" language="javascript">
try
any_error_here
catch err
alert err.message+'\n'+err.stack + '\n\nWhat is coffeescript line number for this stack?'
</script>
</body>
</html>
This sounds like a problem for source maps.
When you compile your CoffeeScript, you can generate a source map by specifying the -m option:
coffee -c -m so.coffee
In browsers that support source maps (e.g. Chrome), the CoffeeScript file will appear in the Sources tab, and errors and log statements will refer to the corresponding line in the CoffeeScript file.
For more information, check out the HTML5 tutorial on source maps, and a short article about using source maps with CoffeeScript.
If you have a source map, you can also use it to parse a stack trace string and refer back to the original uncompiled file as outlined in this question.
I am defining multiple CSS Media Queries for different vieqport or device widths...
So my question is can 2 CSS Media Query definition blocks overlap OR only 1st match gets applied. How does it work ?
Also what is the correct method to apply for multiple devices..i mean the order of defining ?
you can combine multiple media queries in a comma-separated list; if
any of the media queries in the list is true, the associated style
sheet is applied. This is the equivalent of a logical "or" operation.
https://developer.mozilla.org/en/CSS/Media_queries
So
This is the equivalent of a logical "or" operation
makes it look like only one match is applied.
http://reference.sitepoint.com/css/mediaqueries seems to confirm this as well.
If this is true (and it is untested by me), then I would create a common stylesheet to deliver all the common styles no matter what media query is matched and then have device independent stylesheets with additional styles for each targeted device.
It's weird. If you write:
<link media="screen and (max-width: 1250px)" href="/css/small.css" type="text/css" rel="stylesheet" />
<link media="screen and (max-height: 850px)" href="/css/small.css" type="text/css" rel="stylesheet" />
It acts like a XOR (having 2 stylesheets). If both conditions are met (width < 1250 AND height < 850) the stylesheet is not applied.
But if you write:
<link media="screen and (max-width: 1250px), screen and (max-height: 850px)" href="/css/small.css" type="text/css" rel="stylesheet" />
It works fine. So comma is the solution for everything.
i am wondering using Zend Framework's view helpers, ... code below ...
$this->headLink()->prependStylesheet("css/style.css")
->prependStylesheet("css/prettify.css")
->prependStylesheet("css/960.css")
->prependStylesheet("css/text.css")
->prependStylesheet("css/reset.css");
$this->headScript()->prependFile("js/site.js")
->prependFile("http://www.google.com/jsapi");
echo $this->headLink();
echo $this->headScript();
this is output
<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/text.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/960.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/prettify.css" media="screen" rel="stylesheet" type="text/css" >
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/site.js"></script>
how can i echo links and scripts the html5 way where i do not need type="text/javascript" and rel="stylesheet" all that
You could create your ouwn helper, and put it in your view/helpers/Headlink.php, exrtend the original Zend Framework ones .. and just override the part you wish to make different.
For sure a better option then editing Framework files ...
Just pass empty or null attribute values to the helper or create your own helper (with the same name, but in different namespace), overloading the default behavior of the standard helper.
Making changes in source files of the framework is not a good solution.
zf/library/Zend/View/Helper/HeadLink.php:
in function createDataStylesheet
try to change this:
$attributes = compact('rel', 'type', 'href', 'media', 'conditionalStylesheet', 'extras');
to this (or anything you want)
$attributes = compact('type', 'href', 'media', 'conditionalStylesheet', 'extras');
If it is working you can make your own helper that inherit Zend default and override this method.
And in case of js try to do:
...->prependFile('yourfile.js', '');