I am looking to add bootstrap or flatui styling to my ExtJS 5 app. Now, i have done some investigation and tried a few things
Just including bootstrap css and js files directly in app index file. This doesn't work well because extjs default styling seems to override the bootstrap styling. And also, the way sencha buttons and other components are created they have multiple nestings so even if bootstrap styling didn't get overridden, it still wouldn't work well.
Picking up extjs-bootstrap-theme from extjs 4 and adapting it to 5. Only issue with this, it will have very limited bootstrap styling as this is built as a sencha theme.
Has anyone had any experience with this? What would be the best way to go about it? Thanks
If you use ExtJS, you should embrace the ExtJS theming system and guidelines.
As per them, the best way would be to derive a new theme from ext-theme-crisp or ext-theme-neptune, for which you overwrite documented CSS variables and create a new iconset to make the new theme match the look of bootstrap/flatui as far as possible. Only then, when this comes to an end and changes are still required, you can add JS code or custom CSS.
While ExtJS has over 500 CSS variables, my guess is that you would have to change between 20 and 100 of them to make it match very closely.
You should start with the most general variables from Global_CSS like $base-color, and then proceed to the more detailed variables, which are often derived from the general variables. So in the best case, you can skip 100 of them because you already changed $base-color to the correct value.
Related
I'm trying to insert a datepicker in my angular 4 app but I've faced some dificulties.
So I tried this kekeh/mydaterangepicker but I need to have this design:
I tried to modify the css of the plugin in my css but without real success. I cant succed to change the color of first selected node and last selected node to follow my design.
My actual state:
If someone can help me.
I can also start from scratch but I don't know how to properly create a datepicker in angular.
The styles of the component can be changed by overriding the existing styles.
Read documentation and follow the instructions. The library documentation also provides you with examples.
Also you you might want to use Angular material datepicker
It is very convinient to work with it and it has bunch of other useful components.
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.
try angularjs. Here there's an example with topcoat: http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/
Angularjs is very different from JQM but you should give it a try.
Otherwise, if you don't like angularjs you can find a more traditional approach at this page: http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/
Hope this helps
Here you are - new plugin based on coenraets css transitional solution: https://github.com/linslin/pagingSlider
Features:
Paging with pagingSlider
default pageSlider actions
Pagebrowser
Totaly plugable like pageSlider
if you want, pagemenu to switch directly to a page
touch events
Consider looking at Topcoat Touch (Github Project), it is basically a micro library for transitions and events (5k minified and gzipped) -- full disclosure, I am the author of Topcoat Touch.
It is a very simple framework that uses Topcoat to create the UI, inspired by jQT and to a lesser extent jQuery Mobile. It can be either a single html document with multiple pages contained within the same document, or using a collection of controllers and templates. It uses a collection of optional libraries to provide most of the functionality for a mobile framework and has a generator for Yeoman to get the scaffolding up quickly.
I haven't used it, but Kendo UI Mobile is similar to JQM and may fit your needs: http://www.kendoui.com/mobile.aspx
I am working on creating a jQuery plugin and I have some questions regarding how to structure things:
1.How much HTML should the plugin have written and how much should it create through jQuery ?
Is it good to have written all of the HTML so that the entirety of the markup structure is visible when looking over the code ?
Or is it better to have written only the minimum amount of HTML so that it is very easy for the user to add/modify content and create all of the rest, bulky HTML through jQuery ?
Is there a recommended practice ? How are things done in professional plugins ?
Why should things be done in a certain way and what are the reasons behind it ?
2.How to balance the plugin options with the CSS ?
Should the plugin offer options that would affect the presentation of the plugin (options that would modify the stylesheet) or is it a better practice to have the user directly modify the stylesheet for presentational modifications and in the plugin only have options relating to the functionality ?
What are some guides regarding what options to offer in the plugin as to not step over CSS ?
Regarding my experiences, I have seen all of these in different places and plugins and that is why I am asking for opinions from experienced users and what are good practices and why.
1. How much HTML should the plugin have written and how much should it create through jQuery ?
According to the paradigms of progressive enhancement, there should be no markup which would be useless in case of no JS enabled. In other words - if your plugins needs some special markup and additional tags it should create them by itself.
The reasons for that is semantics. Additional plugin markup is useless for users (and bots) when there's no JS enabled and thus it should not be present at all.
Also keep in mind that developing a good JS plugin means that content will still be available when the plugin fails or JS is disabled. Moreover, you have to take additional care about making sure that your plugin is accessible. More on the topic of progressive enhancement covering also more advanced issues can be found for example in a book by The Filament Group.
2. How to balance the plugin options with the CSS ?
Do it as follows:
Content: HTML
Logic: JS
Presentation: CSS
Despite the fact it's changing now a bit (think CSS3 animations), options of the plugin may influence the way it works rather than the way it looks. That means your users should be able to config timings, delays, speed, number of element or whatever your plugin is doing through JS. But leave the presentational aspects in the CSS stylesheet. Use JS to change classes of elements rather than inline styles and let your users write whatever CSS they want. Obviously, don't forget to provide some default styling :)
I always recommend reading more on the topic in A List Apart. It's quite a theoretical article but absolutely a must-read for any front-end dev.
Tutsplus has a jQuery course with usefull videos.
http://tutsplus.com/lesson/head-first-into-plugin-development/
This is one of the videos that explaines how te make a plugin.
There are a lot of ways to create a plugin, but this is a good one.
What should be the best thing to do with Twitter's bootstrap css/javascript library?
link (online), clone, fork or download it?
I would like to always have the latest updates on my website but I would like to customize small things like width size of a the tabbed navigation feature, some colors, etc.
Fork it. You will be able later to easily update to the new version, and merge in case you changed something. I suppose you are using github, so also push watch button, so you will always be aware of issues, updates, fixes of this project on your dashboard. Also you will be able to contribute to that awesome project.
Don't link directly, because one day they will change something, and this could break your app.
Also I suggest to look at LESS, and not compiled CSS version of library, in my opinion it's easier to customize everything there.
Update:
Probably easily update was too strong expression, and was referred only to bug fixes and minor updates. In a case of major version updates with breaking backwards compatibility there couldn't be easy and perfect solution. In this case, only if you really think you need this update, you can create new branch, update twitter bootstrap there, and than start a painful process of fixing your code. With branches you will be able work on your main app with old and working bootstrap, while part of your team will refactor code to become compatible with the new version of the bootstap(even if you only one person on the project, it's also good idea to test new solutions in the test branches, to not mess up working code).
I am interested in making a tabbed display on a web page I am working on. I need to apply my own styles, so I would like to find a javascript library that provides very little styling out of the box and makes customization as easy as possible.
Features I would like:
Specify the Image used for the tab.
Tabs can re-size to fix the text inside of them.
Relatively easy to apply my own styles.
I looked at jQuery UI Tabs but it does not seem like it would be too easy to apply my own styles if I don't use their tools to do it.
I also looked at jQuery Tools, which seemed a little easier to customize, but appears to require that you use fixed length images for the tabs.
Can anyone recommend a good js library for creating customized tabbed navigation? Am I just making customization of the two libraries mentioned above harder than it needs to be?
This is a super easy walk-through to create custom tabs using jQuery, I followed it once and haven't used any other tabs since:
Custom jQuery Tabs | Soh Tanaka
I know it can be tempting to often use libraries for something like this, but it is very straightforward and you'll know all about how they work, which will allow you customize them far easier than nearly other plug-ins.
With jQuery-UI you can easily change the styles with css, you do not need any fancy tools ^_^