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.
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'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
This is a hypothetical question, as I haven't really written any HTML code in years. Provided you have an HTML page, and its content is semantically structured (so you have your main content in a <main> and <article> tag etc.), you would probably have your ads as one of the last elements in your source code, as they will semantically be least important. Financially, however, they would be rather crucial, so you'd like to have them displayed at the top of your page, above the "fold" (maybe in a right-hand column or "sidebar").
Is there a way to "push"/move an aside or div container (holding your ads) up in a sidebar/column, just using CSS - without having to absolutely position them?
Would you position them relative to the containing element (that forms the column), then add margin-top to the element that would be next visually (i.e. first child of the column element - say your navigation)?
Is there a way of doing this if you don't know the height of the "ad" containing element in advance (say because it's containing text, not an ad)?
Is there a way of achieving this, nowadays, with the latest HTML and CSS features? Or is visual design still dictating markup structure after all? :)
It's possible in CSS3 using display: flex-box and order: # to reorder how elements display, but CSS3 only works in modern browsers.
It doesn't make sense to do this when the ad will always be in a specific place, though. Save yourself and others the confusion, and keep HTML in charge of layout.
Is visual design still dictating markup structure after all?
This question sounds backwards. "Does markup structure still dictate visual design?"
No, that ended with the rise of CSS2 positioning.
You can use JS to create a widget and position it wherever you want in the layout, or create the ads as separate templates and use JS to retrieve and position them. This will work in almost any browser.
For the most part if your requirements are simple then it will be easier to simply place the ad element where it is required in the markup.
Visual design does not directly dictate markup, but designing markup with layout in mind makes life easier.
I haven't done any real web design in a few years, and I'm now tasked with creating a set of web pages that will need relatively complex (and exact) layouts. I've started exploring CSS, and while I'm starting to get an idea of how to use it, it doesn't really seem like the appropriate tool for the kind of layout I need.
The layout I need has a top, middle, and bottom section, and each of those sections is broken down into different areas. I need something that is kinda like:
35%, 35% (right justified), 15%, 15%
70%, 15%, 15%
70%, 15%, 15%
Percents are of browser width, and where the percentage of the column end is the same as the row above/below, the columns edges need to meet. Further, rows must be below each other, regardless of what content I put in them.
CSS seemed like it would do what I want, but then when I started trying for the complexity I needed, I couldn't get columns to match up, or rows flowed into other rows, etc.
What I really want is something like frames, where I can position elements exactly where I want them. Does that exist, or do I just fight with CSS?
Thanks,
Sean.
You need to learn CSS, not fight it. CSS has been used to create much more complex layouts than what you have described. And it is the only way you should be styling your web pages and implementing a layout design.
CSS gives you much more control over the presentation of a webpage and positioning of elements than frames can (frames only give you frames to put load multiple pages in; you still need to style those pages separately).
This is a rather broad question, so I'll just say this:
Use HTML to semantically organize/structure your content.
Use CSS for your presentation.
In other words, don't use any of the following tags or similar tags:
<b> (use <strong> instead)
<i> (use <em> instead)
<font>
<u>
Remember to use structuring tags where appropriate like:
<h1> up to <h6>
<p>
<blockquote>
<pre>
And use semantically correct tags. So if you have a definition list, use <dl>, <dt> and <dd>. If you have a form, use <label for="{input id}">, e.g.:
<label for="first-name">First Name:</label>
<input name="first_name" id="first-name" />
<!-- when the user clicks on the label, the input will receive focus -->
Don't use tables for layouts. Use them only for tabular data. And when you do, make sure you use proper semantic markup <thead>, <th>, <tbody>, etc.
Put title attributes in your links and alt attributes in your images for accessibility and usability.
And use stylesheets (preferably external ones for DRY) instead of inline styles.
Lastly, as Jan_V mentioned, w3schools.com is a great resource for CSS, JavaScript, HTML, and most web standards. There is a lot for you to learn, but luckily there's a ton of tutorials, references, and other resources on the web to help you along. Learn how to properly use CSS/HTML, and you will produce higher quality webpages as well as save time in maintenance.
If you're struggling with the layout you have in mind, start with something simpler and work your way up. E.g. try an evenly drawn 2 column, 2 row layout first. Once you get that working, start changing the proportions and adding more columns/rows.
CSS can do pretty much anything you want, it is the defacto tool for positioning and styling elements on your web pages. I think you should look into position: absolute and float capabilities based on your description. The difficulty with it lies in getting consistent behavior/interpretations across browsers. Using a css-reset like YUI's is highly recommended to help with this. YUI also has javascript utilities that help normalize some CSS behavior (e.g. float and opacity) across browsers. YUI is by no means the only way of accomplishing these goals.
You could try using tables for the layout, but I would suggest using CSS and DIV elements.
If you are going to use frames or tables you'll get in trouble later (probably). Also, CSS isn't that hard, just spend a bit time on learning it and maybe W3Schools, which have nice tutorials.
Remember using Tables as apposed to CSS will cause accessibility problems. This means that people with using accessibility to browse your site will have problems using screen readers.
I agree with some of the previous answers. Spend time getting to know CSS. When it is written correctly it means that your styles will be reuseable and easy to implement and change once you have done them. Trying to change styles that have been individualy coded on a number of pages will cause you headaches.
If your website is going to be complex then try and make sure you are making it as simple to maintain as possible and CSS will definately help you there.
I tried to do this manually, but it's prone to error. Is there an easier way to automatically convert it?
Perhaps the problem lies in the idea of "converting" tables to CSS. Rethink your HTML layout from the bottom up and code it from scratch.
Well-written (X)HTML should be semantically sound. What that means is that the tags you use should match the content that they contain.
For example, an ordered list of elements should be contained within an <ol> tag, a paragraph of text in a <p> tag, and a heading inside a <h#> tag.
The tags used for grouping and layout in semantic (X)HTML are the <span> and <div> tags.
Since the distinction of which tags to use where is a semantic distinction, there isn't an easy way to "automate" this. My recommendation is to pick up a book on semantic (X)HTML(I highly recommend Dan Cederholm's Bulletproof Web Design -- it's canonical in the field) and rewrite your code from the ground up.
It should not be difficult.
I think it would be difficult indeed to automate this. I can imagine that some tool somewhere will try to do this for you, and presumably what it would do would be to wrap each hunk of content in a div tag and then position each one absolutely so that it matches where that content was located in the original page. DO NOT DO THIS.
Start afresh. Separate your content into containers that make sense semantically. Then position them as simply as possible. A simple grid-based layout can often be achieved simply by using "float:left" to place divs next to each other and using "clear" when appropriate.
Step 1. Think hard about why (and whether) you want to do this.
Step 2. Start from scratch and rebuild what you have, or go with a design that actually lends itself to css styling.
Step 3. See Step 1 when the inevitable flow and layout problems arise across different browser definitions.