I'm trying to use Foundation in a pre-existing Rails 5 project, but none of the Foundation styling is actually loading.
I've been through the following steps:
Add gem 'foundation-rails' to the Gemfile
Bundle
Run rails g foundation:install from the command line, overriding application.html.erb (then pasting back the deleted codes, without overwriting any of the new lines)
Rename application.css to application.scss, since (inside the original multiline comment) I'm running *= require foundation_and_overrides
Restart server, reload pages with some foundation-specific html added, eg, in application.html.erb:
<div class="row">
<div class="large-4 columns">
Testing columns
</div>
<div class="large-8 columns">
<%= yield %>
</div>
</div>
But the layout is unchanged (ie, splodged into the top-left of the page).
I've checked that the foundation_and_overrides.scss file is getting successfully loaded by adding some test styles in there which are getting picked up - but nothing is coming through that I haven't added myself.
What might I be doing wrong? (I realise I haven't included much code in here, because I'm not sure where the error might be, so I don't want to do a huge code dump).
You need to rename that file to application.scss and add #import "foundation_and_overrides";
and in your app/assets/javascripts/application.js add //= require foundation
$(document).foundation();
I was having the same problem and the thing that fixed it for me was overriding the conflicted files. If you run rails g foundation:install and it gives you the option to override the conflicting file (foundation_and_overrides.scss), accept it. This will load in the new file and once you restart your server, you should be good to go. Bare in mind however, this will override both foundation_and_overrides.scss and application.html.erb.
My problem stemmed from the fact that I was trying to use the same old files I was using with Rails 4, and for whatever reason, it broke when I upgraded to Rails 5.
So to summarize quickly:
Repeat steps 1-3 you listed above
Change application.css to application.scss
When prompted, override the conflicted files
Restart your server
Related
I am doing my first project in Foundation 6 and am having trouble getting the responsive navigation to work. I started with the basic page template that comes with Foundation (installed F6 using CodeKit) then I pasted in the responsive menu code exactly as it appears here http://foundation.zurb.com/sites/docs/responsive-navigation.html#responsive-toggle but when viewed at small screen sizes, the word "menu" appears, but clicking it does nothing.
The Drilldown responsive menu also does not work -- pasted in the drilldown menu code (second example down, on the page referenced above) and what appears is a long long list of links, nothing is collapsed and nothing slides in. There must be a script missing but I have triple-checked and app.js, foundation.js and jquery scripts are loaded. What else am I missing?
First of all sorry for my bad English, did you initialize foundation's javascript?
That can be done with the following code in youre custom javascript file:
$(document).foundation();
I do it with jQuery like this:
$(document).ready(function() {
$(document).foundation();
});
for more information see: Foundation-6 documentation - initializing
and please check if you have the proper file structure for the foundation files, please see the following documentation: Foundation-6 documentation - File Structure
tl;dr: Faulty purifycss configuartion in the gulp.babel.js file.
I also had this problem. My setup:
generator-webapp
webapp's jade recipe
I can get the responsive dropdown menu to work by using the tab and enter key. This means that the relevant js files are being loaded correctly. The navigation 'burger' also does not appear.
Upon using the chrome dev tools to inspect the responsive dropdown menu example from the foundation website, I noticed that style of <button class="menu-icon" type="button" data-toggle=""></button> is being effected by the .menu-icon CSS rule from the scss partial, _menu-icon.scss. Mine wasn't. When I looked, the foundation.scss file from the app/ has the exact same style rule. The converted foundation.css was being served from the .tmp/ folder, but did not have the .menu-icon CSS rule. Then I suspected purifycss again (which I had commented out of the gulp file before and forgot to reset the gulp serve, saw no fix and thus falsely excluded the purifycss rule from the list of suspects).
I set my gulp styles task up like this:
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
/*Stupidly assumed that purifycss supported jade files as src files*/
.pipe($.purifycss(['app/**/*.js', 'app/*.jade']))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
Which meant that the necessary styles were being deleted (including .menu-icon). I think I will use stylperjade or rearrange the tasks so that I can do this: .pipe($.purifycss(['app/**/*.js', '.tmp/*.jade']))\
Let me know if this was your solution as well
I'm writing a rails application in a RTL language (right to left).
I'm using Less and Twitter Bootstrap for my front-end framework.
To have my site completely RTL I use the CSS files I downloaded and copied from rbootstrap:
http://rbootstrap.ir/
to assets/stylesheets
Everything works great RTL besides the nav-tabs that are still on the left side.
I tried playing with it a lot and this is what I found:
- If I delete the file bootstrap_and_overrides.css.less a lot of bootstrap's features don't work but the nav-tab does align perfectly to the right.
Every time I try to add something in my bootstrap_and_overrides.css.less I get the same error:
Unrecognised input
(in /home/bellonet/poligaffes/app/assets/stylesheets/bootstrap_and_overrides.css.less)
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<!-- For third-generation iPad with high-resolution Retina display: -->
<!-- Size should be 144 x 144 pixels -->
Only way it worked at the end, was using the original css and js files of rbootstrap directly without less.
That solved it.
I'm using rails 4.0 with ruby 2.0.
And i've 100's of js and css files. I dont want them to load on all pages.
So i removed require_tree in application.js and application.css
I include the required css and js using
<% javascript_include_tag "js_file" %>
<% stylesheet_include_tag "css_file" %>
My questions are
1. Do i need to precompile assets?
2. Will they be formed into a single file and sent on client side?
3. What is and how can turbo_link gem help me here?
4. Should i use controller based assets and use their appropriate cs and js file for inclusion?
1. Do I need to precompile assets?
No, but it entirely depends on your production environment. Services such as Heroku require precompiled assets
2. Will they be formed into a single file and sent on client side?
The assets which are required in the application.css will be merged into that file. However, if you have controller-specific css/js, and call them from your layout accordingly, they should be compiled into their respective files
3. What is and how can turbo_link gem help me here?
Turbolinks is a gem designed to help boost page load times, by cutting down the number of times the elements have to be loaded. Basically, if you're using the same controller, turbolinks will just replace the part of your page with an Ajax request
So nope, Turbolinks won't help you with compilation / organization of your assets :)
4. Should I use controller based assets and use their appropriate cs and js file for inclusion?
It depends on your application. The first question I would have is.... why do you have 100's of CSS & JS files? After you find the answer to this, you can then work on making the system work to the most efficient requirements
I use stylus and coffeeScript with django compressor, and It works perfectly in Dev. Here is my Jade template:
- load compress
!!! 5
html
head
title Super Page
- compress css
link(rel='stylesheet',type='text/stylus',href='{{STATIC_URL}}styles/base.styl')
link(rel='stylesheet',type='text/stylus',href='{{STATIC_URL}}styles/style.styl')
- endcompress
- compress js
script(type='text/coffeescript',src='{{STATIC_URL}}app/coolscript.coffee')
script(type='text/coffeescript',src='{{STATIC_URL}}app/evencooler.coffee')
- endcompress
body
block content
For deployment I use Heroku and Amazon S3 for static files. Once deployed I visit the site and the page loads fine and styles look as expected but the scripts are not working.
Checking the <head> I see the styles were compressed into one css file but the coffeeScript files were not. The browser is fetching the CS source files:
<script type="text/coffeescript" src="http://supercoolapp.s3.amazonaws.com/static/app/coolscript.coffee"></script>
<script type="text/coffeescript" src="http://supercoolapp.s3.amazonaws.com/static/app/evencooler.coffee"></script>
I
It was working before, I had this problem once but I don't remember what was the cause, I think the compile process is failing silently and I don't know how to debug it.
It was a not so easy to find coffeeScript problem. In my machine I was using coffeescript v1.4.X and heroku was using v1.6.3. I had a for own in array that v.1.4 allowed(it shouldn't) but v1.6.3 didn't(actually it didn't show the right error but a different one which is a bug shown here).
Anyway I solved the problem fixing the coffee file but I still think its a compressor error not to fail in production ignoring errors without giving any clue of what happened.
Pretty simple, I need to insert a script in Sitecores (v. 6.4) backend - how do I do it?
It doesn't matter if the script is placed inside <head> or <body>, nor does it matter if I can only specify the src of a <script> tag or if I can insert an actual Javascript snippet (the latter is preferable though).
The script needs to be inserted in the HTML when a Content Editor window is opened.
It is not an installation of my own, nor do I develop anything for Sitecore (I do have admin access, however), so something along the lines of installing a plugin would be the best solution I reckon.
I've previously inserted the script in Sitecore 5.4, but not in a pretty way (editing XML files) and if a better solution could be found here too, that'd be pretty great.
Update using Jens Mikkelsens answer in Sitecore Xpress 6:
I tried placing the following in web.config:
<clientscripts>
<everypage>
<script src="/test.js" language="javascript" />
</everypage>
<htmleditor>
<script src="/test.js" language="javascript" />
</htmleditor>
</clientscripts>
Being a little bit overzealous (and wanting to make sure the test.js file can be found) I put a js.test in the following locations:
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\Content Manager\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\
inetpub\wwwroot\SitecoreWebsite\WebSite\
Content of the test.js:
alert("Test [PATH TOKEN]");
Where the path token is just the parent folder name, so I know which test.js was loaded, e.g. inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\Content Manager\test.js holds:
alert("Test Content Manager");
When I try to log in using the default Xpress admin user one of three things happens (in all three cases the frontend loads without errors, but no script present. I have NOT been able to determine when the errors happen, the only thing I can say for sure is that no errors occur when the test.js has not been included in web.config):
Case 1:
The content editor loads as expected, but no script is loaded. This happens most of the time when the clientscript have been included.
Case 2 - Server Error:
Server Error in '/' Application.
Exception Details: System.ArgumentException: Empty strings are not allowed.
Parameter name: value
Stack Trace:
[ArgumentException: Empty strings are not allowed.
Parameter name: value]
Sitecore.Diagnostics.Assert.ArgumentNotNullOrEmpty(String argument, String argumentName) +241
Sitecore.Web.UI.HtmlControls.PageScriptManager.GetEveryPageScripts() +410
Sitecore.Web.UI.HtmlControls.PageScriptManager.GetScripts() +702
Sitecore.Web.UI.HtmlControls.Page.OnInit(EventArgs e) +62
System.Web.UI.Control.InitRecursive(Control namingContainer) +143
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1477
Case 3 - Sitecore error:
A required license is missing
Most likely causes:
The resource you are trying to access requires the following license: Runtime.
I'm not sure whether or not Xpress simply doesn't support clientscripts, but even if it doesn't it is weird that some times the content editor loads.
Update after testing in Sitecore 5.4 full version:
It does indeed work to put a script tag inside the <clientscripts> section in web.config as Jens Mikkelsen answered. It is, however, neccessary to put it inside the subsection <everypage> to get it to appear on every single page in the backend, whereas <htmleditor> only works for the Telerik RadEditor popup window in Sitecore 5.4.
Update after testing in Sitecore 6 full version:
The same method as described for Sitecore 5.4 works for Sitecore 6 with the addition of little thing: <script> embedded in <clienscripts> now require a key attribute:
<clientscripts>
<everypage>
<script src="/test.js" language="javascript" key="test script" />
</everypage>
</clientscripts>
I don't think you will be able to add the script with out modifying a file. However you can take a look at the <clientscripts> section in the web.config. There you can add scripts to be loaded. However I don't know if it will only load in the content editor.
I have experimented with this before, and I ended up using the above setting, but as I remember it also loaded on the Page Editor and the Desktop.
Perhaps you can use this example code to add controls to the <head> on the front-end but instead alter it to use the <renderContentEditor> pipeline to somehow inject a new <script> tag into the editor.
here is a good example of it Injecting javascript and css to Sitecore Content Editor Page