I'm using Polymer 1.x and started using the Polymer Kit to build a current app. I know about the App-Elements, and currently I'm trying to achieve something like this:
Full:
Mobile:
So far I have something like this:
Do I need to use media queries to hide the tabs and show the logo?
On a side note, I'm really having a hard time understanding Polymer, because I don't know if the elements come with the predefined styles (as Bootstrap or Foundation would do) or you need to do some heavy-lifting in CSS (which is what I've been seeing). I would really appreciate if someone could show me a good tutorial (I've seen Polycasts and the Github) on how to fit things together!!
You can use iron-media-query to hide the tags.
All the polymer elements have predefined styles and have exposed certain mixins and variables for custom styling.
I would recommend going through polymer's documentation and element's documentation to best understand its usage as each element has its own set of properties and styling. Polycasts cover only a few topics and are good source of knowledge only if you are already familiar with polymer development.
Related
We are using ngzorro (angular third party material) in our project. The project is almost halfway through. We face some issues in customizing styles. Management asking whether we can continue with ng zorro or style using normal CSS.
Can anyone please suggest at this point which is good? Following ngzorro or designing using your own CSS.
My project is completely done so far using ngzorro. My project involves various forms and charts. Also please tell me the drawbacks of using angular materials instead of styling using normal CSS.
I tried to follow the style of ngZorro where I could. In some cases where it was needed like:
text color of enabled and disabled elements
background color of enabled and disabled elements
width and height
margin and padding
own icons and text
I applied some own css rules.
As always it depends on the complexity of your project and given design. Regarding my experience I remember that applying your my own CSS rules was easy to accomplish and not that time consuming.
Regarding the drawbacks...
Using angular material design and defining you're own css classes is no contradiction. Thanks to angular material and it's friends I'm not in the pressure of reinventing the wheel. It's well thought out and went though a lot of dev stages my own CSS would need to go it self. I rather like to extend the given design where it is needed.
I wonder what framework is used for the tensorflow
I like the multilevel menu that they have
any idea what html framework are they using?
Tensorflow is owned by Google, and I believe that they would use an internal framework for this.
You can use public open source frameworks. I myself, have been playing with Materialize (http://materializecss.com/). I have found this to be quite simple and effective. Specifically for this menu, you can use the Drag Out Menu, as demonstrated here: http://materializecss.com/mobile.html. This makes use of th jQuery SideNav plugin.
As for whether you can make it a multi level menu easily, I cannot answer that question. However, I would suggest that this could be achieved within the HTML Markup and likely also via CSS.
When it comes to styling a forms based web app (or pages, components, etc.), how do I build it using the least amount of CSS, style tags, style classes, and style attributes possible?
My understanding was that the paper-* elements implement an opinionated material design style that can be used to build components with similar material design out-of-the-box.
I'm trying to build an internal app for employees at my company (thus, as long as it's not bad, styling is not that important). It's basically a bunch of forms pages that look like many of the protoypical menu-driven web sites (like the polymer docs pages):
Nav menu on the left
Menu selected content on the right - text reports and forms mostly
header/logo on top
However, when I tried to copy some things (like item list boxes) out of the elements catalog like the paper-item demos I couldn't match the look in my components simply by copying the HTML. The demo HTML referenced classes for which I had to copy a bunch of <style> tags in order to get them to work.
It felt like a lot of re-inventing the wheel to copy an often repeated look.
I'm not sure if I understand your problem. The paper-* elements aren't meant to build components, they ARE components. If you want to use them you have to go the full way. If you use them as intended, they look like in the demos out of the box. You can't just copy the HTML. A more traditional way to get the material-design-look is Materialize or Googles own MaterialDesignLite.
Do you know a source for pure CSS Templates? After setting up a simple Web Project I always wish to have a CSS file to:
Set reasonable font settings for paragraphs and headers
Polish my anchor tags
Style my forms (if I have to touch the HTML for this one - no problem)
Style my tables (I use headers and footers etc) using even & odd
Maybe give me some handy classes for error boxes, etc.
So if I Google for a such CSS file I find CSS Homepage Templates with HTML Structure and massive CSS which I can't use without changing much. I find CSS examples for perfect tables, other examples for perfect forms but what I don't find is a single CSS File which when loaded in a properly formatted HTML website will make it look "okay" instead of the pure HTML look.
Do you get me?
Does anybody have a hint for me?
Twitter Bootstrap might interested you but I believe it has a bit of javascript in it as well.
Edit: As mentioned in comment you can use many of the Bootstrap features without using any javascript.
I've personally used bootstrap and I love it. I've also bookmarked few others to play with when bandwidth permits.
Bootstrap
Blueprint
960 Grid
Update: On related matter, I would also checkout CSS Preprocessors such as Sass and LESS that could help in writing better CSS and build up a custom library to use across projects.
Perhaps try the CSS off of Twitter Bootstrap. Provides all sorts of consistent styling that's simple but elegant, in addition to some fancier element behaviors.
Update:
Adding to Yonix's related list, the following are alternative CSS preprocessors, which makes working with CSS a little more digestible:
Compass
Stylus
There's a bit of a learning curve when teaching yourself CSS, but some basic CSS is easier than you think.
For quick prototyping/wireframing and pre-made HTML templates, I use Zurb Foundation, as compared to Twitter Bootstrap. My advice is to familiarize yourself with their online documentation and delve into the main CSS file (foundation.css). You can build on top of that CSS file with the provided app.css file.
It comes with a lot of pre-made styles (buttons, forms, etc) and everything is responsive (fits on any size screen). You can choose to include all the plugins, or just the HTML and CSS. It also has an option to download the HTML templates, which come with a variety a layouts, such as a blog or a basic structure. I absolutely love it!
I am designing my web in JSF2.0. To keep the web simple and clean, I used tag and inside I used JSF. Each tag has some style="width:--px; height=--px;" associated. Now when JSF content goes more then some extent, the JSF panel gets outside from the layout. There is some layout issue. Should I remove declaration of style attribute from each tag?
Thank you.
When you use an absolute layout (using explicit pixel sizes in every element) and you have dynamic data, you are bound to run into problems sooner or later.
You should think about reworking your layout to something more flexible. A good start might be to have a look at CSS frameworks like Blueprint or YAML to reduce the amount of work you have to put into it.