I have been trying to make this owl carousel work.
I am not getting any error but the carousel if not loading. I tried the solution I found on StackOverflow for Bootstrap carousel but it did not work for me. I also tried to use pure CSS carousel but it will be static kind of thing and I want the carousel to work dynamically.
Index.razor
#page "/"
#using TBS.Data;
#inject IJSRuntime JsRuntime;
#*#inject IComponentContext context;*#
#inject NavigationManager UriHelper;
#inject MediaService MediaService;
#inject ContentService ContentService;
<div class="container hero-section">
<div class="owl-carousel owl-theme slide">
<div class="hero-image item">
<img src="images/here-image.png" alt="hero-img" class="img-fluid">
<div class="hero-details">
<h2>MATT RISINGER</h2>
<h6>Home Builder. Austin, TX.</h6>
<button>EXPLORE CHANNEL</button>
</div>
</div>
<div class="hero-image item">
<img src="images/here-image.png" alt="hero-img" class="img-fluid">
<div class="hero-details">
<h2>MATT RISINGER</h2>
<h6>Home Builder. Austin, TX.</h6>
<button>EXPLORE CHANNEL</button>
</div>
</div>
</div>
</div>
_Host.cshtml
#page "/"
#namespace TBS.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Build Show</title>
<base href="~/" />
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<environment include="Development">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="css/bootstrap/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
</environment>
<link href="css/site.css" rel="stylesheet" />
<link href="css/showvideo.css" rel="stylesheet" />
<link href="css/default.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://cdn.syncfusion.com/ej2/17.2.35/material.css" rel="stylesheet" />
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-36173959-17"></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<script src="https://cdn.syncfusion.com/ej2/17.2.35/dist/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/17.2.35/dist/ejs.interop.min.js"></script>
<script type="text/javascript" src="js/indexedDb.Blazor.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<app>
#(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>
<script src="_framework/blazor.server.js"></script>
<script src="_content/BlazorStrap/blazorStrap.js"></script>
<script src="_content/BlazorStrap/popper.min.js"></script>
#*<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>*#
<script type='text/javascript'>
(function ($) { window.fnames = new Array(); window.ftypes = new Array(); fnames[0] = 'EMAIL'; ftypes[0] = 'email'; fnames[1] = 'FNAME'; ftypes[1] = 'text'; fnames[2] = 'LNAME'; ftypes[2] = 'text'; fnames[3] = 'ADDRESS'; ftypes[3] = 'address'; fnames[4] = 'PHONE'; ftypes[4] = 'phone'; }(jQuery)); var $mcj = jQuery.noConflict(true);
</script>
<script src="js/custom.js">
</script>
<script src="js/owl.carousel.min.js"></script>
<script>
$('.slide').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
autoplay: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
$('.slide1').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
$('.slide2').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
$('.slide3').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
</script>
</body>
</html>
I had a similar issue, i figured it out that to use JavaScript library you need to use JInterop. So after referencing all required library, i created a js file in my root folder wwwroot called main.js, and i added the reference to my index.html file like this
<script src="main.js"></script>
Inside this main.js file i created a function that contains all the javascript code i need to run my slider. So the code inside main.js file looks like this.
(function($) {
'use strict';
window.sliderFunctions = {
startSlider: function () {
/*============ All the code or function you need for your slider to run goes here ============*/
--code--
}
}}
Then i opened my app.razor file, then injected JSRuntime like so
#inject IJSRuntime JSRuntime
then still in my app.razor file, i added the following code
#code {
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeAsync<string>("sliderFunctions.startSlider", null);
//return base.OnAfterRenderAsync(firstRender);
}}
What simple happened is, this allows to run all javascript code after Blazor is done rendering.
Related
I am trying to use ace editor without webpack(without build step) in vue 3 CDN based build. but was unable to find a suitable library which works well with vue3.
Here is the code without ace editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue 3 Quickstart</title>
<link rel="icon" href="./favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue#3/dist/vue.global.prod.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div id="app">
ABC
</div>
<div id="counter"> Counter: {{ counter }} </div>
<script type="module">
const Counter = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(Counter).mount('#counter');
</script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
Ref of library that can be used : https://www.npmjs.com/package/vue3-ace-editor
I have done everything according to the documentation provided on https://fullcalendar.io/docs/google-calendar
I created a new calendar for this specific purpose.
I have purposely left the API key and calendarID blank
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script>
$(function () {
$('#calendar').fullCalendar({
googleCalendarApiKey: '',
events: {
googleCalendarId: ''
}
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Solved Check comments for answer
I am trying to implement Firebase Authentication for my application authentication, but I get a Cannot read property 'signInWithEmailAndPassword' of undefined error.
Below follows the code.
index.html
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ProcWeb</title>
<meta name="description" content="My App description">
<link rel="icon" href="/images/favicon.ico">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#3f51b5">
<!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My App">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My App">
<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="/images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/manifest/icon-192x192.png">
<!-- Tile icon for Windows 8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="/images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/bower_components/platinum-sw/platinum-sw-elements.html">
<link rel="import" href="/bower_components/polymerfire/firebase-app.html">
<link rel="import" href="/bower_components/polymerfire/polymerfire.html">
<link rel="import" href="/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body unresolved>
<!-- Configure Service Worker caching: -->
<platinum-sw-register
auto-register
skip-waiting
clients-claim
reload-on-install
href="/service-worker.js">
<platinum-sw-cache
default-cache-strategy="networkFirst">
</platinum-sw-cache>
</platinum-sw-register>
<!-- Configure Firebase app: -->
<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com">
</firebase-app>
<my-app></my-app>
<!-- Built with love using Polymer Starter Kit -->
</body>
</html>
my-app.html
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="my-icons.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<!--<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">-->
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>ProcWeb</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">Home</a>
<a name="view1" href="/view1">Gestão de Clientes</a>
<a name="view2" href="/view2">Gestão de Processos</a>
<a name="view3" href="/view3">Agenda</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>ProcWeb</div>
</app-toolbar>
</app-header>
<!-- Configure Firebase app: -->
<!--<firebase-app
name="procWeb"
apiKey="AIzaSyDA-JuUnKmucXk3VXMhk4r8CYihSELQyAA"
authDomain="procweb-28a01.firebaseapp.com"
databaseUrl="https://procweb-28a01.firebaseio.com"
storageBucket="procweb-28a01.appspot.com"
messagingSenderId="621427834965">
</firebase-app>-->
<firebase-auth
id="auth"
app-name="procWeb"
user="{{user}}"
on-error="showError">
</firebase-auth>
<div hidden$="[[user]]" class="card">
<h3>Email/Password</h3>
<form on-submit="signInWithEmailAndPassword">
<paper-input label="Email" type="email" value="{{email}}"></paper-input>
<paper-input label="Password" type="password" value="{{password}}"></paper-input>
<paper-button type="submit" on-tap="signIn" raised class="custom indigo">Sign In</paper-button>
</form>
</div>
<div hidden$="[[!user]]">
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</div>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
signIn: function() {
// firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(function(response){
// this.page = 'view1';
// }).catch(function(error){
// console.log(error);
// });
this.$.auth.signInWithEmailAndPassword(this.email, this.password).then(function(response){
}).catch(function(error){
});
}
});
})();
</script>
</dom-module>
I'm using Polymer 1.0 and Firebase 3.0.
Am I missing something? Thanks.
Getting the following error
Exception from Tracker afterFlush function: undefined is not a function
TypeError: undefined is not a function
<head>
<title>Orion</title>
<link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- JavaScript Library Dependencies -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.lob.js"> </script>
</head>
<template name="currencyData">
<div class="container">
<div id="gridChartContainer">
<table id="grid"></table>
</div>
</div>
Template.currencyData.rendered = function() {
if (this.find("#grid")) console.log("Found the grid");
this.find("#grid").igGrid({
width: "100%",
dataSource: currencyData,
autoGenerateColumns: true,
});
}
Found the issue with the calls...
Modified my function to look as below
Template.currencyData.rendered = function() {
this.$("#grid").igGrid({
width: "80%",
dataSource: currencyData,
autoGenerateColumns: true,
});
}
I am using the unsemantic grid layout, however, with the following code I expect the body div to resize to 100% when the resolution lies within the tablet range:
<div class="grid-parent tablet-grid-100 grid-80" id="body">
<div class="grid-100" id="search-result">
search return
</div>
<div class="grid-50" id="column-left">Column left</div>
<div class="grid-50" id="column-right">Column right</div>
</div>
However, it remains at 80% until it reaches mobile size (where it defaults back to 100%). I have included the following css files:
<link rel="stylesheet" href="./assets/stylesheets/demo.css" />
<link rel="stylesheet" href="./assets/stylesheets/dan.css" />
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-base.css" />
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-responsive-tablet.css" />
<noscript>
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-mobile.css" />
</noscript>
<script>
var ADAPT_CONFIG = {
path: './assets/stylesheets/',
dynamic: true,
range: [
'0 to 767px = unsemantic-grid-mobile.css',
'767px = unsemantic-grid-desktop.css'
]
};
</script>
<script src="./assets/javascripts/adapt.min.js"></script>
I really can't see why it's not working!
it seems u have to call unsemantic-grid-tablet.css via adapt, not call unsemantic-grid-responsive-tablet.css via link. Try this code:
<link rel="stylesheet" href="./assets/stylesheets/demo.css" />
<link rel="stylesheet" href="./assets/stylesheets/dan.css" />
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-base.css" />
<noscript>
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-mobile.css" />
</noscript>
<script>
var ADAPT_CONFIG = {
path: './assets/stylesheets/',
dynamic: true,
range: [
'0 to 767px = unsemantic-grid-mobile.css',
'767px to 1025px = unsemantic-grid-tablet.css',
'1025px = unsemantic-grid-desktop.css'
]
};
</script>
<script src="./assets/javascripts/adapt.min.js"></script>
To use Unsemantic with Adapt.js for your use-case with tablet breakpoints:
Load only the base CSS initially.
If JavaScript is disabled or unavailable, then load the responsive CSS with tablet breakpoints.
Configure and load Adept.js in the head of your HTML document.
If you only want to utilize 80% width for the desktop default (grid-80), then you may also want to take advantage of prefix-10 to keep your layout centered.
I was able to successfully test the following:
<link rel="stylesheet" href="./assets/stylesheets/demo.css">
<link rel="stylesheet" href="./assets/stylesheets/dan.css">
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-base.css">
<noscript>
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-responsive-tablet.css">
</noscript>
<script>
var ADAPT_CONFIG = {
path: './assets/stylesheets/',
dynamic: true,
range: [
'0 to 767px = unsemantic-grid-mobile.css',
'767px to 1025px = unsemantic-grid-tablet.css',
'1025px = unsemantic-grid-desktop.css'
]
};
</script>
<script src="./assets/javascripts/adapt.min.js"></script>
body:
<div class="grid-parent grid-80 prefix-10 tablet-grid-100" id="body">
<div class="grid-100" id="search-result">
search return
</div>
<div class="grid-50" id="column-left">column left</div>
<div class="grid-50" id="column-right">column right</div>
</div>