0
\$\begingroup\$

I am implementing a search bar here. I have finished basic UI. I have been recently developed a taste for scalable and robust HTML/CSS. Therefore I am closely following things like BEM and OOCSS

Am I on the right path? Also, how can I make the UI responsive?

index.html

<div id="container">
  <form class="search-box">
    <span class="search-box-icons">
      <i class="fa fa-search icon-search"></i>
    </span>
    <input class="search-box-input" type="text" placeholder="Search"/>
    <div class="search-box-autocomplete" style="display: none;">
      Foo Bar
    </div>
  </form>  
</div>

app.css

* {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

body {
  background: #343d46;
}

#container {
  width: 500px;
  margin: auto;
  margin-top: 30px;
  background: gray;
  color: black;
}

.search-box {
  width: 100%;
  position: relative;
  background: inherit;
  color: inherit;
  height: auto;
}

.search-box:hover .icon-search {
  opacity: 1;
}

.search-box-input {
  background: inherit;
  color: inherit;
  height: 50px;
  font-size: 18px;
  width: 100%;
  padding: 10px;
  padding-left: 40px;
  display: inline-block;
  border: none;
}

.search-box-input:focus {
  outline: none;
}

.search-box-icons {
  position: absolute;
  display: inline-block;
  margin: auto;
  top: 16px;
  left: 10px;
  width: auto;
}

.icon-search {
  color: inherit;
  font-size: 16px;
  display: inline;
  cursor: pointer;
  opacity: 0.4;
}

.search-box-autocomplete {
  position: absolute;
  background: #fff;
  width: 100%;
  margin: 0;
  border-top: 1px solid gray;
}
\$\endgroup\$
2
  • \$\begingroup\$ Welcome to Code Review! At Code Review, we review working code that is posting within the question. We allow links to off-site material only for support material, not for the review-requested code. \$\endgroup\$ – user34073 Feb 2 '15 at 18:34
  • 1
    \$\begingroup\$ Keep in mind that we can only review working code here, we cannot help you with code that hasn't been written ("how do I make it responsive"). \$\endgroup\$ – cimmanon Feb 3 '15 at 17:57
3
\$\begingroup\$

Markup

You're using way more than you need. You have an unnecessary container element, and 2 empty elements for displaying a purely decorative icon. This should be all the markup you need to get the same effect:

<form class="search-box">
    <input class="search-box-input" type="search" placeholder="Search"/>
    <div class="search-box-autocomplete" style="display: none;">
        Foo Bar
    </div>
</form>

Placeholder text is not a replacement for label text. It's supposed to be for providing an example of the type of content you're looking for.

Strange that you're using the html5 placeholder property, but you're not using the html5 input type of search.

CSS

I do not subscribe to the BEM methodology, so I cannot comment as to how well you've followed it; it always looks overly verbose to me.

As I've already stated, your icon is purely decorative. It has no place in the markup. The most appropriate location for it is as a pseudo element on the label for the search field (which doesn't exist here) or the form element.

The following CSS:

#container {
  width: 500px;
  margin: auto;
  margin-top: 30px;
  background: gray;
  color: black;
}

.search-box {
  width: 100%;
  position: relative;
  background: inherit;
  color: inherit;
  height: auto;
}

Can be reduced to this:

.search-box {
  width: 500px;
  margin: 30px auto 0 auto;
  background: gray;
  color: black;
  position: relative;
}

Usability

The entire color scheme has extremely low contrast.

The styling that browsers give when the input element has focus is considered a usability feature. If it doesn't fit into your design, you're supposed to adjust it to fit, not remove it.

There's no submit button. There are users who don't understand that they can just hit enter to submit a form.

\$\endgroup\$
3
  • \$\begingroup\$ This isn't really responsive though right? It won't work on displays smaller than 500px? \$\endgroup\$ – icco Jun 6 '15 at 15:59
  • \$\begingroup\$ @icco I don't understand the question. This is CodeReview: we only suggest improvements to code that works as intended. The OP did not write any code to handle responsiveness (probably because they do not know now) and I will not write the code for him to do so. \$\endgroup\$ – cimmanon Jun 6 '15 at 16:05
  • \$\begingroup\$ I am not using html5 input type search to disable browsers' search suggestion. \$\endgroup\$ – CodeYogi Nov 5 '15 at 5:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.