My topbar in foundation 6 is somehow not working (Not somehow, the foundation.topbar.js isn't there). So, please help me get it added.
I'm new to foundation — like a total noob. I'm 13. So, please consider that. :)
And here's the WHOLE code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><i>Title</i></h1>
</li>
</ul>
</nav>
<div class="row">
<div class="large-12 columns">
<div class="callout">
<h1>HEADER</h1>
</div>
</div>
</div>
<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>
<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>
This is what happens:
This is my JS folder:
just you're coding in Foundation 5.x style. Look at this : http://foundation.zurb.com/sites/docs/top-bar.html
thank you. and also download and import the .js folder from the foundation on git.
the the topbar will "work".
It looks like you're just running this as a static page (html)
Yet in the path for your javascript includes you're including
<? bloginfo('template_url'); ?>
Which looks to be a php function
Might I suggest you run the likes of WAMPserver ( given you're running windows it's a simple way of getting Apache Mysql and PHP up and running on your local machine.
Additional note: As was said however it looks like you're including foundation 5.x code
"<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"
Related
I would like to put a warning message using Foundation6.
If it's possible, something like Bootstrap Message :
In the Foundation Docs, we have this : http://foundation.zurb.com/sites/docs/v/5.5.3/components/alert_boxes.html .
But it's not working with me, it's like I missed an import (classes doesn't work).
Any idea ?
EDIT
My code is simple :
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/my-css.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/icons/foundation-icons.css">
</head>
<body ng-app="app">
<div class="row">
<div class="columns">
<div class="text-center">
<div data-alert class="alert-box warning round">
This is a warning alert that is rounded.
×
</div>
app.css is Foundation stylesheet minified.
Have you looked at the Foundation 6 docs? Warning messages are called callouts in Foundation 6 and you add the class callout to the div, together with another class depending on the kind of alert you are going for. For a warning, you'd use:
<div class="callout warning">
<h5>This is a warning callout</h5>
</div>
Check out the docs.
I am using Yeti Launch and I want to use expressions to display page information on each page.
For example, I want to display the page title and some other content specific to that page.
So the homepage would be {title: "homepage"} but I can't figure out how to have the foundation project print/display this.
Here is how I have my homepage file
{{!-- This is the base layout for your project, and will be used on every page. --}}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<script>
var context = {title:"Homepage | Hey this is working"};
</script>
<body>
<div id="siteContainer" class="cover">
<div class="row">
<header>
<h1>Example</h1>
</header>
</div>
<div id="navigation">
<!-- eo // navigation -->
<section id="contentWrapper">
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}} {{> body}}
</section>
<!-- eo // section -->
</div>
<!-- eo // siteContainer -->
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>
How foundation sets up the project folders
src
assets - /img/ - /js/ - /scss/
data
layouts
pages
partials
styleguide
Where should my data be stored? and How do I display or make the call to pull the data to that particular page?
Thanks!
Found the answer.
I have to define my variables at the top of the page template.
I was doing it wrong. I was adding my variables to the partial file instead of the the page template.
Reference:
http://foundation.zurb.com/sites/docs/panini.html#custom-data
http://jekyllrb.com/docs/frontmatter/
all. I'm new to foundation.
I tried to make a dropdown example, but it didn't work at all.
--all.scss--
.test{
#drop2{
#include dropdown-container;
}
}
--test.html--
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>test</title>
<meta content='' name='description'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<link href='css/all.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="test">
<a data-dropdown='drop2' href='#'>Has Content Dropdown</a>
<div class='f-dropdown content' data-dropdown-content id='drop2'>
<p>
Some text that people will think is awesome!
Some text that people will think is awesome!
Some text that people will think is awesome!
</p>
</div>
</div>
<script src='js/modernizr.js' type='text/javascript'></script>
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/fastclick.js' type='text/javascript'></script>
<script src='js/foundation.js' type='text/javascript'></script>
<script src='js/foundation.dropdown.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).foundation();
</script>
</body>
</html>
The browser shows the text "Has Content Dropdown", but nothing happens when I click the link.
I wonder that I must misunderstand how to use the dropdown component, but can't find what is wrong.
What's wrong with the program? Please help.
foundation 5.4.6
using Middleman and sass
motivation
I want to user bower (grunt) package of bootstrap in my django template folder. I am aware of django-bootstrap3 which ideally can be configured to use those "local"/deployed copies of bootstrap package.
For now, I need a plain example to work. So this is what I do
step 1: layout.html
I take an hello world template layout.html (from bootstrap docs page) and put it into templates folder registered within my django project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This example is valid for precompiled package.
step 2: bower
I run something like:
cd path/to/django/static/folder
bower install bootstrap
That creates a folder called bower_components
step 3: linking
?
PS
I am currently looking at yeoman board here to check if what is discussed is also a solution for me.
Use static files as documented on django page
{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}
In detail,
Layout.html will be changed to (assuming django 1.6):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}title{% endblock %}</title>
{% load staticfiles %}
<!-- Bootstrap -->
<link href="{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static "bower_components/bootstrap/dist/js/bootstrap.min.js" %}"></script>
</body>
</html>
I want to separate html code from my laravel template (*.blade.php) file . I have following code in my dashboard.blade.php template :
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
I want to separate this html code from here and want to move it to another file , with extension either *.html or *.tpl or any other except *.php .
Is it possible to do so ? Please help me on this .
Thanks.
I don't see anyone 100% decoupling HTML/CSS, but you can follow some Design Patterns, like Presenter, and use Laravel Blade so it be very little coupled.
Name a view home.blade.php and add your code to it and change your code to:
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
Create a route using:
<?php
Route::get('/', function() {
return View::make('home',
array(
'$pageTitle' => 'Dashboard',
'welcomeMessage' => 'Welcome to your Dashboard. You rock!'
)
);
});
See? It's almost 100% decoupled, but you cannot decouple 100% or you'll not be able to show your dynamic data in your final HTML.
Also, Blade helps you organize your code, so you can have a layout, let's call it layout.blade.php:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
#yield('contentSection')
</body>
</html>
You have one single line of Blade in it, just to add your page contents, now you can create your home view as:
#extends('layout')
#section('contentSection')
<h1>{{$pageTitle}}</h1>
<p>{{$welcomeMessage}}</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
#stop
And blade will render this HTML for you:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> Your Application </title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
</head>
<body class="">
<h1>Dashboard</h1>
<p>Welcome to your Dashboard. You rock!</p>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
</body>
</html>