I'm diving into Bootstrap, and I'm beginning with the simplest example possible. In my HTML file there's only one line regarding style sheet:
<link href="css/bootstrap.css" rel="stylesheet">
In the css folder I've deleted all other css files (minified and css map) except bootstrap.css and bootstrap-theme.css - and now the HTML file lookes screwed up.
But when I copy back the minified css in the directory, the HTML renders fine - despite no link to it in the HTML. How is that possible?
You may have some #import statements in the stylesheet you are declaring in your HTML. That means that your stylesheet makes use of another stylesheet.
Related
I saw similar posts on SO here and on GH here, but neither solved the issue that I have.
I have a Jekyll app on my gh pages where I needed to use scss features (mostly for mixins). However, I could not get jekyll to work with scss.
Currently, this is where my (CSS) files are at. All of my CSS are taken from custom.css. I imported it in header <link rel="stylesheet" href="{{ site.baseurl }}/assets/stylesheets/custom.css">.
The .scss files inside _sass folder are empty.
This is what it looks like inside _config.yml:
...
#sass
sass:
sass_dir: _sass
style: compressed
That's where I am at now. Here are some things I have tried:
I have tried changing custom.css into custom.scss (and then updated the header <link href... stylesheets/custom.scss">. When I do that, I get Resource interpreted as Stylesheet but transferred with MIME type text/x-scss... error.
I tried changing the configuration inside _config.yml into:
sass:
sass_dir: assets/stylesheets
style: compressed
... and kept the changes from 1. I restarted jekyll server. However I still get Resource interpreted as Stylesheet but transferred with MIME type text/x-scss... error.
Tried adding <link rel="stylesheet" href="{{ site.baseurl }}/_sass/main.scss">, but I get GET http://localhost:4000/_sass/main.scss error.
The problem, I noticed, is that the app seem to not recognize main.scss at all. I tried to create a simple red-colored div with main.scss, but nothing was displayed.
The question is, how can I use .scss with Jekyll?
Having _sass/main.scss, in assets/stylesheets/custom.css add the sass file (keep three dashes at the beginning):
---
---
#import "main";
Now you can work with all your sass variables/mixins etc in custom.css below the import keyword.
Make sure you add the generated css to your layout:
<link rel="stylesheet" href="{{'/assets/stylesheets/custom.css' | absolute_url}}">
Actually we have one global.css style sheet in which we are using #import url("http://fonts.net/sample.css?type=cssandid=123") for fonts.
But it's creating issues in Bundling & minification so I got following solutions:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
and I replace #import with element
<link rel='stylesheet' type='text/css' href='http://fonts.net/sample.css?type=cssandid=123'>
even after this I'm getting CSS errors as I checked in CSS Lint(http://csslint.net/) and not getting real UI effect as with #import.
Do we have any other solutions for this?
Environment: VS2015 , MVC 5.2 , sitecore 8.1
Thanks
Hope you found the solution since you posted this question
What you can do, to avoid the #import url('yourCssUrlHere') is simply copy/paste the URL on your browser and then copy/past the CSS that is displayed.
And then simply replace the #import by the CSS you just copied.
Most of the time if the import is a font, there will be other references to .woff or .woff2 files.
Just download them and store those files somewhere on your project folder and just add their absolute link on all the url() fields.
That way, you use external fonts or stylesheets, but internally, without request them outside of your website.
Meteor compiles the css files into one css file and inserts it as first child of head element in html.
<head>
<!-- meteor inserts my concatenated css file from client folder here -->
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
</head>
I don't want to create a package for the theme assets I am using. I just want to use them directly in the html like above and I want to develop my css in the client folder with a preprocessor.
How can I get meteor to inject the generated css as last element of head rather than first which is default?
Thanks
EDIT:
To clarify further, I want meteor to inject the compiled css as shown below. I could manipulate the DOM and move that link after DOM is ready but it's a hack. Is there an API to configure this?
<head>
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
<!-- I WANT METEOR TO INJECT COMPILED CSS HERE -->
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/main.css?da39a3ee5e6b4b0d3255bfef95601890afd80709">
</head>
You can use #import url; declaration on top of your css file.
main.css
#import '/sometheme/theme.css';
body {
}
This will load /public/sometheme/theme.css before your css
Just place your css theme and meteor will concatenate it into existing css. Meteor have a special way with file order:
HTML template files are always loaded before everything else
Files beginning with main. are loaded last
Files inside any lib/ directory are loaded next
Files with deeper paths are loaded next
Files are then loaded in alphabetical order of the entire path
To achieve your goal, just make sure you the your css is deeper than the theme folder and be aware with the alphabetical ordering
Edit:
If you want to load file from /public, just place <head></head> in one of html file (e.g.: app.html) and reference your stylesheet there.
app.html:
<head>
<link href="/sometheme/theme.css" rel="stylesheet">
</head>
It will refer /public/sometheme/theme.css
I don't know much about ruby, but I know about html and css...
In my Ruby on Rails application I have this tag:
<%= stylesheet_link_tag "admin.css", "jquery.facebox.css", "jquery.tooltip.css" %>
Which has the output of this (i only show the css, i need css only):
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/admin.css?1391082652">
But not exist this path "/stylesheets" in my aplication, i found the file admin.css only here:
/home/webserver/app/public/stylesheets
/home/webserver/app/app/stylesheets
when I rename it to "admin.css_", the css styles continues to apper normal in html ruby, even clear cache in browser.
How I can change the css and make work correctly in website?
Do I need to compile anything?
Not only overwrite the file somewhere?
Hi you can add extra css in your application with .css in /home/webserver/app/public/stylesheets
Another is that css are you applying is directly from jQuery I think so
Please inspect the in browser and check the class name
then search in your application with ctr+f
The question is about using css stylesheets in your assets folder within the code igniter framework. If I want to reference a certain image for a css style, lets say for instance, background: url('../images/some_image.gif'). How should I reference this image, and what url should I provide. I'd like to do this in a way that I can put my image file in the image folder within assets.
There's no difference in regards to this because you're using Codeigniter, you can use /absolute/paths, full URLs, or probably the easiest way - relative urls.
The url to the image can just be relative to the <link>ed CSS file.
Example:
-assets
-css
screen.css
-images
bg.png
In your HTML:
<link rel="stylesheet" type="text/css" href="/assets/css/screen.css">
From screen.css:
background:url(../images/bg.png);