Skip to content

Instantly share code, notes, and snippets.

View stalinsky's full-sized avatar
🏠
IoT Laboratory, Tbilisi, Georgia

Konstantin Stalinsky stalinsky

🏠
IoT Laboratory, Tbilisi, Georgia
  • iTechnologies
  • Georgia
View GitHub Profile
@stalinsky
stalinsky / Self-Adjusting-Search-Bar.markdown
Created October 9, 2014 11:27
A Pen by Grant Zabriskie.

Self-Adjusting Search Bar

Search bar + dropdown. The goal was to create a search bar that could adjust in size by changing as little CSS as possible for each size. In this case, changing the font-size on the text input will cause the rest of the search box (button, dropdown, etc... to resize with it). It also helps to adjust the width of search bar itself as you increase the font-size of the input to get a balanced look.

I designed this for the old Harold B. Lee Library website (see http://old.lib.byu.edu/). We had a lot of search bars across the site and we wanted a way to add them and change their size without having to much extra CSS to any given instance.

Please note: This affect could be accomplished with much less Javascript if I were to use flex-box (which is what we do on the new Harold B. Lee Library website, http://lib.byu.edu/). However, flex-box was not supported at the time I created this. It also represents a great alternative if your site cannot use flex-box yet for

@stalinsky
stalinsky / Responsive-search-bar.markdown
Created October 9, 2014 11:25
A Pen by Konstantin Stalinsky.

Expandable Search Form with CSS3

This is a Expandable Search Form built with CSS3

A Pen by Adrian on CodePen.

License.

@stalinsky
stalinsky / Google-Calculator.markdown
Created October 9, 2014 10:56
A Pen by Dennis J S.
@stalinsky
stalinsky / Responsive-pagination.markdown
Created October 9, 2014 10:37
A Pen by Ricardo Soto.