I want to create custom themes for ExtJS 4 based application. I read ExtJS documentation and found out that we need to install Ruby, Compass and SASS to create custom themes.
As I am not sure whether my client (and my employer too) will allow me to install these 3 tools, I would like to know whether its possible to create custom themes without using these tools?
Thanks in Advance !
Is it possible? Yes. Without SASS, you can still apply any custom styling you need using plain CSS. You'd include the default ExtJS stylesheets on your webpage, and then use custom stylesheets to override whatever styles you need to.
Is it preferable? No. Depending on the extent of the theming changes you're looking to make, using pure CSS is likely to be tedious and troublesome. Using SASS/Compass allows you to use the variables and mixins provided by ExtJS for theming, which is much faster and easier than trying to do it by hand. In addition, the CSS files generated by SASS will be minified, and won't contain the extra CSS bloat you'd end up with trying to do it all manually.
My recommendation: try hard to convince your employer to allow you to use SASS. It will be well worth it if they do. And remember: Ruby, SASS, and Compass are only needed for development, since your SASS files will be compiled into CSS before being included on the webpage. Your client shouldn't need anything extra (other than a browser) to access the ExtJS application. If your employer is really stubborn about installing Ruby, you may have no choice but to create your theme in CSS by hand. But that's likely to be a long, frustrating experience.
Related
I have something on my mind for quite a while but couldn't find an answer to it. Consider the following:
You like to build a fancy website with React and have to decide which front-end framework you should use. In my example I have chosen Material-UI.
Now you came to a point where you need more features like a responsive grid system, show/hide styles etc. Instead of implementing them on your own (or copying it from bootstrap/foundation, for example) you think: 'Hey, why wouldn't I include another framework beside Material-UI'.
Now comes the question. I know that most of the css frameworks available have their own normalisation css and basic styles for typography and other elements.
Can I safely include another (more featured) css framework beside Material-UI without breaking fundamental things or should I avoid that?
Furthermore, what is a good practice approach to extend the css features without copying parts from other frameworks and without reinventing the wheel all the time. Did you ever had a case or project where you had to combine multiple front-end frameworks and how did you solve this problem?
Thanks for your feedback.
Cheers
Gregor
FYI, there's a Material Design version of Foundation, you can check it out at http://eucalyptuss.github.io/material-foundation/
Now, talking about your doubts... one should be very careful when mixing and/or using more than one framework at the same time... one issue can be conflict, other can be unnecessary bloating which could make load time heavier.
However, if you are aware of that, most of modern frameworks (as Foundation) can be compiled partially, so you will be loading only the stuff you'll use, minimizing all possible issues.
Have been thinking this exactly thing lately.. I would choose one that has most of the features i need in my project. I usually go just with Bootstrap (sass version) and use only the styling part of that (css grids mostly).
Mixing frameworks will eventually be hard to maintain and you have to include lot of extra (unused) features into your application. When using some "cool", full featured components like Material-UI has, there will still be times when some component doesn't have just the property you would need.
So my opinion is:
Use some framework for styling only. This way you have uniform look in your site. Or even just some responsive grid library could be enough.
Usually basic html components are enough to fill basic needs, you can just build your own custom components for special needs (or use some from npm library). This way you have just the features you need.
This way my site is not depending just some single framework. I can change the styling part anytime, i can change one component to another etc. without having to re-write my whole application just because it's been developed entirely with some "full featured" framework.
I'm trying to reach the best css practice on my website using my own custom css till I found out I can use css framework such as bootstrap or foundation zurb instead. I thought using such framework directly without the need of making my own custom css is possible, but it turns out that all css frameworks are limited to some point yet I need to add extra custom css so my site look the way I want.
I want to use css framework because of the fact that it is being served over CDN so no extra bandwidth, and also for load speed and performance.
now my question, is it possible to be using only css framework on a website without the need of adding a custom css?
also how about creating my own custom css and using #import to a css framework inside the custom file, is that a good practice?
can anyone enlighten me to an efficient method serving a css file with/without css framework to my website?
You can use a plain framework without writing any custom CSS if you either a) Are happy with how it looks without custom CSS or b) like one of the many themes you can get for such frameworks.
You can #import a framework into your own custom CSS - in fact, many frameworks are available as less and importing them allows you to use variables from the framework in your own CSS as well.
As far as efficiency goes, are you sure this is the performance problem you have? If you haven't measured the performance, you aren't ready to optimise! It will, of course, be a straight economic trade-off between looking exactly as you want, and keeping the page load fast.
using a css framework is always a good option. You can use either bootstrap/foundation. along with the various functionalities on the site it would provide u the animation effects as well. And would help to complete the site faster as they provide the snippets of code. You can use less/sass and have the styling customized in the variables so you wont have to include extra custom css file.
I have implemented a Rails project which has a lot of forms, but they do not look good. The new, edit, and destroy buttons are very close to each other. Listing the items in each form is also ugly as the columns are very close; they definitely need CSS and styling. Is there any sample or template that I can use?
For general styling you can use Bootstrap, there is even a gem to make it easier to integrate.
For better layouts and automating the form building process such as new, edit actions, you can use Formtastic.
Another one that's as popular is simple_form.
You can find even more form builders at the ruby toolbox site.
As you have mentioned little about your application, its hard to tell what styling you should chose. However as #olive_tree mentioned, bootstrap is simpler and a convenient option. You may want to check this rails cast
http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast
Bootstrap is definitely a good place to start. Personally I prefer ZURB Foundation, though, but that is mostly a matter of preference. Here is a link on how to integrate Foundation the easiest way:
http://foundation.zurb.com/docs/applications.html
After many fruitless days of trying to get JQuery Mobile and AngularJS routing to work together, I'm considering my alternative options..
Is there a way to use the JQM CSS without relying on JQuery's javascript?
Or is there a substitute CSS package that are recommended? something with all header/footers and lists that is available in JQM?
Of course, there is an CSS file in the package you downloaded. But all the sites functionality and the mobile adaption will be broken. You can rename the classes and the id's or directly use the classes from the css file.
Greets
There are quite a few jQueryMobile functionalities that rely solely on the CSS fole, eg. the grids. You won't get the interactions, but all the buttons looks, shapes and colors are totally useful without the JS.
Still - depends on your expectations.
And when using it like that you need to understand a bit how JQM works to know the classes and html structure that's expected, because some of these are generated by javascript.
[kind of digression]
But maybe you just dislike how big jquerymobile is?
Then you probably want to use: http://jquerymobile.com/download-builder/ to get only stuff you need, and also use tte themeroller here: http://jquerymobile.com/themeroller/index.php to create only one theme (global) and remove other themes (A,B,C)
That's how you get it a lot smaller.
You can reuse the CSS file inside he downloaded JQM package. The file jquery.mobile-1.x.x.css can be included, but make sure to include the images folder as well and have it at the same location at the destination.
If you aren't sure of which classes to include for which purpose, you can simply find it out by inspecting a JQM demo page to find out (View source will not work due to the JQM javascript).
JQS provides support for ui animations and user experience enhancement. Removing libraries will dispart you from accessing css contents created and used by javascript in order to 'manage' a front-end design. –
Yes you can use jquery mobile theme and adapt it to your needs.
Just reading there was adapter releases for your situation : https://groups.google.com/forum/?fromgroups#!topic/angular/oIxRxpkn3L0
Perhaps substitutes to css packages are documented. About heavier JQM templating and using, there are some introduction to what you'll need to take a look at like adobe theme-control-jquery-mobile.html ..
I'm developing a ASP .NET web project that uses: jQuery, jQuery UI, reset/normalize css stylesheets. Most of the CSS is crap, so I'm going to rewrite it + I will have a budget to it :)
I came across two fancy solutions that I would like to learn:
SASS
Bootstrap
I wonder, how to "mix" my existing application with these solution. When it comes to SASS, it seems to me pretty obvious - just rewrite CSS and be proud of new clean meta CSS, however I'm not sure about Bootstrap. What are the advantages of it if I don't want to change the layout of my site?
Another thing: can I run into possible issues when including Bootstrap / SASS into my site?
Twitter Bootstrap (TBS) is a CSS framework and its original purpose was for website and web app prototypes. So if you want to start from scratch with very thorough and well styled CSS, then bootstrap is great.
Twitter Bootstrap is NOT necessarily the right solution if you want to keep the majority of your existing UI, especially if your existing UI doesn't match up well with their scaffolding, grid system, and other elements of their UI styles (forms inputs, buttons, typography etc). You'll find yourself having to override a lot the framework's properties, which kind of defeats the purpose.
As #Nathron mentioned, if you try to mix TBS with your existing code, you could run into conflicts. Creating a customized build of TBS that includes only the elements of their framework that you want would be the best approach there: http://twitter.github.com/bootstrap/customize.html.
Regarding SASS, if you want to use it in combination with TBS, check out https://github.com/jlong/sass-twitter-bootstrap.
From their site: The Boostrap JS is for "interactive components for things like tooltips, popovers, modals, and more". So if you are using any of those, make sure you don't have conflicting JS functions.
You could run into issues with the CSS if your class names are the same as the ones that Bootstrap uses. Many of them are a little obscure like "darkwell", but some of them are common like "dropdown", so you just have to keep an eye out for that.
Easiest way to see is to download it and play around with it :)