HTML/CSS: Foundation stylesheet wont link - html

I am trying to get the foundation framework to link to my HTML page but when I try to use the grid system it does not do anything. I have been looked at a few different tutorials to make sure that I am linking things correctly but I still can not figure out why it wont work. Here is an image of my editor and display side by side. My index.html, css folder, and js folder are all contained within the same directory. Editor and Display
Also attaching my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<meta name="viewport" content="device=device-width, initial-scale=1.0"/>
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.min.css"/>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div class="row">
<div class="large-4 columns" style="background-color: lightblue"><p>Why u wont work.</p></div>
<div class="large-8 collumn" style="background-color: lightsalmon">Not displaying a grid system.</div>
</div>
<!-- include before </body> tag -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

First of all, you have a typo, it says collumn, should be column (or columns).
Second, please make sure you're using the proper grid, Foundation 6.4 has 3 grids available: XY (default), Float and Flex.
The code in your sample belongs to the "traditional" Float Grid, while the default grid in this new version (since June 27th) is XY Grid. So you have two options:
Change your markup according to the new XY grid (take a look to http://foundation.zurb.com/sites/docs/xy-grid.html )
Change the framework to use the Float Grid, now this depends on how you downloaded the framework in first place; if you used the precompiled package, you should go to http://foundation.zurb.com/sites/download.html/#customizeFoundation to customize (basically just selecting the Float Grid and download a new package); if you used the SASS version, go to app.scss remove comment to the line where shows #include foundation-grid;, and comment the one with #include foundation-xy-grid-classes;, then rebuild framework.
Hope this helps.

You have a typo on in your second column. 'large-8 collumn' should read 'large-8 columns' (one less 'l' and one 's').
Instead of
<div class="large-8 collumn" style="background-color: lightsalmon">Not displaying a grid system.</div>
Have:
<div class="large-8 columns" style="background-color: lightsalmon">Not displaying a grid system.</div>
For reference, here is a working pen.

Related

Margins of the page are different in ejs file and html file, and background is gray when it should be white

The margins of the page are different when I compare the html file (in the browser) and the ejs file. I am using node/express and Bootstrap 4. I built the page initially in html. I wanted the content to fill the page from side edge to side edge, and I was able to do that with the html page.
html,body {
height: 100%;
width: 100%;
}
{
margin:0;
}
body {
overflow-x: hidden;
}
<div>
<div class="row">
<div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
My Website
</div>
</div>
</div>
This will produce a div that is a band of pink color that goes from one edge of the screen to the other edge.
However, when I take the same html page and change it to an ejs file, there is about 1.3 cm of white space between the div and the edge of the screen. Not only that, but the background of white divs becomes a very pale gray background.
I didn't add any other css styling to make the background color change to this pale gray color. And this pale gray background only appears with ejs files, not with html files.
I do not have a partials ejs file except for one that contains messages, and that ejs file has no styling information. Every main page, eg, home page, about page, etc, is supposed to be self-contained in terms of css and html.
I do not know where the gray background is coming from.
Bootstrap (I'm using Bootstrap 4) is working fine for me. There were problems opening dropdown menus initially but I fixed that by downloading Bootstrap and putting the css file into the Public folder instead of using a cdn link to Bootstrap, but anyway the margin problem was there even before I did that.
Hi it sounds odd so I just doubled checked using my Bootstrap 4 template. It works very well the pink background run left edge to right edge no white spaces. Full template below for your ref. I expect it is smt with software installation. You need to make sure Bootstrap, jQuery, popper.js are all installed properly in your project anyhow. Let me know.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<!-- build:css css/main.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<!-- endbuild -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
My Website
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<!-- build:js js/main.js -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- endbuild -->
</body>
</html>
BS has 2 classes "container" and "container-fluid" you need class "container-fluid" to force the content expand left edge to right edge. Code below should solve the issue. Let me know if all good after.
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 pl-5 pr-5 pb-5 pt-5 text-light" style="font-size:30px; background-color: pink;">
My Website
</div>
</div>
</div>
your code works just the fine for me, make sure you have written your backend code properly like this
const express = require('express');
const ejs = require('ejs');
const app = express();
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/', (req, res)=>{
res.render('home', {Title: 'Welcome'});
});
app.listen(3000, ()=>{
console.log('Server is running on port 3000');
});
Make sure your EJS file is in a folder called 'views' and you have your css file in a folder called 'public'
I found what the problem is. It is the express-ejs-layouts module that I installed and used. I forgot I had done that and that's why I didn't mention this in the question. I also didn't think it would affect the layout so much, and I thought I had to install this as well as the ejs module for ejs to work properly. To be honest, I didn't know what the express-ejs-layouts module did.
Once I removed const expressLayouts = require('express-ejs-layouts') and the app.use(expressLayouts) middleware, the ejs files render fine now. The margins are flush with the edge of the page with container-fluid. There is no pale gray background anymore.
I also have to mention that the solution suggested by hang-coder above of putting the stylesheets in the correct order worked for the html files. Even though that was not the main question, it solved the issue of the html files not showing margins correctly in the browser when using container-fluid. I had wrongly put the Bootstrap scripts above the jQuery scripts. I had put those scripts in the wrong order in the ejs files too, and that was also part of the problem for why the margins were not displaying properly, but I corrected the order just before I asked the margins question in the ejs files because I had to do that to make the dropdown menu work, which was another problem I had just before I asked the margins question, but I wasn't sure whether they made a difference to the margins issue.
So the problem had nothing to do with mac screens or how Chrome browser displays in macs, as I originally thought.
This script is showing the correct margins in html files for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">.
</script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">.
</script>
</head>
<body>
<div class="container-fluid bg-primary">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
So in summary, placing the jQuery and Bootstrap scripts in the correct order and removing the express-ejs-layouts solved the problem.

