I'm intermediate in my Angular understanding and am trying to wrap my head around how to accomplish the following.
I want to create a UI component that can be used to contain heterogeneous content, likely from other components.
It displays a certain amount of the content with an overflow ellipsis affordance.
It has a full border and a header.
The issue is that due to the border and functionality, I want this component to contain the content controlled by some other component.
I've looked at inheritance, directives, and manipulating the view container. Each solution looks is intuitively displeasing as is either impossible or would seem to place a heavy load on the DOM render.
Use
Read detailed tutorial at http://toddmotto.com/transclusion-in-angular-2-with-ng-content
Related
I have started to use BEM with a site I am styling. I am trying to understand to how to far I should be breaking down components (blocks). For example, I have a header that has a navigation bar in there. The header is classed as a block but the navigation bar in there could be a new block or part of the header block. What is best advised here?
I was hoping to find some example sites that implement this sort of thing to get a good understanding of it but up until now, I have found nothing that appears to demonstrate it.
I am also working under the assumption that the component should layout its elements, so this is great, a good candidate for flexbox. The problem I face now is laying out the component in the page. Imagine having to layout 2 components side by side, another good candidate for flexbox but knowing where to place the display: flex ? also wouldn't the component then be in charge of placing itself within the page by using flex item css i.e. flex-shrink, flex-grow, basis, order etc..
This means that the parent is dictating where to place itself on the page and it isn't 100% an independent block now as it needs a display: flex on its container.
I did find some info with regards to file structure and wondered if this was something that could help? Maybe I am not fully understanding it - could the directory Layout be used for this?
This site uses the BEM methodology with Flexbox included.
http://fantube.me/
All the answers are on the https://en.bem.info.
how to far I should be breaking down components (blocks)
https://en.bem.info/methodology/quick-start/#should-i-create-a-block-or-an-element
it isn't 100% an independent block now
https://en.bem.info/methodology/css/#mixes
some info with regards to file structure
https://en.bem.info/methodology/filestructure/
I thought about building a grid with a BEM-tree like this:
grid
grid__row
grid__column-group
grid__column
There is also content like this teaser block
teaser
teaser__thumbnail
teaser__headline
teaser__body
teaser__link
If i like to display the teaser elements in different columns of the grid, it leads me to the following markup:
<div class="grid__column-group teaser">
<div class="grid__column">
<img class="teaser__thumbnail"/>
</div>
<div class="grid__column">
<h3 class="teaser__headline">...</h3>
<p class="teaser__body">..</p>
</div>
</div>
I'm just starting with BEM and this just feels flawed, because the styles of different blocks will affect each other.
Is that the correct way of handling?
Any suggestion for a better solution?
What you have done isn't incorrect, however I would separate the responsibilities of each component. In my mind a page grid's responsibility is to position the components on the page but should not be required to position elements within the component.
Isolation
The important thing is to always build a component in complete isolation. A component should not have knowledge of its container or rely on it. You should be able to put your component on any page, in any position, and it render correctly. This is one of the important points of this technique.
Single responsibility
From looking at your markup, it appears that your teaser component requires knowledge of the grid to render correctly. I would try to avoid this and include the layout needed for the component in the component itself. It actually looks like the classic media object by Nicole Sullivan, so it is worth taking a look at that. This keeps to the principle that components should have one single responsibility. The grid positions the components on the page and the component positions and styles its elements.
By doing this the teaser component can now be used anywhere, with or without the grid.
Is that the correct way of handling?
Yes. It is a mix. An official tutorial uses this technique.
In the CSS code, it is convenient to style all the "visual" blocks (like grid) first, then semantic blocks (like teaser). Because semantic blocks are more specific and can overwrite some default rules from the reusable visual patterns.
I am building this form: http://codepen.io/anon/pen/gFoIG/
and so far I am satisfied. Unfortunately I have some issue that I seem not able to fix.
First of all, I want to enforce the label positions beside their respective inputs. Now the form breaks down easily (with the opera emulator for smartphone and tablet, the privacy label goes below the check, but I want that it stays beside it)
The other issue that I have is that I want it to fall back gracefully when there are small screens, like placing the second image below the first and placing the input controls one below the other and take the full screen width to be bigger and easier to interact with, but so far I only was able to break the layout with my tests.
This issue: the the form layout breaks, the internal control (input, button, etc) go outside the container div. How do I enforce the container to keep everything inside? I've experimented with blocks, floats and whatever, but if the layout breaks, the input boxes usually go outside the gray rectangle.
Last issue: If I insert this form inside an existing website (for example, a page in wordpress) the layout get completely destroyed because influences from the theme style. How do I enforce my style on my form, keeping it isolated from the other styles? I can think of the iframe as a solution, but it is the only one? It is a good practice?
Anyone can help me with that?
You might want to take a look here. Its a site I just set up to explain an approach to responsive using a jQuery plugin to manage redoing layout. I think it could work for your example quite easily. Also because it can target a container div at any depth in a web page, it could be helpful in the scenario where the layout you want to reflow is inside a 3rd party container (as long as you can run script on the page).
I am using Flex 4.9. I thought that with the newest SDK, they finally made Flex and CSS components tags to work. But they did not.
I tried to set horisontalAlign and verticalAlign of spark HGroup vie CSS style, so I could manage it smoothly and save some code typing. HGroups didnt respond to CSS style I applied, ok, I thought that at least I will set their width. It also did not work! Nor pixel width or percent value.
Does Flex CSS styling is really so limited or am I missing something?
horizontalAlign, verticalAlign, width and height are all properties of the HGroup class, not styles. Hence you cannot set these properties through stylesheets.
What you seem to be missing is that Flex is not HTML and that the same semantics do not apply. In Flex 4 we separate the content from the way it is presented mainly through a process called skinning: we declare components and their logic in one class (usually in ActionScript) and we define its visual representation in another (usually written in MXML).
With this separation already in place there is hardly any need for stylesheets. In fact, if you would put a CSS on top of that, you would kind of artificially try to separate the layout into two separate entities which doesn't make much sense. Not to mention it would make the code much harder to read.
There is a case where CSS comes in handy though, that is when you want to apply a certain visual style throughout your application. A Button could have five different skins, but through CSS you could set the font color of all five to a specific color without repeating that in each skin.
I am a hobbyist webdesigner, use html and CSS for testing various website designs. However one particular thing that always confuse me is the decision to make use of image as tag or to use it as background via css or html.
Is their any rule of thumb for this ?
As one of the answers pointed out, you need to make the difference between content and actual page style.
Let me elaborate on that. The purpose of the background-image property is used to define the look of a certain block of your page, be it a div or a p, the key point to take home is that you're defining the page's look. And images in the context of defining the page's design (be that patterns, logos, gradients etc.) should almost never take the explicit form of an img tag. That tag is used to define content images, something linked to the news at hand - something that is unique to a story you're trying to portray.
It's very crucial to differentiate these two concepts because it'll allow you to contemplate a good design independent of the underlying content - as it should be. Uniformal, elegant and precise.
So, in review. Use background-image to define the look of the various blocks that comprise your website and use the classic img tag when you want to add visual content that is context-specific.
The question is it Content or Styling is a good place to draw the line on images.
Will this image be reused? etc.
Do you want the image be part of the document flow, give descriptions to the search engines (alt-text)? Use the img tag.
If you want to place other elements over the image (like text, copyright info), use a background image. You can even combine it by placing an image with transparency over the background image to get some effect.
Furthermore a lot of examples exist where the positioning of background images is used to get performance benefits ("sprites").