topcoat
CSS for clean and fast web apps
Topcoat
I am using the following code to toggle (show/hide) a drawer:
http://outof.me/navigation-drawer-pattern-with-topcoat-css-library/
slideMenuButton.onclick = function (e) {
var cl = document.body.classList;
if (cl.contains('left-nav')) {
cl.remove('left-nav');
} else {
cl.add('left-nav');
}
};
Works fine. Now, I would like the drawer to close whenever anything outside the drawer is clicked. Is there a recommended way how to do this?
Source: (StackOverflow)
Might be a naive' one - but I am sort of stuck on how to put a icon in topcoat icon button. I am creating a dynamic list with delete and modify buttons (which I want to be icons).
Any help is appreciated ...
<button class="topcoat-icon-button">
<span class="topcoat-icon" style="background-color:#A5A7A7;"></span>
</button>
Source: (StackOverflow)
What is the best way to go about adding the large checkboxes seen in http://topcoat.io with twitter bootstrap css? The default checkboxes on twitter bootstrap are too small for mobile. I tried merging just the checkbox css from topcoat, but there are too many overriding aspects of bootstrap so the css is not working. I tried using media queries and !important and other css specificity tricks but these have not helped. I would even be ok with a non-topcoat solution as long as it worked with bootstrap. Can someone suggest a css solution that would work to enlarge the checkboxes in css with bootstrap?
Source: (StackOverflow)
Im using topcoat (topcoat.io), backbone.js and Phonegap for a mobile app Im builing. I want to create a Facebook style slide-out menu. Here is a link to the tutorial: http://outof.me/navigation-drawer-pattern-with-topcoat-css-library/
Here is the jsfiddle which works fine: http://jsfiddle.net/webintelligence/vPef6/1/
Essentially it looks like:
<body>
<div class="topcoat-navigation-bar">
...
</div>
<nav class="side-nav">
...
</nav>
<div class="main-content">In the content</div>
</body>
The important css is:
body{
font-family: source-sans-pro, sans-serif;
position: relative;
width: 100%;
height:100%;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
.side-nav {
display:block;
position:absolute;
top:0;
left:0;
width:320px;
height:100%;
background-color:#353535;
}
.main-content {
position: absolute;
background: inherit;
left: 0;
padding-top:4rem;
width:100%;
height:100%;
transition: left 0.2s ease-out;
-webkit-transition: left 0.2s ease-out;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.57);
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.57);
}
Because my application contains many templates which are transitioned in and out (with the help of this simple library: https://github.com/ccoenraets/PageSlider), I need to have a tag after the body and around the content. However, when I do this, the menu can be seen behind the main content. Here is the jsfiddle: http://jsfiddle.net/webintelligence/TLNyY/
I have added css for the div (copying the body css):
div.current-page{
margin:0;
padding:0;
height: 100%;
font-family: source-sans-pro, sans-serif;
position: relative;
width: 100%;
height:100%;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
Any ideas why the menu is now showing through the content?
Source: (StackOverflow)
I am looking at the topcoat library and using one of there components; Topcoat Switch.
The example functions fine here:
http://codepen.io/Topcoat/pen/upxds
But in my app I nest the switch in an unordered list and have to apply a background colour to the containing list element for styling purposes. As mimicked here:
http://codepen.io/anon/pen/ekKEc
This crude example masks the text from being visible which is highly undesirable.
Similarly if i apply a background colour to the label element the same issue is evident.
Any help on this would be nice as i spent the last day messing about with z-index etc and just figured out it was the background colour.
Source: (StackOverflow)
Having trouble combining Onsen UI ons-sliding-menu and ons-tabbar. I want to have the sliding menu on the top and a icon bar at the bottom. I have tried the following:
<body>
<ons-screen>
<ons-sliding-menu
behind-page="menu.html"
above-page="navigator1.html">
</ons-sliding-menu>
<ons-tabbar>
<ons-tabbar-item
active="true"
label="Home"
icon="home"
page="navigator1.html"></ons-tabbar-item>
<ons-tabbar-item
label="Camera"
icon="camera"
page="page2.html"></ons-tabbar-item>
<ons-tabbar-item
label="Settings"
icon="gear"
page="page3.html"></ons-tabbar-item>
</ons-tabbar>
</ons-screen>
The slider menu stops working when the obe-tabbar is added.
Is there a more complex example?
Source: (StackOverflow)
I'm building my first phonegap app and i'm using topcoat as beautifier (pure css) demopage. Topcoat is great for mobile apps because everything is css based (hardware accelerated) and this is (btw) the way to go when building with phonegap. However because everything is css based there is no javascript to help you manipulating/reading the dom state. This is no problem for most topcoat-components (like clicking a button or typing some text in an input). However, the on/off Switch-component is in fact a fancy html checkbox, when you click it it switches on or off with a css-transition. Very nice but the checkbox itself doesn't update (bug in Topcoat?). I came with a solution that works but I wonder if this is the way to go and why I can't using the recommended jquery's prop() method?
jsfiddle DEMO
<label class="topcoat-switch">
<input id="testcheck" type="checkbox" name="testd" class="topcoat-switch__input">
<div class="topcoat-switch__toggle"></div>
</label>
$('#testcheck').change(function(){
var el=$(this);
el.attr("checked", !el.attr("checked"));
alert(el.attr("checked")?'callback true':'callback false');
});
Source: (StackOverflow)
I am using topcoat css on a cordova mobile app. I want pre-text to fit within width and not word-wrap.
http://codepen.io/civilwar/pen/JEebd
I have text that I want to keep the return characters between paragraphs. I do not want to keep the width of the text. To get around this issue I have my pre text to be in a div that has word wrap break word. This converts the text to only appear within the width of the mobile app ( i.e. I don't have to scroll to the right). Getting rid of word wrap break word makes the pre text go out to its original width. I want to disable word wrap but keep my pre-text within the width of the app how do I do that?
Source: (StackOverflow)
I have started an android app development.
I want to integrate Kendo Mobile UI with Angularjs and Topcoat . But I am getting confused with all this. Please help me to understand the implementation of this thing.
Also I am confused with the fact that is the implementation of Angularjs and Kendo UI is same as the implementation of Angularjs and Kendo Mobile UI ?
Please help me with this. Thanks in advance.
Source: (StackOverflow)
So I'm working on a phonegap app using topcoat and implemented a fly out menu as seen here. I'm using this script to open/close the menu
$(function () {
var slideMenuButton = document.getElementById('slide-menu-button');
slideMenuButton.onclick = function (e) {
var cl = document.body.classList;
if (cl.contains('left-nav')) {
cl.remove('left-nav');
} else {
cl.add('left-nav');
}
};
});
Now everything is working fine but what I want to add on is the ability to swipe to close the panel and to open it as well. I've seen touch library for jquery that seem to offer a solution (such as TouchSwipe) but I want to try to get this as close as possible to a 1:1 touch movement interaction.
Anyone have an idea on what direction I should go in to get this going or have any ideas? Any help is appreciated.
Source: (StackOverflow)
I was just wondering if there is a list of the topcoat/onsen class names. Class names such as .topcoat-button--large--cta. This would greatly aid my ability to customize the design of my app. Also, the docs only display a few and I am not too sure what to look for in inspect element.
Thanks, Ben
Source: (StackOverflow)
I'm switching from using JQM and Phonegap to using Topcaot and a few smaller libraries to take care of transitions and such. One thing I haven't found a micro-library for is the navigation.
While many site I've seen say to create the UI and content dynamically through javascript, it does seem like a daunting task do to the amount of pages I would need to create. Similar to JQM, I want to be able to separate my different pages as different html files that ajax load them into the DOM, but in an optimized way that is fast and doesn't cary the weight of JQM.
TO anyones knowledge does such a library exist or would this be a library I would have to write? It doesn't seem like it would be an overly complicated task, especially if I would use jquery. Any ideas of help is appreciated.
Source: (StackOverflow)
I'm trying to make a custom button with an icon on it using Phonegap.
I used https://github.com/topcoat/icons, and www.icomatic.io to create the icons.
Then I saved the resulting icomatic files in a www/css/icomatic folder.
For some reason the following code works(shows the icon) in my normal (chrome) webbrowser, but not on my phone (it just displays the button with the word camera):
<button class="topcoat-icon-button" id="takePicture">
<span class="topcoat-icon icomatic">camera</span>
</button>
I use the icomatic.css in the wwww/css/icomatic.css folder. The css is:
src: url('icomatic.eot');
src: url('icomatic.eot?#iefix') format("embedded-opentype"),
url('icomatic.woff') format("woff"),
url('icomatic.ttf') format("truetype"),
url('icomatic.svg#icomatic') format('svg');
referenced like this:
<link rel="stylesheet" type="text/css" rel='nofollow' href="css/icomatic/icomatic.css"/>
Thanks!
//EDIT:
It seems this issue is occuring specifically on certain device/software(Android 4.3, Xperia Z)
On another android device I tried, the camera icon showed up normally..
Source: (StackOverflow)
I'm coding a hybrid HTML5 app. Now I'm in the stage of choosing my tools. I've had few doubts that you already help me to clear up. But after discovering Topcoat I have this one last question.
I already know that since Twitter Bootstrap reached version 3 and you can strip it directly in the webpage, it becomes much more fluent. But the fact that Topcoat is just CSS made me think because a lot of people still complain about Twitter Bootstrap + Phonegap performance...
Has anyone here made a real test to determine how fluid / natural the experience is, and which one handles better?
Source: (StackOverflow)
I'm building an android app with phonegap using angularJS + topcoat. I managed creating the index page, views and all the basic structure. My question is, there is some pages(partials) that doesn't have data to show. In that case, the view does not fill the height of the page. That makes a problem because I have a drawer menu hidden usin angular-snap. Because the page doesn't fill all the available height, the menu that is supposed to be hidden is visible. Does anybody know how to handle this situation? I'm attaching a image to examplify! app-example
Thank you!
Source: (StackOverflow)