Is it possible to use w3.css with Vaadin? - spring-boot

I just have learned about vaadin and I'm watching tutorial about a CRUD TODO list in youtube. Vaadin uses Valo theme for css rendering that I found great but I'm wondering is it possible to use w3.css framework within vaadin vue code ?
I try googling but no answers.

It depends™
If you are asking: can is just replace Valo with W3.css the answer is most likely no, at least out of the box. The reason for this is, that Vaadin client side code emits the HTML-code you see in the browser and all style and class tags there are defined on their end. So what any theme for Vaadin must do, is to provide styling rules for that exact schema; so you would have to find a way to adapt. Or you have to put addStyleName all over your code (if it's btn in your CSS framework, it's v-button in Vaadin and also nested elements might be different etc).
Yet, if you just want to use the styles for some parts of your application (let's say, you want a fancy start page or add cards etc), then you can add the other CSS and use them together. Vaadin/Valo does a good job in isolating their styles from the rest of the page and also within their hierarchy (the theme name is a prefix to all Valo rules). Yet if the two themes then look great together is another story, but Valo itself allows for quite some tweaking just with variables put in SASS.

Related

Custom landing page with Octopress

I've setup Octopress and want to use totally custom styling basically throwing out most of the standard styling that applies to the rest of the site.
I do want to keep reference to all responsive goodness though that is baked in.
What's the best way to setup my custom landing page?
You mean like this?
http://eduncan911.com
^- My Octopress site.
Blog is at: http://eduncan911.com/blog
Since Octopress uses Jekyll under the skin, it would be better to think about how to accomplish this in terms of Jekyll - and there are many ways to do this.
OT: Personally, I find Octopress' theme layout, includes and customs far too complex and too granular. They did this to make it highly customable; but in my view, it tightly couples every template to another template.
Now with that said, there are multiple ways to achieve this. I did answer a very similar question here:
Creating an octopress theme from a wordpress theme
It's Jekyll: therefore, just go create the page however you want it. Replace the /source/index.html with whatever design, html and css you want.
If you don't want the blog roll, or want to move the "blog to another directory", just move the current /source/index.html to, say, /source/blog/index.html. That's it.
As I noted in the answer above, the only import thing is to keep the YAML frontmatter and specify the "layout" as you want to use. For example, I have a layout called "homepage" that is far different than any other layout. My /source/index.html uses layout: homepage.
But even then, you don't even have to use the YAML - create your own raw html file as you see fit. It will be used when you rake generate. This is what I personally did at first. Then, I slowly split up the homepage into the /source/_layouts/homepage.html and just went from there. I did not follow Octopress' entire theme at all - just enough to use posts and pages.

Using MVC 3, Recommendation for creating Menus, HTML5, JQuery or 3rd Party Components?

I am just trying to streamline my MVC3 development approach. I use Razor in the View and was wondering what the recommendation is for easily creating more fancy UI widgets such as Menus. I would hope I could leverage some good open source components and plug them in. I do subscribe to a good 3rd party component library, but wonder whether this type of feature is best implemented via JQuery UI or old style HTML/CSS?
Many thanks.
In general, Stack Overflow isn't here to recommend tools for you. However, I will say that whether to choose a javascript tool or straight html/css depends on the needs.
It's best to work with the simplest solution that solves your problem. CSS can do menus quite well, and straight CSS menus are often the best choice. However, if you need things straight css can't do, then you need to add javascript. For instance, one problem with CSS menus is that it's very easy to "roll off" the menu and have it disappear from under your pointer. Most javascript menus add a delay that allows you to roll off for a second and get back before the menu disappears. This improves usability.
Even lots of fancy effects can be done strictly in CSS, but as with many such things.. it won't be compatible across all browsers, which is again where javascript comes into play. Sometimes the only way to be compatible across the board is with js (at least without losing functionality).
I wouldn't recreate the wheel on this one, since so many web sites already do this. If you are trying to streamline your development, I'd say use your 3rd party library or find a good jQuery plugin. You could probably easily create your own in HTML/CSS/Jquery, but it will add on to your testing later. An existing 3rd party/jQuery type of component would take significantly less time and have a lot of features you want already built in.
I'd recommend using MVC SiteMap Provider in conjecuyion with a JavaScript menu of choice e.g. SuperFish http://users.tpg.com.au/j_birch/plugins/superfish/. The menu fancy JS part part is the least important.
From the MVC point of view what I think really matters is how you manage and maintain your menu. MVC SiteMap Provider makes it really easy to build an maintain menus (can even use Attributes to make Actions appear on the menu). It can also do things like Security Trimming so if a user doesn't have permission to get to the action etc it isn't displayed on the menu.
I'd check that out.

Column navigation

Is there any module available for column navigation style for eg. joomla main navigation? . I am using joomla 1.7
I think they might be using IceMegaMenu, which I've tried myself and works really well. I personally think that it should be integreted as a standar feature, as it really chenges the way menus act and is 100% compatible (you may even choose to make it work without js, and results are still great).
PS Hoping that this won't be considered spam, you can see the menu in action, as I've implemented it, at my web site. It's a very standard version, without js.
For a complete overveiw of the features you may have a look at the official Demo, it really looks like Joomla.org relies on IceMegaMenu...

Customizing joomla components and modules. Phoca Gallery case

Im developing a site using Joomla, and one of the requirements of the site is that it uses the Phoca Gallery Component and Module. The problems with these is tthat they have a lot of inline CSS styles, which makes them hard to customize. I've solved this removing the style attributes with jQuery, but it doesn't seem like a very good solution.
What could I do to solve this problem?
This is the site: http://aufbauzwei.flavorgroup.eu/joomla15sunprotect/
just update to newest Phoca Gallery, there are used mostly external CSS.
The only way to do this is to do it properly and get your hands dirty. Change the inline styles and add classes to each html element which you can later style via CSS. It's simple enough but time consuming, but if you want to customise the look and avoid jQuery then this is the way forward.

Is there a catalog of all UI widgets and their names, platforms and languages?

I was looking at the Firefox Add-ons Manager UI (pictured below) and really liked the expandable list used to show settings or properties for each add-on.
Firefox Add-ons Manager http://uploads.tech-buzz.net/Firefox3Beta3ComingonMonday_859/get_addons.png
I liked it enough to want to include something similar in one of my applications. The problem is, I don't know, exactly what the control is called (it doesn't seem to be "expandable list"), nor do I know if there is an implementation available for use in my own application (so I wouldn't have to reinvent the wheel.)
This isn't the first time that I've seen some cool piece of UI and wanted to incorporate it into something I'm working on, but have had no idea if I would have to design it from scratch. So I generally end up reworking my UI to use standard UI widgets to save time.
This got me thinking, is there some place that has a catalog of a bunch of UI widgets with names and what platforms/languages they are implemented for/in?
UPDATE
Turns out this control is called a Rich List Box, and it seems to only be implemented in XUL.
To answer your question, no, there isn't a universal catalog anywhere, though MSDN is as good a place as any to find definitions of most common UI elements.
The specific widget you ask about is generally called an accordian (wikipedia)

Resources