I always wondering how can i take css seriously. I'm a very clean developer but my css seems to smell.
Just want to create the layout the extending thing will be made with javascript. Can somebody show me a solution in css how this can be accomplished. Forget the gradients and text color etc. Maybe need somebody in the future that will take this work for some credits.
<div class="FAQ">
<div class="FAQ-Header">
<div class="Help-Title-Label">Questions and Answers</div>
</div>
<div class="FAQ-Entry">
<div class="FAQ-Question">
<div class="FAQ-Question-Left">
<div class="FAQ-Question-State">+</div>
</div>
<div class="FAQ-Question-Right">
<div class="FAQ-Question-Txt">My Question Text</div>
</div>
</div>
<div class="FAQ-Answer">
<div class="FAQ-Answer-Left">
<div class="FAQ-Answer-Title">A:</div>
</div>
<div class="FAQ-Answer-Right">
<div class="FAQ-Answer-Txt">My Question Answer.</div>
</div>
</div>
</div>
<div class="FAQ-Footer"></div>
</div>
I wouldn't recreate the wheel just use the JqueryUI accordion. http://jqueryui.com/accordion/ takes the css out of the picture and adds the implementation in one step.
In general I agree with vikingben. Try to avoid reinventing the wheel.
If you do need to make your own accordion I recommend using a table for your HTML:
<table class="faq">
<thead>
<tr><th colspan="2">Questions and Answers</th></tr>
</thead>
<tbody>
<tr><th>-</th><td>My Question Text</td></tr>
<tr class="selected"><th>A:</th><td>My Question Answer.</td></tr>
<tr><th>+</th><td>My Question Text</td></tr>
</tbody>
</table>
You are modeling tabular data here and a table is a fine construct for modeling tabular data. If you use a table the CSS will be trivially easy. Example.
If you are concerned that you'll need to change the format later, restructure at that point. You shouldn't fret over a future HTML tag refactor unless you think it's likely to happen and the effort spent upfront to avoid it is worth it.
Related
If I want to store HTML code to a database, is better to add one row with big HTML code or more rows with smaller HTML code?
In my app, I can edit the code in both ways, so don't really need more rows, but maybe is faster or more effective having more rows and smaller HTMl code.
What is your opinion? Thanks you.
HTML Code Example:
<div class="row">
<div class="col-sm-12">
<section data-type="component-text">
content
</section>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<section data-type="component-photo">
content
</section>
</div>
<div class="col-sm-6">
<section data-type="component-video">
content
</section>
</div>
</div>
The code is generated by a plugin. This is only an example created by me.
Answer: It depends on your querying needs.
Efficient querying is an extensive topic focused on design and algorithms.
It depends on the size, type and structure of the data you have.
If you just need to store all the HTML and get it back, you could simply store as much per block.
If you need specific lines of HTML per query then each block with the necessary content is a good idea!
I hope this helps.
I have a doubts about this HTML structure. Is it correct according to BEM approach?
<div class="boxWithBorder">
<div class="header">
<h2 class="boxWithBorder__element"></h2>
</div>
</div>
To my mind it should look like that
<div class="boxWithBorder">
<div class="header">
<h2 class="header__element"></h2>
</div>
</div>
What keeps elements encapsulated.
Generally we do components and structures, that means structures are compositions of components. It will require nesting so that part is ok. As far as your first approach that is not ok by our standards and not used. block1 should not live inside block2 but block2 has to live inside block1 as it's a nested component. Makes sense? BTW BEM is perfectly fine to use and a lot of frontend devs do it, heavyweights as well, check out csswizardry.com for instance, he got some great articles about BEM
Also I would suggest the following using BEM (or any html/css for that matter) is that skip the camleCase and use "-" instead
<div class="box-with-border">
<div class="header">
<h2 class="header__element"></h2>
</div>
</div>
<div class="hero hero--red-with-border">
<h1 class="hero__title>Title...</h1>
<p class="hero__body-text">Text...</p>
</div>
How do I fill the first 11 columns with a table, but then have the last 1 column be empty?
Right now my HTML is throwing my <h4> after my <div class='col-md-11' to the right of it just squishing it into the page
my HTML:
<nav class='page_element'>
<div class="table-responsive col-md-11">
<table>
</table>
</div>
<br>
<div class="table-responsive col-md-11">
<table>
</table>
</div>
<hr>
</nav>
<nav class='page_element'>
<div class="table-responsive col-md-11">
</div>
<h4><strong>Question 3</strong></h4>
....
This all got worked out in comments, but here's an answer for good measure.
The Bootstrap classes for col-x-n really aren't meant to be used as standalone classes. They work, sometimes, but, in part because they depend on a styling of float: left, they can have some funky behavior when paired with non-col-x-n classes. It's best, whenever possible, to wrap them in rows.
In that ideal situation, it would look something like this:
<nav class='page_element'>
<div class="row">
<div class="table-responsive col-md-11">
...
</div>
</div>
<h4><strong>Question 3</strong></h4>
</nav>
If that isn't, for one reason or another, a good option, I would suggest against using those classes at all. Particularly in a situation like this, they give you a lot of functionality that you don't need, or even want, like the ability to have two columns sit next to each other.
In that case, I would suggest (and I was about to, but then my computer battery died and you beat me to it) using a good-ol'-fashioned width: x%. It's always nice to bring that kind of design implementation out from your HTML and into a CSS file, but for the sake of simplicity, a style attribute does the same thing.
<nav class='page_element'>
<div class="table-responsive" style="width: 92%">
...
</div>
<h4><strong>Question 3</strong></h4>
</nav>
I picked 92% because that's approximately 11/12, which is what col-md-11 aims for.
HTML often has repeating and independent structures that are modular on a theoretical level, such as multiple portfolio-items:
<div class="protfolio-item">
<div class="image">
<a ...><img /></a>
...
</div>
<div class="portfolio-content">
<h2>...</h2>
<p>...</p>
</div>
</div>
Even writing them out feels stupid. Now I want to make a change, like having an icon superposed on every picture. What ways are there to achieve more modular code that's easier to change? Are there any non-PHP "native" ways to do so?
Non-PHP, native? The first thing I can think of is Server Side Includes - not very powerful but you can divide your document into pieces making it modular. The main disadvantage is lack of loops.
I've seen lately a lot of discussions about this new concept called oocss and I was wondering if it is a bad practice to wrap your main tags in divs only for styling/page layout purposes.
I'm asking this because I see some frameworks like Twitter Bootstrap use such a method.
What are the implications of such a markup from a semantic and accessibility point of view?
For example:
<div class="container">
<div class="row">
<div class="span4">
<nav class="nav">...</nav>
</div>
<div class="span8">
...
</div>
</div>
</div>
instead of
<div class="menu">
<nav class="nav">...</nav>
...
</div>
No, it's fine. HTML is a "mark-up language", and mark-up involves styling. Besides, everyone does it. Many of the fluid multi-column layouts rest precisely on this approach.
Using unnecessary divs is not a good idea... if the HTML codes in the second box is enough to do everything that you want or need to do then don't use extra divs... secondly, HTML codes in the second box is much clear and shorter then the codes in the first box... if you keep your codes clean, short and formatted, it will help you a lot when you want or need to update your code in future...