How do you handle BEM grandchild? - css

What is better way to write this type of code in BEM convention?
<div class="advantages">
<div class="advantages__container">
<div class="advantages__title">Title</div>
<div class="advantages__reviews">
<div class="advantages__reviews-block">
<div class="advantages__reviews-title">Reviews block title</div>
<div class="advantages-reviews-progress">
<div class="advantages-reviews-progress__title">Progress title</div>
</div>
</div>
</div>
</div>
</div>


<div class="advantages">
<section class="advantages__container">
<h2 class="advantages__title">Title</h2>
<div class="advantages-reviews">
<article class="advantages-reviews__block">
<h3 class="advantage-reviews__title">Reviews block title</h3>
<div class="advantages-reviewsProgress">
<h4 class="advantages-reviewsProgress__title">Progress title</h4>
</div>
</article>
</div>
</section>
</div>


In my opinion the best BEM is really extensive, because it's how you make it descriptive. I've would probably just change some minor things:
<div class="advantages">
<div class="advantages__container">
<div class="advantages__title">Title</div>
<div class="advantages__reviews">
<div class="advantages__reviews-block">
<div class="advantages__reviews-block__title">Reviews block title</div>
<div class="advantages__reviews-progress">
<div class="advantages__reviews-progress__title">Progress title</div>
</div>
</div>
</div>
</div>
</div>

Related

Bootstrap 4 grid not aligning

Bootstrap has its own grid system and I want to utilize it as much as I can so that I can minimize any custom CSS.
I have the code below wherein I have a couple of row classes here, you can see here that the first row is not aligning with the rest of the row. Is there any way that I can make this aligned?
You can also view it here on codepen https://codepen.io/aceraven777/pen/zYZMpEd
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-8">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="row">
<div class="col-8 row">
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
<div class="col-6">
<div class="bg-red">
This is a content
</div>
</div>
</div>
<div class="col-4">
<div class="bg-red">
This is a content
This is a content
This is a content
This is a content
This is a content
This is a content
</div>
</div>
</div>
</div>

The issue is that you are combining rows and columns together in one div. With bootstrap you cant combine rows and columns as there are some conflicting css. Just split this div <div class="col-8 row"> into two seperate divs.
<div>
<div class="row">
<div class="col-4">
<div class="bg-red">This is a content</div>
</div>
<div class="col-8">
<div class="bg-red">This is a content</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red">This is a content</div>
</div>
<div class="col-6">
<div class="bg-red"></div>
</div>
</div>
</div>
</div>
</div>

How can block overflow with high:auto in CSS?

I made my site layout by using layzilla like this.
<div class="content">
<div class="top_block header">
<div class="content">
</div>
</div>
<div class="background right-sidebar">
</div>
<div class="right_block right-sidebar">
<div class="content">
</div>
</div>
<div class="background middle-sidebar">
</div>
<div class="right_block middle-sidebar">
<div class="content">
<div class="top_block middle-sidebar-up">
<div class="content">
</div>
</div>
</div>
</div>
<div class="background left-sidebar">
</div>
<div class="right_block left-sidebar">
<div class="content">
<div class="bottom_block left-sidebar-down">
<div class="content">
</div>
</div>
</div>
</div>
<div class="background container">
</div>
<div class="center_block container">
<div class="content">
</div>
</div>
</div>
It works well except sidebar is too long.
And I use this with AngularJS and uiRouter like this.
It doesn't work when sidebar is too long, the layout is broken.

How about using the css max-height:100vh;
This sets the maximum height to 100% of the viewport heigth.
Like this:
<div class="background left-sidebar" style="max-height:100vh">
If that would be too much, you could use 99vh instead.
Also, have you thought about using Bootstrap to lay out your page?

Twitter Bootstrap very basic layout

I'm stack with a pretty simple question, and I was wondering maybe you can help, cause you always do..
So what I have is a very basic bootstrap layout.. say:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">looong-long-text</div>
<div class="col-md-6">long-text</div>
<div class="col-md-6">another long text</div>
<div class="col-md-6">and another long text</div>
</div>
</div>
Please check the image link to see what i need
Is there any simple way to achieve such results with bootstrap? Tnx.

I have two solutions for you:
First (better in my opinion, less code):
<div class="container">
<div class="row">
<div class="col-md-6">
<div>First</div>
<div>Third</div>
</div>
<div class="col-md-6">
<div>Second</div>
<div>Fourth</div>
</div>
</div>
</div>
Second:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div>First</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>Third</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div>First</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>Third</div>
</div>
</div>
</div>
</div>
</div>
CODEPEN

You could try out the new Bootstrap version 4 card column feature.

You can't do this with bootstrap out of the box, but there are other tools to help you do this. Here is one of them:
http://masonry.desandro.com/

Border layout with bootstrap

Is it possible to build a border layout with bootstrap, that centers the labels of the right and left borders, keeps the bottom at the bottom of the page and fills the content with all space left over in the center?
New to bootstrap, but even with the help of google I just came up with this:
div class="container">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
<div class="col-xs-12">
<div class="bottom-box">bottom</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
https://jsfiddle.net/fbtw6/352
The result is not very convincing - what am I doing wrong?

See it this works for you.
<div class="container">
<div class="page-header">
<div class="row">
<div class="col-xs-1">
<div class="left-box">
<div class="turn-left">left</div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">
<div class="top-box">top</div>
</div>
<div class="col-xs-12">
<div class="content-box">content</div>
</div>
</div>
</div>
<div class="col-xs-1">
<div class="right-box">
<div class="turn-right">right</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>sticky footer</p>
</div>
</footer>
I used this example to assemble.
Like this any better?

Bootstrap span4 dynamic content

I'm having trouble working with dynamic content which need to get span4 classes. Because a row can be max 12 columns so next 'article' need to jump to the next row.
Please check out this preview what I mean: http://www.dreamix-studio.com/bootstrap/bootstrap_q_2.jpg
<div class="row-fluid">
<div class="span12">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
</div>
</div>
<div class="row-fluid">
<!-- what should be dynamic -->
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<!-- END dynamic -->
</div>
Does anyone know how I can solve this problem?

try This
<div class="row-fluid">
<div class="span12">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
</div>
</div>
<div class="row">
<!-- what should be dynamic -->
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<div class="span4">
<h2>TITLE</h2>
<p>DESCRIPTION</p>
<p>BUTTON</p>
</div>
<!-- END dynamic -->
</div>

Resources