I am trying to get Flatstrap working with Bootstrap 3 but i can't, the link they provide at the website http://flatstrap.org/ does not contain the flat.css and i cannot get it to work anyways. Can someone tell me how to put things together to get the desired flat design ?
You can find the files her :
Go to the download page of Flatstrap ( you have option to download for bootstrap 2 or 3).
After downloading the desired files, unzipe the downloaded folder you will find a dist folder contains a css folder, inside it you will find your files.
The Flatstrap files called ( bootstrap.css ) like the original bootstrap files, because they modify it from the beginning so just use them directly, there is no need for any other external sheet files.
hope this help you.
just download the bootstrap.css from their site, thats the flattened version.
So I renamed my flatstrap, and stuck it in the dist folder of normal bootstrap. And referenced that.
Related
I am currently facing a problem of not being able to link my CSS files to the HTML files that are located in the same folder. About a year ago, I did a project where I built a simple website using HTML and CSS. Now when I download the folder from my Google Drive and try to open the HTML file with Chrome, I see that the CSS effect is not applied. However, after going back to the folder to open and close the corresponding CSS file, when I try opening the HTML file again, then the CSS effect is shown. I have no idea why this is happening but does anyone have any idea? I have a folder called snappers and inside that folder, I have three different folders, one that stores HTML files, one that stores CSS files, and one that stores images used for the website.
Based on your folder structure you have to go one directory up to access the css-folder:
"../css-folder/css-file.css"
hope you're doing fine.
I am currently stuck with my Web App project. This is the context: I would like to code a Web App using J2E. There's a free template that I liked and thus I decided to download it. When starting to use it I notice the CSS isn't applied.
Instead of having this, I have this:
However I do not see where the error is. The CSS & Bootstrap files should be visible in the JSP file and IntelliJ recognizes them. However I can't display these files (whether css or even pictures) that are referenced in "href".
Here's the project structure and code, maybe something's wrong there.
I'm used to HTML and to my understanding JSP isn't too different. Are the referencings different though?
Thanks in advance for any help you'll give,
Fares
YES.
Found the answer. Put resources in different folder than WEB-INF.
I believe that, your HTML file is inside the WEB-INF folder, for the to work either remove the WEB-INF path
<link href='style/stylesheet.css'>
or move your HTML one folder up.
I have two questions.
Question 1:
Is there any way I can download the website based on the following structure using winhttrack?
All of the html files go into site_name/
All of the images go into site_name/images
All of the css files go into site_name/css
All of the js files go into site_name/js
I tried to use winhttracks different build structures and the one I've found is pretty close to what I need.
Html in site_name/ .images/other in site_name/xxx
This structure gives me this result
All of the html files go into site_name/ Good
All of the images go into site_name/images Not Good
All of the css files go into site_name/css Good
All of the js files go into site_name/js Good
Just the image section. it saves images based on their extensions also in different folders like
All JPGs go to site_name/jpg
and so on.
So I've searched and found that I'll have to write user defined structure for this. But Can't find any good guide with some examples explaining it.
Can anybody help me out of this?
Question 2:
Winhttrack saves same file with different queries. So style.css saves as
style.cssf972
style.css86ff
How can I avoid this?
I am developing the RWD web app using twitter bootstrap, i want to do customize the bootstrap fro my needs, for that i downloaded the bootstrap source from getbootstrap.com .
I am planning to customize the bootstrap by keeping the bootstrap less files untouched and i want to create my own less files for customiztion as below
#import "../bootstrap/less/bootstrap.less";
#import "custom-variables.less";
#import "custom-other.less";
#import "../bootstrap/less/utilities.less";
But when i downloaded the bootstrap source, i am seeing so many folders along with the bootstrap LESS folder as below,
My question is: what are the files needed for me from bootstrap source folder to include in my web project.
Thanks in advance for any help.
The only file you need to import is bootstrap.less from less folder.
This file itself imports all the other .less files from that folder (besides theme.less, which is used for theming).
I'd suggest importing bootstrap.less and using theme.less to develop customized solutions.
Reading source of both files above may be beneficial to understanding what is "under the hood".
Remember that although you only import bootstrap.less, all the other files must be kept where they are, in order for bootstrap.less to be able to import them.
The files you need are in LESS folder. You can create a new file if you don't want to keep bootstrap same with layout.less . And can import that in master. After compilation your changes will be on top of it. You can use any compiler of your choice. e.g. Sublime Text plugin
You can also use just bootstrap.min.css and write your LESS code in a file a compile it to apply your custom changes(remember to import or include in your html file). This way you don't have to keep track of so many LESS file. As in any way your plans are not to change base bootstrap. So you can choose precompiled version and can always replace it when new updates come.
I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.