ajlkn / skel Goto Github PK
View Code? Open in Web Editor NEWA lightweight responsive framework for the www
Home Page: http://skel.io
License: Other
A lightweight responsive framework for the www
Home Page: http://skel.io
License: Other
I'm using skeljs to create a responsive website. With the use of panels I can place my menu in a left sidebar menu when the layout is for mobile otherwise it stays just normal.
I saw in the documentation that you can take a part of the page by id and place it in the left panel like this:
window._skel_panels_config = {
preset: 'standard',
panels: {
navPanel: {
breakpoints: "mobile",
position: "left",
size: "80%",
html:'
My HTML looks like this:
What do I have to do to get that menu inside my panel?One little caveat that I have run into using panels is the bottom panel. When I put a footer overlay there as try to activate it from the top of the page, it activates by opening a transparent panel in the viewport with Te designated height I specified.
However if I want to see what is in that panel. I have to scroll down and then activate it. Is there a way around this issue?
SkelJS site renders poorly on Windows Phone 8. It needs
<meta name="viewport" content="width=device-width, user-scalable=1;" />
to be explicitly specified. Otherwise, it renders in desktop mode. See first image in this link:
In addition, the left panel also renders incorrrectly.
Hello,
This is great framework without any doubt but when we talk about responsive websites for mobile devices speed must be a major factor. If you run html4up.net website on Google page speed this is showing very low page rank. Please have a look.
http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fhtml5up.net%2F
I think things can be improve if SkelJS framework loads dynamic CSS files into single <style> block and is it possible to load it at the bottom of page instead of header which is termed as above the fold by Google.
Waiting for your response as I am developing my website on this framework.
Thanks,
Sarfraz Qasim
Toggle seems not to work on iPhone 3GS.
When I'm on top of the page it works fine, but if I scroll down it doesn't seem to do anything.
Hi. I am so frustrated with the seemingly lack of cohesion to www standards by browsers. It makes it near impossible to write code that behaves in a predictable way (layout etc).
I don't think it's a Skel issue but a browser issue, but wanted to mention it here just in case anyone else has these issues and has a workaround or such.
Case in point:
built-in internet browser
tablet in landscape: viewportWidth = 800px (wrong)
tablet in portrait: viewportWidth = 1280px (wrong)
Firefox 26.0.1
tablet in landscape: viewportWidth = 980px (wrong)
tablet in portrait: viewportWidth = 800px (correct)
Chrome
tablet in landscape: viewportWidth = 800px (wrong)
tablet in portrait: viewportWidth = 1280px (wrong)
This is with the config setting useOrientation: true - setting to false does nothing (noticable).
built-in Safari browser
tablet in landscape: viewportWidth = 480px (correct_)
tablet in portrait: viewportWidth = 320px (correct_)
This is with the config setting useOrientation: true - setting to false does nothing (noticable).
built-in Safari browser
tablet in landscape: viewportWidth =1024px (correct)
tablet in portrait: viewportWidth = 768px (correct)
This is extremely frustrating. I'll try other responsive frameworks to see how they behave in the same environments reported above.
Cheers,
Mark
PS/ I'd like to see a skel.version() function
This is an IE only issue so far as I can see. The panels are initializing before the entire html has been loaded into the body. I added a console.log to see what html was present as it fires, and it's not the entire html of the page.
A console.log after _.cache.body = jQuery('body'); [which is in a DOMReady function] shows the incomplete html.
[log ends with]
If I force a refresh it sees the entire html, but a page reload only sees part of it.
[log ends with]
Since this is within a DOMReady function is this a browser bug? I'm working on IE10 with this test.
I've got second one problem with skel. I would like to use language switcher on left panel (template Prologue 1.0). So, Im inserting it to logo div with absolute position. Everything is working fine on desktop. But.. problem exist with narrower: range: '-960'.
I don't know how to do make clickable form/anchor (on left panel) without closing this panel on click. I'd like slide down flags - then panel is closed. I was trying some classes but without any result.
Please - any help. (http://pojezierze2.jordan.pl/, mobile version...)
Tested your Panels example page on Android emulator (Google Nexus 7). It just slides screen horizontally, but the panel content doesn't come up. My own site does just the same.
SkelJS is mentioned to work on Android at least, but how about panels?
I had a very big problem with using fancybox with skel-panels. I'm building webpage on template "Prologue". So in default configuration "useTransform: true" there is always left panel on top.
Even if I use default z-index: 100 in skel and 11000 in fancybox overlay, left menu is always on top (when useTransform is true). I've been looking very long for resolve this problem. Now I've found it.. and I've change it to false. Now it's looking good.
Can I define a base path for the CSS files?
On the main path it works... for example:
http://example.com/index.html
But breaks if I get further up, for example:
http://example.com/products/software.html
Looking in chrome it now tries to load:
http://example.com/products/css/style.css
Can I tell it to stick to: http://example.com/css/style.css ?
Using the HTML5 UP theme "twenty" and noticed it's using skel-layers.min.js. Is there an unminified version available?
Hi,
I have a toggle panel that opens up on the left side. Whenever I click on a link inside of the panel it closes the panel on mobile devices. I would like to have it stay open for one link in particular which opens up a sub menu. Is this possible?
Thanks!
-John
Hi,
The attached image is what I get when I open the skelJS example page with IE8:
http://skeljs.org/uploads/examples/example/index.html
http://skeljs.org/uploads/examples/panels-example/index.html
Seems like the html5shiv.js is being 404?
I am getting this error while loading skel panel. Any suggestion how to fix that issue?
I get this error when loading the page:
uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://URL_TO/skel.min.js :: <TOP_LEVEL> :: line 33" data: no]
Seems to be line 1613 of non-minified version of the code.
Hi,
I'm using skeljs with html5up templates and I don't understand why raw html appears before css is applied (less than 1 sec to be applied, but effect is really strange).
The same problem occurs on html5up template example page loading, do I have missed something ?
Regards,
Romain.
I am using Prologue template in MVC-4 project. Following skel.min.js error occured when i load page; also it does not render mobile menu when i run it on mobile simulator. Your help will be much appreciated.
"Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist."
Hi AJ.
I've now tried 2 scroll-to-top plugins and neither seem to work with Skel. When I remove Skel they both work fine.
Have you managed to get any to work?
The 2 I've tried are:
Cheers,
Mark
Tiny one, but there is a single reference to $
in skel-panels.js (line 1365):
$('[autofocus]').focus();
I presume its just an over sight and is meant to be:
jQuery('[autofocus]').focus();
Thanks
Using the HTML5 autofocus property and when viewing the page in Google Chrome (windows desktop) "autofocus" is not working when skel-Panels code is loaded on the page.
Tested with Google Chrome Version 30.0.1599.101m
Works as expected with FF24.0 and IE10.
Aside question... I only use panels in the "mobile" break-point... is there any way to just enable (or dynamically add) the panels code/wrappers when the "mobile" break-point is needed? The reason I ask, is this is the second issue I have had with panels, when they aren't even active/visible in "wide" or "narrow" break-points. I just have the code there for when mobile is active.
This is such amazing work and I really appreciate the effort you've put into it, but would it be possible to make it compatible with MVC? The problem lies with the prefix being used in the init.js, for example, within the prologue theme.
Since essentially with MVC once you call a new controller and action you've modified the URL and virtual directory so the page is unable to find the required css pages. I've tried every kind of path notation I can think of, but nothing seems to work once its published.
I would love to have the mobile css load when required on my other pages but unfortunately I've now had to hack around this by forcing a particular style on the view like so:
@section Styles {
<link href="@Url.Content("/css/style.css")" rel="stylesheet" type="text/css" />/css/style-wide.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("
<link href="@Url.Content("~/css/style-narrow.css")" rel="stylesheet" type="text/css" />
}
I've also attempted to store a hidden html object on the page and add the value to the prefix so I can modify the prefix on the page load for each view call, however unless you call the function on document loaded/ready it returns undefined, and trying to force load the scripts in order on document.ready causes more issues than it solves :(
Any work around available? or tips to get this to work correctly without breaking MVC?
I've been using the example file on the site to play around with this, first off it's a wonderful plugin and I REALLY like the built in grid, great work!
With that example file, I've been having some flickering issues on Safari for mobile, and Safari 5.
I'm not sure if this is being caused by the plugin itself or by CSS transitions, any suggestions?
Hello,
I try use skelJS with panels and I want to add smoothscroll (https://github.com/cferdinandi/smooth-scroll) for nice scrolling. Everything works fine until I try it in IE9. Here smoothscroll don't work.
Then I start experimenting and create basic smoothscroll page with skeljs. When I add 'skel-panels.min.js' it stop working.
To reproduce problem, try basic smoothscroll page and add skel+panels config into header
I'm moving closer to production using skeljs and I'm playing with the skel.lock with a "switch to desktop" feature.
It looks like when you use skel.lock it sets a cookie to remember, but the cookie is set for that page only (using path). I'm looking for it to apply to the entire site and have it last for the session... i.e. once they "switch to desktop" it stays on the desktop view for the entire session. Most sites I visit seem to be set this way as well so I thought I was losing my mind when it kept switching back to "mobile" view.
Possibly in next version you might consider adding a configurable option to set cookie path to "/" or "page"
So I changed the code in the unlock/lock functions as follows:
unlock: function () {
// Clear the lock state
_.lockState = null;
//document.cookie = _.lsc + '=;expires=Thu, 1 Jan 1970 12:00:00 UTC; path=' + window.location.pathname;
document.cookie = _.lsc + '=;expires=Thu, 1 Jan 1970 12:00:00 UTC; path=/';
...
lock: function (w) {
// Set the lock state
_.lockState = w;
//document.cookie = _.lsc + '=' + w + ';expires=Thu, 1 Jan 2077 12:00:00 UTC; path=' + window.location.pathname;
document.cookie = _.lsc + '=' + w + '; path=/';
...
It seems to set the cookie ok, but it apparently is not reading the cookie on page load... almost as if it is looking for cookies only for the specific page path...
Upon further hours of testing... I realized skeljs wasn't reading the cookie names properly. When I used the original code, and skeljs accessed document.cookie, _skel_lock was the first cookie in the list. But when I changed the path to / and skeljs referenced document.cookie, _skel_lock was the last cookie in the list. I assume it might put specific page cookies first in the list?
No big deal, who cares what position is in, right? Well the code skelJS uses to iterate through the cookies only works if the cookie is in the first item in the list, because it matches with "_skel_lock". But the way the cookies are stored, there is a space between each cookie after the semicolon, i.e. cookieName=value; cookieName2=value2; cookieName3=value3;
So if the cookie is first in the list skeljs works ok "_skel_lock"=_skel_lock.
But when the cookie is in the middle or last in the list, skeljs code does not work as the skeljs does not TRIM leading spaces, so it is comparing " _skel_lock" = "_skel_lock" which returns false.
So I altered the skeljs code to the below and it seems to work ok, now. I didn't use TRIM as I read that is not available to IE8 and below.
_.iterate(x, function (i) {
var y = x[i].split('=');
//if (y[0] == _.lsc) {
if (y[0].replace(/^\s+|\s+$/g, '') == _.lsc) {
_.lockState = y[1];
return;
}
});
Thoughts? Am I missing something? Or am I right with what I've done?
I'm having an issue with firefox [v24] but I don't think it's version specific.
I'm testing a mobile vs desktop config. I get the page into mobile mode, <= 640px. I load a new page expecting to stay in mobile mode, but it jumps back into desktop mode.
I added a few logging statements and narrowed it down to getViewportWidth. The issue is the vertical scroll bar as far as I can see.
With the exact same browser widths, IE reports a width of 640, but FF says 657.
I am assuming IE calcs the scrollbar width included with the 640, but FF adds it to the width.
Am I correct? Is there a fix for this?
In my testing I get the window to 640px to get mobile mode, load a page and it kicks back to desktop mode [657px width]. I move 1 px and get dumped back to mobile.
I don't get a consistent FF mobile mode unless I get the window to < 623px. Once in the mobile, I'm good until I get > 640, but a width 623-640 toggles between mobile/desktop when refreshing.
Hallo,
thx for your superb framework.
I am trying to make a fixed left panel with menu.
What would be the right way to make it work?
Thank you
When we add an open source rich text editor to the text area, the functions are not working like bold, italics, bullets etc.
When I do it without inlcuding skel min js , then its working. I would like to know if skel js locks the font one loaded.
I am using skeljs and prologue template. I am facing this issue with menus (nav) - when i put a url like "http://google.com" or "/account/login" it throws this error. The menu is using "#" urls by default - it scrolls sections.
Plese help me in this regards.
Hi AJ,
I just learned about skel.js and really loved it but I'm trying to figure out how to call function on body load as currently it's not working. I'm referring to Helios template you developed.
I'm not sure how to initialize. I'd be glad if you could help me in this.
Thanks,
Vamsi.
if skel is loaded
how can i display a simple google map ?
any example ?
I've been given the task of building a new web site using skeljs. I've found some samples from html5up to follow, but I'm stuck on this right now.
They want some youtube videos in iframes, but the they are not showing [black square]. The iframe is there and popluated.
I've narrowed it down to the skel-panels-pageWrapper div and the backface-visibility:hidden css. If I remove the backface-visibility:hidden via firebug I see the video, so it's just a css issue.
The demos I'm working from don't have that css when the page is built so I'm assuming this is something that can be turned off somehow in the config?
working:
not working:
Is there an option to disable the transform & backface-visibility somehow.
I've seen some references to screen flickering bugs on iOS in the commit notes as well as in the issues section. But I'm still seeing the flickering when a reference to skel-panels is included on the page (even if skel-panels aren't visible at that breakpoint or even set to go off).
Viewing the examples page at:
http://skeljs.org/uploads/examples/panels-example/index.html
I'm seeing the flickering using an iPad (iOS 6) when I zoom in.... screen flashes. Same issue on iPhone with iOS6 and lockViewport=false
I've reproduced using v0.4.0 and v.0.4.1.
Any thoughts?
First off thanks for what I consider the most light weight and designer-open framework for creating websites. I have been in the process of implementing this into a simple Wordpress theme but I am stumbling on several fronts:
I was out and using someone else's iPad to browse one of my sites and it caused Safari to crash. Went home and tried it on my iPad Airs (ios 7.0.4 and 7.0.6) and same crash issue in both Safari and Chrome.
If you zoom all the way in and release, then zoom all the way out quickly, to the point where the webpage is considerably smaller than the screen it causes the browser to crash immediately.
Was also able to duplicate it on the panels example site at
http://skeljs.org/uploads/examples/panels-example/index.html
Only happens on panels example and not on the skeljs only example page.
When using a jquery mobile select element with data-native-menu set to false to use jqm's inbuilt custom menu. inside skel-js panel - it doesn't work.
clicking on it simply closes the panel.
thanks
I was going to throw this up on a free CDN, jsDelivr, but saw the CSS is not minified, & seems that it needs configuring.
IMHO resets should be separate, & with jsDelivr you can d/l a concocted file. (eg //cdn.jsdelivr.net/g/[email protected],[email protected](skel-noscript.min.css)
). If there is configuring needed, then perhaps there should be separate files that you can load as-needed?
I'm getting problems adding like box plugin from Facebook into my page.
Tested without skel and it worked perfectly.
Any idea how to solve it?
Do you have a working example of where a simple link is activating a panel (jsfiddle)?
I am trying with this code:
<p><a href="#" data-action="togglePanel" data-args="rightPanel"><img class="size-medium wp-image-1862" src="http://www.example.com/wp-content/uploads/2014/02/IMG_0681-620x413.jpg" width="620" height="413" /></a></p>
To no avail. However, my overlay works just dandy as (from config):
html: '<a href="#" class="skel-panels-overlay skel-panels-overlay-top-left xoavl_home"' +
'data-action="togglePanel" data-args="leftPanel">XOAVL</a>'
Is this supposed to work?
Hello,
I'm using this on a site that was based on the HTML5up Dopetrope theme: http://html5up.net/dopetrope
If I test either my site or the HTML5up one in IE Tester for IE8, I get an error on internal pages. See the attached screenshot.
I hacked it like so but should be in the config
/* Locations */
// Registers a location element
// Args: string id (Location ID), DOMHTMLElement object (Location element)
registerLocation: function(id, object) {
if (id == 'head')
object._skel_attach = function(x) {
// Here is the monkey patch
if( x.href ) {
x.href = x.href.replace("/css/","/assets/");
}
this.insertBefore( x, _.me );
};
else
object._skel_attach = function(x) {
this.appendChild( x );
};
_.locations[id] = object;
},
What do you think? By the way I really like skeljs thank you!
Hi, I get a brief flash of unstyled content at break points on Firefox 23.0.1 (windows 7). I get it on the example on your site, as well as my own site I am building.
Is this a known issue, have you seen it happen before, and what might be causing it?
PS Love the script otherwise!
Thanks
When resizing on Chrome (v30 & Canary v33) on OSX (Macbook Air) page is displayed momentarily without CSS applied. Appears to flash or blink.
This is very evident using the Helios and Prologue templates. Open and resize the horizontal size quickly.
Not able to reproduce in Safari.
why don't you use tags ?
they are great for downloads :)
Hey.
I've been trying to build in a way to handle multiple levels of navigation in panels. My solution is to make parent links accordions which then reveal the child links when clicked / tapped. However, no matter which accordion plugin I use, they all fail. I can get them all to work fine in the main body of a page but as soon as I copy & paste the code into a panel, they don't work. The accordions stay closed and do not open when clicked.
I also had an issue of links, even #, closing the panels. I tried adding skel-panels-ignore (as suggested in another issue) to the links which stopped the panels closing but did not help with the accordions issue.
Any ideas?
My config is as follows:
// Init skelJS
window._skel_config = {
prefix: 'wp-content/themes/ckd-reset/style',
preloadStyleSheets: true,
resetCSS: true,
boxModel: 'border',
preloadStyleSheets: true,
grid: { gutters: 40 },
breakpoints: {
desktop: { range: '1020-', containers: 960 },
tablet: { range: '681-1019', containers: 640 },
mobile: { range: '-680', containers: 300, lockViewport: true, grid: { collapse: true, gutters: 20 } }
}
};
// Init skelJS panels plugin
window._skel_panels_config = {
panels: {
leftPanel: {
breakpoints: 'tablet,mobile',
useTransform: false,
position: 'left',
size: "75%",
html: '<div data-action="copyHTML" data-args="mobileNav"></div>'
}
}
};
Is there a list of supported browsers somewhere? Thanks
Hi there, thanks for an awesome framework.
I am trying to make a fixed header, however panels' JS injects a wrapper div with position: relative which prevents me from pinning the header to the top of the page.
What would be the right way to make it work?
Thanks!
First of all, skelJS is a great framework. Would it be possible to ensure that it does not conflict with PrototypeJS, which comes as standard with Magento?
I tend to work solely with jQuery which can be forced into noConflict mode; is there a similar feature within skelJS?
At the moment, the only information that I possess is the following error message which is being reported by prototype.js:
Uncaught TypeError: Cannot call method 'call' of undefined
Has anyone had any success with using skelJS and PrototypeJS within the same page?
When describing your presets in the full documentationn (http://skeljs.org/docs), you write:
standard
Stylesheet prefix set to "style"
Breakpoints set to mobile (480px and below), 1000px (481px to 1000px), and desktop (481px and up)
40px gutters on all grids
1200px containers on desktop, 960px containers on 1000px, and fluid containers on mobile (with collapse enabled)
I presume you meant to write
Breakpoints set to mobile (480px and below), 1000px (481px to 1000px), and desktop (1001px and up)
I really found no different way to contact you, I hope that's alright.
links having a target to "_blank" to open up a in new window when used inside panels doesn't work
example link when used under panel html opens up in the parent window instead on a new window.
thanks
Murad
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.