I am trying to create a grid like a view like this using polymer
how should i approach this,there are lot of things I am getting confused, which would be the best way to approach this type of design whether bootstrap with polymer or any web components, so that it can be customized and how should I use it, any link or reference would be of great help, Thanks in advance.
You can use the iron-flex-layout component that provide simple ways to use CSS flexible box layout or flexbox. Check out the guides from here. This component also provides two different ways to use flexbox:
Layout classes. The layout class stylesheet provides a simple set of class-based flexbox rules. Layout classes let you specify layout properties directly in markup.
Custom CSS mixins. The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the #apply function.
Check the demo here.
Why don't you use css grid layout. A good summary is at https://css-tricks.com/snippets/css/complete-guide-grid/
A search fro grid in the components catalog will give a list of grid elements you can use
Polymer Catalog (grid)
or you can use the iron-flex element
iron-flex
App-grid could also help you:
https://www.webcomponents.org/element/PolymerElements/app-layout/elements/app-grid
Related
what is the difference between tailwind and normal css? Can anyone explain I am new to Tailwind css.
Tailwind is some CSS that someone else has written for you. You use it by writing presentational markup (in the form of class names like bg-red-100) instead of writing semantic markup and CSS to apply to it.
CSS (Cascading Style Sheets) is a language used to write rules regarding the style/color/positioning/etc. of elements in an HTML page.
TailwindCSS is a collection of CSS rules, utility classes
Hi I'm experimenting with Polymer and trying to style some polymer paper modules... In Polymer 1.0 they added this new properties in the CSS internal to shadow DOM's module... I am trying to change a color that is dependent on one of this properties --paper-input-container-focus-color for the paper-input-container module but I could not find any clear documentation or guide on how to actually access that property from...
I can style it overriding the CSS property via /deep/ or ::shadow but from my understanding this new method is supposed to avoid using those 2...
Can anyone point me in the right direction???
CLARIFICATION:
I am interested in the mixins Google introduced in polymer... that make use of #apply(--foo-bar)
As usual I answer my own question... But I really hope it can help others not wasting days like I do..
to take advantage of this new mixins to customize your shadow-element externally you need to add a style tag with the attribute is="custom-style" in your page before placing the custom-tag.
<style is="custom-style">
my-custom-module{
--my-custom-property-color: yellow;
}
</style>
<my-custom-module></my-custom-module>
What are the advantages of using custom attributes over use of classes. I see that custom attributes are used at more places. New frameworks such as Polymer also makes use of attributes more heavily. I am aware of custom data attributes, but attributes are also used at other places than data attributes. Polymer has attributes such as layout, horizontal, inline etc.
I am looking for advantages/disadvantages in following areas-
use in defining css styles
Query Selectors
Semantics
Thanks in advance.
Attributes have a couple of advantages over classes. Firstly, being able to simply put down an attribute is more readable:
<nav center fullbleed>
vs.
<nav class="fullbleed center">
Attributes are also easier to avoid conflicts when it comes to css selectors: It's easier to make a mistake when using css selectors such as nav .center > #fullbleed . Classes do offer more options, allowing a eprson to swap ids and classes, but this can often become a mess as they have to figure out whether you need to use .strong vs. #strong.
I am working on a project using twitter bootstrap.
I wanted to know if it is a bad practice to use our custom class names along with bootstrap classes in the same div or container.
For Eg :-
<div class="container user-profile"> // is this bad practice?
</div>
Should we create another div for class user-profile :-
<div class="container">
<div class="user-profile">
</div>
</div>
Thanks
No, what you are referring to bad practice is not bad practice, especially in light of cluttering the DOM with additional elements.
It is better to add additional classes to an element than to add additional DOM elements each with a new class
There is nothing wrong with adding additional classes to elements, this is how CSS has been created to work. However, you need to be aware that frameworks like Bootstrap rely on their classes for the functionality they offer, so by adding your own you do risk style collision (e.g overwriting a style Bootstrap otherwise was relying on).
With that in mind, Bootstrap uses fairly effective selectors making it unlikely you can so readily override its functionality, but keep it in mind if you're experiencing unexpected side-effects.
DOM elements are there for creating purpose (holding content), CSS is there for creating style, as such, if you are looking to simply add style, dont also add purpose!
I am using Prime Faces tool tip. I want to know can i change the look and feel of the prime Faces tooltip by applying css or skinning. Like make bigger box and change the color and font of the Tooltip etc.
I am using Prime Faces 2.2
Thanks
You can change the style by adding CSS to style or styleClass attributes.
Also, I strongly recommend to upgrade to 3.0.M4 or 3.0.RC1-Snapshot!
EDIT:
I've found this piece, regarding tooltips styling: http://code.google.com/p/primefaces/source/browse/examples/trunk/prime-showcase/src/main/webapp/ui/tooltipStyling.xhtml?r=1434
As you can see there, you can apply some styling by using some css classes.
Also this is the migration guide for 3.0.M4(RC1): http://wiki.primefaces.org/display/General/Migration+Guide+to+3.0
I know this is old, but you can also go the way of overriding certain CSS properties by using style definitions with higher precedence in your general CSS file. I described this in more detail here. Colors, borders and paddings are no problem, however, the position is rather tricky as PrimeFaces places the tooltips as divs outside the normal structure and the apparently uses some computed absolute positioning to place them.