I am using yui2 (I know it is archived now but I had hands on experience with this version and did not have time to learn yui3 due to tight deadline) in some of the pages of my project.The pages without yui listing are made responsive for mobile view using responsive css.But now the pages with yui2 design are not responsive.I want to know if I can add lines of code so that it can become responsive.Please help.
YUI or not, you can use Pure CSS grids: http://purecss.io/grids/#pure-responsive-grids
I found the solution:
follow steps given here:https://css-tricks.com/responsive-data-tables/
in the css provided replace table,td etc with #uryuidivname table,#urdivname td
Related
I have created an website/application using Angular2. The infrastructure is all set, I have routing completed, sass being processed etc.
I have sections (components) on this website that will display current web standards for our designs (buttons, forms, copy). The purpose of this site is to give our developers a copy/paste solution for markup and sass.
We will most likely create our own css library but they will still need a good visual reference of what each class does and a copy/paste solution.
I know how to develop all the standards, what I don't know how to do is have the DOM display options for the user to copy/paste the code. I could manually enter the code into or tags but this will be hard to maintain and not very clean approach. I'd like to find some solution that will utilize my code and create these tags at run time.
Googling this question leads down the road of using living style guide generators, which i don't want to use... why? I like having the functionality of controlling my own layout and scaling my standards as I see fit with our own technology.
Any ideas?
After exploring this even further I ended circling yet again on documentation tools (KSS) where I would need to rebuild my entire style guide for this functionality using markdown and or JDOCs.
Solution!
Use CodePen, its free to signup however there are some nice to have features for a monthly fee. I easily created my code here using SASS, HTML and CSS libraries. CodePen has a great EMBED feature whereas I could copy/paste html or iframe right to my styleguide.
Problem is now solved, and we have have a dynamic Web & UI Styleguide.
Hope this method helps others in my situation.
I want to apply angular-material in my recent project, but I am afraid that it will be very difficult to find other components which are not available currently. Like treeview, date/time picker, carousel and so on...
How can I deal with these things? any opinions?
I've just tried to use Angular-Material in a site with an existing style, and found a number of issues that I wasn't able to resolve:
- Site UI was feeling very sluggish
- There was a paralax script that became extremely slow and lagged when there was a quick scroll.
- Odd behavior with fonts when it loaded (when I re-sized the screen and back again it was working again) in chrome.
This became a real issue - for the most part it doesn't feel complete. I was really hoping for something like Material-UI, which appears to rely on React.
However, I have come across this https://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html which appears to be suitable and works with bootstrap.
There's a really good answer : Using Bootstrap for Angular and Material design for Angular together for some of the issues you will face when using Material with bootstrap.
Also, I tested on a mobile phone and the site was terrible (in performance), you'd never want to get site up with that type of performance.
Also, there's lumx if you want angularjs support (e.g directives etc...). My other issue with lumx and angularjs material is that swapping over libraries is not an easy task. I'm not sure whether this is the norm, and heading this way in the future - but I'm from the Jquery days where my markup remained consistent and I can activate features. However, both lumx and angularjs material require specific tags which means that swapping over libraries requires me to edit my mark-up.
Maybe here is another view of using Angular Material.
I have been using Angular Material as the only web component for my work projects. Angular Material is still in beta version, and like you said, many components such as table, color picker, and sidenav are still missing. If you have to use those components in your projects and not able to implement yours, Angular Material may not be a right choice. Something like Angular-UI or Polymer is probably what you are looking for.
The reason we choose Angular Material at work rather than other nearly complete web component library/collection is because it is being very actively maintained. Currently there are 900+ open issues and lots of pull requests are still going on. For me, a complete version will be more guaranteed. Treeview, date/time/color picker, table these kinds of components are already in the open issues. Here you can search for it.
https://github.com/angular/material/issues
Currently we will find workaround or overwrite the material to solve problems. Or we will open issues if there is no solution. And again, it is still in beta version, you should decide whether you want to use it in your project. But you can definitely look at their available components to determine if Angular Material is a right choice for you.
https://material.angularjs.org/latest/#/
I want to create a popup using angularjs in Extjs Page.This is my current situation.I have manually bootstrapped angular link when they click.now the issue is ext-all.css and bootstrap.css files are conflicting.So How can i avoid this conflict.Can any one suggest idea?any conflict arise in js file if its in same page? Lot of thanks in advance
AngularJS + ExtJS - another question in stackoverflow read this before considering to combine both.
I have tried doing it for my websites for curiosity's sake but it creates more problems then it solves. I would strongly recommend sticking to one framework.
You can combine Jquery and ExtJS without problems because they do not have any conflicting elements.
Your conflict probably arises from the same naming and calling that might or might not exist within the libraries of these two frameworks. The way I see to fix it would be to go within a library and start solving the conflicts. That will be very tedious to say the least.
I wouldn't really mix these frameworks together in a single project. ExtJs is a fully fledged component based framework which should provide most, if not all the functionality that you need. If you are missing something then you should look at the Sencha forums section on user plugins and extensions or even build it yourself.
ExtJs provides most, if not all of the functionality of AngularJs already but adds visual components such as grids, forms, windows, treepanels etc. If your using Ext already for your project you should really stick by it. Adding another framework adds complexity and additional libraries to download, increasing load times etc.
By good, I mean using hooks/filters.
Basically, by default the two options are Images and Uploaded to this page. I would like to add an additional option in there. I know how to add a new tab to the media manager (see here), but that doesn't achieve what I need.
I've been looking through the limited documentation on 3.5 and have found the media_view_strings/settings filters, but, based on what I can tell, neither could be used in this case. I've also done quite a bit of digging through the core source, but the number of files relating to the media uploader is daunting to say the least.
I thought about running JS after page load to modify the DOM and just add the extra select option in, but this seems very hackish and I'd like to avoid it if there is a better, more robust solution.
Any thoughts on the best way to approach this would be greatly appreciated!
Note: I didn't post this to the WordPress SE Site since it gets much less traffic and the questions tend to be much less programming-related.
Most of those select-dropdowns are from wp-includes/media-template.php, which has a lot of Underscore templating (<script type="text/html" tags), but few action hooks for php code. With Javascript you can bind the Backbone.js hooks for wp.media events, such as wp.media's open/close events. From such event you could grab that Images/uploaded-to-page selectbox with jQuery('.media-modal-content:visible .attachment-filters'), add item(s) and listeners as needed. I'm pretty sure there should be a much better Backbone.js-style solution, though.
Here is a tutorial by Shiba Shake on this subject ...
How to Expand the WordPress Media Manager Interface
Hope this is helpful to you!
I have a problem using the their latest WPL v 4.2.1. The stripping of suspect HTML, javsacript and styling is so aggressive it strips out ALL the CSS.
I understand that CSS can be easily used to inject malicious javascript using URL references, but this also means im losing all the innocent styling that makes my content look readable. The last thing i want displayed on my aspx pages is boring 'plain' text.
My question: Is there another library on the market/the web which I can use which will not strip off my styling elements completely? By that i mean selectively removing only the possibly malicious attributes within the CSS.
I have tried searching but without much luck. If anybody knows of one, could you post the answer here please? I know the current source code can be modified but I'd really like to use an available project if there is one as i'm not very knowledgeable with cross site scripting.
Thanks a ton!