Technologies Used

Print this Recipe

Search Results


  1. Follow initialization docs to create the jekyll site.
  2. Install Sass by running gem install sass, then compile Sass to CSS by running sass in.scss out.css. All valid CSS is also valid Sass, so if you’re still learning it, you can just write CSS and then incrementally Sass-ify it. Learn more about what Sass can do here, or check out their awesome documentation.
  3. MaterializeCSS gives you several nice features in line with Google Material design. They have a color palette, font, buttons, and other features that make designing your website that much easier. I’d recommend reading their documentation to see what you’d find most useful. Using Materialize is as simple as downloading their files, and including them in your assets directory. I copied the parts I needed – materialize.scss, components/, and fonts into their respective directories in assets/, then deleted the rest of the Materialize package, but it’s up to you what you want to include!
  4. Simple Jekyll Search gives you a way to index your site, then search it all clientside and send that data to a specific <ul> element. I ran into a few problems when I tried to add full text search, so would recommend not doing that! I also add some javascript below to toggle having a Search Results header when the results list is displayed.
        if($("#search-input").val() != ""){
            $("#results").css("display", "block"); 
        } else {
            $("#results").css("display", "none"); 

#search-inputis the id of the search bar in my site, while #results is the id of the results header that I want to either display or not display. The items in the results list will automatically display as the user starts typing into the search bar and the results list, living in <ul id="results-container"> is populated.

  1. Slicknav is what I use for the mobile menu. I’m not really sure what else to say, besides that I highly recommend it as it’s very simple to use and highly configurable.