How to add css framework into html file with existing basic css

I'm wondering if you are able to add a css framework, specifically bulma, into an html sheet with existing css. The current css is just a standard < link > style.css, and I'm wondering if I can just link the bulma https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css
with the same < link > tag just under or above it on the same sheet.
Simple Starter from Bulma Website
http://bulma.io/documentation/overview/start/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.0/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</section>
</body>
</html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">
in the <head>...</head> of your html file and it will works
I think the question is probably missing a part.
The part where the question is raised : will this inclusion of the bulma css interfere with the existing style.css?
In that case.. probably.. as soon as pure HTML elements are described in the style.css and return in the bulma.css, for example: table {....} is present in the bulma css, it could cause some strange behavior.
There are several ways to try and bypass this behavior, some of them clean, others less clean :)
First you need to decide whether the bulma is the default css to be used or not...
If so, use your own style.css to overwrite the bulma.css.
If not, still call your style.css as last css in the row.. items that are not defined in your stylesheet will be taken care of by the bulma css

How to deal with responsive design without using metatag viewport?

My design works fine (it's a circle object with rotate functionality) with meta tag <meta http-equiv="content-type" content="text/html; charset=UTF-8"> but when I fit that design into any responsive template it won't work.
Reason I find out is that every responsive template e:g: bootstrap,foundation,skeleton etc. use metatag <meta name="viewport" content="width=device-width, initial-scale=1.0">
http://prefortune.com/rotate/bootstrap/
You can click on changeview link in responsive mode on above link it will change view and circle design will be fit properly but toggle menu will be loss. (On click I am removing content of viewport metatag content.)
I just notice something interesting and want to share it, maybe it will help someone. In the site header section you should include first the bootstrap.css and only after that the bootstrap-responsive.css because obviously the responsive.css depends on the the bootstrap.css
Of course the meta tag should be also present.
Error Code
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you are using Bootstrap you can try this.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
Starting at line 315 in your HTML you have
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
It looks to me that this path to jquery may not be correct, and as a result the bootstrap js isn't working, and this would cause a problem with the toggle menu.
This may not be the full answer to all your questions, but a good place to start.
Another issue I notice is that the source document for your iframe isn't responsive: http://prefortune.com/rotate/
If you view this on a narrow viewport the layout breaks, so this might need some attention as well. Iframes with responsive design can complicate your life and to begin you would need to add a viewport meta tag to this page as well.
Good luck!

Polymer core-media-query element for responsive layouts

I'm currently struggling with setting up a responsive web page using the core-media-query element from polymer. I have a simple div container with two child-elements which i want to be aligned horizontally on large screens and vertically on small screens (eg. phones). I played around with the Auto-vertical example from the documentation but didn't get it to work for me.
I also tried a different approach:
<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
<div layout {{phoneScreen ? vertical : horizontal}}>
<div>Alpha</div>
<div>Beta</div>
<div>Gamma</div>
</div>
But this also doesn't seem to work for me.
Anyone have an idea on how to properly use the core-media-query-Element?
Here's a working example. There's a live version at http://jsbin.com/lufewa (I can't embed this using the SO code runner, because you can't resize the output window.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer core-media-query Demo</title>
</head>
<body>
<script src="//www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="//www.polymer-project.org/0.5/components/core-media-query/core-media-query.html">
<template is="auto-binding">
<core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>
<div layout vertical?="{{phoneScreen}}" horizontal?="{{!phoneScreen}}">
<div>Alpha</div>
<div>Beta</div>
<div>Gamma</div>
</div>
</template>
</body>
</html>
I don't think the {{phoneScreen ? vertical : horizontal}} you're trying to use will work in general for including/omitting boolean attributes.
My example pretty closely matches what's in the docs, and I'd imagine if you couldn't get it working originally, it might have been because it wasn't part of a Polymer element and wasn't wrapped in a <template is="auto-binding">?

Bootstrap doctype causing widths to be ignored

I am encountering a very odd problem with Twitter Bootstrap. I'm using a customised version of Bootstrap downloaded via the 'Customize' page in the Bootstrap website. I'm using a customised version, because I need to use 24 columns instead of 12 in order to give me the variety of column widths I need.
These are the custom values I entered into the Customization form on the Bootstrap website:
#gridColumns 24px
#gridColumnWidth 30px
#gridGutterWidth 10px
I left all the options checked, except for the Responsive checkboxes. The site I'm building will be fixed width only, so I switched off all five of the Responsive options.
After I downloaded the files, I created a very basic HTML page to test the grid system.
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="span9" style="background: #F00;">SPAN 9 COLUMN</div>
<div class="span15" style="background: #0F0;">SPAN 15 COLUMN</div>
</div>
</div>
</header>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
The problem is that the browser appears to ignore the CSS widths set on the .row and .spanXX styles that are set in the bootstrap.min.css file. I have checked the CSS file, and the widths are definitely included:
Lines 42-90 of bootstrap.min.css
.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:974;}
.span24{width:974;}
.span23{width:933;}
.span22{width:892;}
.span21{width:851;}
.span20{width:810;}
.span19{width:769;}
.span18{width:728;}
.span17{width:687;}
.span16{width:646;}
.span15{width:605;}
.span14{width:564;}
.span13{width:523;}
.span12{width:482;}
.span11{width:441;}
.span10{width:400;}
.span9{width:359;}
.span8{width:318;}
.span7{width:277;}
.span6{width:236;}
.span5{width:195;}
.span4{width:154;}
.span3{width:113;}
.span2{width:72;}
.span1{width:31;}
.offset24{margin-left:994;}
.offset23{margin-left:953;}
.offset22{margin-left:912;}
.offset21{margin-left:871;}
.offset20{margin-left:830;}
.offset19{margin-left:789;}
.offset18{margin-left:748;}
.offset17{margin-left:707;}
.offset16{margin-left:666;}
.offset15{margin-left:625;}
.offset14{margin-left:584;}
.offset13{margin-left:543;}
.offset12{margin-left:502;}
.offset11{margin-left:461;}
.offset10{margin-left:420;}
.offset9{margin-left:379;}
.offset8{margin-left:338;}
.offset7{margin-left:297;}
.offset6{margin-left:256;}
.offset5{margin-left:215;}
.offset4{margin-left:174;}
.offset3{margin-left:133;}
.offset2{margin-left:92;}
.offset1{margin-left:51;}
Through much trial and error, I discovered that if I completely remove the Doctype line from the top of the HTML file, the page displays correctly! This behaviour is consistent on Firefox (19.02) and IE 10.
When I inspect the rowXX and span DIV tags in Firebug, the CSS is indicated as empty when the DOCTYPE line is included in the HTML - see the attached screengrabs below.
Screengrab from Firefox with Doctype removed from the HTML:
http://tinypic.com/r/24gp1er/6
Screengrab from Firefox with Doctype included in the HTML:
http://tinypic.com/r/13ye05g/6
Thanks in advance for any suggestions to help resolve this problem.
There may be a problem with your CSS file. Firstly #gridColumns 24px should be #gridColumns 24 (ie, specify the number of columns, not a width.
Check the result and the page source of http://fiddle.jshell.net/panchroma/pegjC/show/ or the jsFiddle
You can grab my versions of the custom 24col css from https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.css and https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.min.css
Hope this helps!