πŸŒ„ A free Jekyll Theme developed by the DevTips Community

  • By null
  • Last update: Oct 25, 2022
  • Comments: 17

Artists Theme

This site is being built on YouTube, one week at a time. See all the videos up to date here: How to build a professional website from start to finish

Subscribe to the channel to follow along as we develop this project step by step from the beginning.

How to install/use

In order to get this super fantastic Jekyll powered template for Artists follow this simple step:

  • If you haven't got ruby installed on your computer, install it.
  • Then run in your terminal $ gem install jekyll
  • Move/cd to a folder, always in your terminal, in which you want to insert the Artists-Theme
  • Run git clone https://github.com/DevTips/Artists-Theme.git
  • Then cd Artists-Theme
  • jekyll serve --watch
  • DONE

Isn't it fantastic?

Learn how to use Jekyll on windows (if that's your thing :)

Credits

Code contributions via pull request:

A big thank you to these creators for contributing sample projects for the "work" section:

The Design

Artist Themes in the wild:


This is a free Jekyll Theme that is currently being developed in weekly episodes on the DevTips YouTube channel.

Github

https://github.com/DevTips/Artists-Theme

Comments(17)

  • 1

    Help needed: site layout messed up

    hi there, I just downloaded the Artists theme and started playing with it. I am new to Jekyll. So I tried to follow simple steps: jekyll build, jekyll serve. No errors are reported, but the site layout is totally messed up.

    The versions I installed are as below: jekyll 2.1.1 Sass 3.3.10 (Maptastic Maple)

    Maybe someone can give me some tips what is wrong? Thanks a lot.

    screenshot_artist_issue

  • 2

    Clean up "Hacked" CSS

    There was no need to over complicate the 'hacked' CSS to use the bounce.js library.

    By simply hiding the div to begin, then showing it on mouse over you will get the desired effect without the "jitter" that is a pain in the video!

    Timing, etc. can be adjusted as needed to get the desired effect, but this leaves the CSS far cleaner which is a definite plus!

  • 3

    @import '3-sections/-sections-dir' (Not working)

    Hello all,

    I'm french so I'm sorry for my english :smile:

    I started the last 3 days the DevTips Artitsit template tutorial. After several hours to install all the programs I'm now in the coding phase (part 4).

    I created the same structure and my {% include header.html %} is working but for the CSS part I've some challenge.

    If I add this code in my all.sass the css works

    all.sass

    ---
    ---
    body
        background-color: red
    

    but if I add these the CSS NOT working, in the _site the file 'all' in not converting to .css but stay as a .sass

    all.sass

    @import '3-sections/-sections-dir'
    

    _-sections-dir.sass

    @import 'header'
    

    header.sass

    body 
        background-color: pink
    

    Here is my configuration file so far:

    _config.yml

    # Build settings
    port: 8000
    sass:
        sass_dir: _sass
    

    Thanks for your help, Damien

  • 4

    Better path management - Changes in work section - Grunt workflow

    • Changes made
      • Exclude from the _config.yml files that wouldn't be compiled and added to the _site folder.
      • Added absolute_url variable to portfolio.yml to better manage url through the entire template.
      • Images path changed, now the entire path is only inside portfolio.yml, this gives us more flexibility on the configurations.
      • Minor changes to the nested variables inside .sass files.
      • Big changes to the url building into index.htmland all.sass. I've used the prepend function

    Hope everybody will enjoy.

  • 5

    Refactor JavaScript for Clients section.

    It was a bit hard to follow you because of all the branching going on in the previous client/next client handler. Hopefully, this code is a bit easier to read.

    I also included a cleanup commit, I'm not sure it's necessary and can remove it for a cleaner diff.

  • 6

    Adding a lot of stuff for optimizing portfolio data management and more.

    I've made some changes. First of all I've transfer the site data into a dedicated document where you can manage all the contents into the page (based on jekyll data files ). Then I've removed inline style, for background-image, adding variables that can be parsed by jekyll in the main.scss file which is the only one where you can add liquid syntax. Then into portfolio.yml data file, now you can create your custom menu list and url link associated to the item plus a list for the skills where a user can add or remove data without editing code, well at least not HTML.

    Hope you enjoy!

  • 7

    Layout changes on live site as compared to the local version

    Hey all,

    I have no idea why this is happening, but it is :( . I am able to render the "work" section on the website perfectly while I am testing locally: screen shot 2016-12-12 at 12 32 54 am screen shot 2016-12-12 at 12 33 07 am

    However, after I publish the site, the layout gets completely messed up screen shot 2016-12-12 at 12 33 26 am screen shot 2016-12-12 at 12 33 34 am


    Has anyone experienced this? If so, any solutions?

    Thanks alot for reading and for the help in advance!

    P.S The code resides here : https://github.com/crikeli/crikeli.github.io

  • 8

    nav bar fixed to top.

    I'm trying to keep the nav bar fixed to the top of the web page.

    Try this option in header.html but nothing happens, any idea?

    <header id="header">
    <nav class="navbar navbar-fixed-top">
    <div class="container">
    {% for item in site.data.settings.menu %}
    <a href="{{ item.url }}">{{ item.name }}</a>
    {% endfor %}
    </div>
    </nav>
    <h1><span>{{ site.data.settings.title }}</span></h1>
    <p class="kicker">{{ site.data.settings.description }}</p>
    </header>
    

    Thank's for this great theme!

  • 9

    Update to work section

    Update to use images in the dom instead of background-images.

    This helps for accessibility and SEO.

    Also helps remove some styles(padding on the .theme-unit). The image gives its parents weight on the page. Give it max-width: 100% and it will scale to the fit its wrapper.

    Update js to so that it works with new mark-up

  • 10

    Adds meta tags that make the page more search engine optimizable.

    Hello Travis! I understand that you want this Jekyll theme to have little to no set up on the client side, so I added meta tags to make the clients website more visible on Google.

  • 11

    New compile process through GRUNT

    This is a possible great solution to improve our workflow. Basically we are adding something that jekyll don't give to us simply.

    The main thought: compile the sass with the liquid layout nested inside that gives a .css file and then prepend to that compiled file the front matter, running jekyll build this main css file will be parsed and the liquid variables will be converted.

    We gain the possibility to add liquid tags everywhere in our sass files.

    Yeah it requires Grunt, but now if we run grunt we compile everything with a super flexibility.

  • 12

    NEED HELP! Webpage is distorted without reason

    Unsure why our page template design using Elvantly has broken - desperately need help fidning what happened and how to fix it!

    https://vitaliset.com/learn/vitalis-voices/podcast-extracted-bitters:-trial-and-error-with-everything/

    image Distorted Page

  • 13

    Adding webrick dependency and fixed syntax error in assets/css/all.sass

    This fixes the bugs reported by:

    • https://github.com/DevTips/Artists-Theme/issues/105
    • https://github.com/DevTips/Artists-Theme/issues/106

    I'm using jekyll-4.2.0 and webrick-1.7.0 on ruby 3.0.0p0 (2020-12-25 revision 95aff21468).

  • 14

    Sass Converter Error

    I followed instructions

    allan@allan-pc:~/test/Artists-Theme$ jekyll serve --watch --trace Configuration file: /home/allan/test/Artists-Theme/_config.yml Source: /home/allan/test/Artists-Theme Destination: /home/allan/test/Artists-Theme/_site Incremental build: disabled. Enable with --incremental Generating... Conversion error: Jekyll::Converters::Sass encountered an error while converting 'assets/css/all.sass': Error: Invalid CSS after "$accent": expected 1 selector or at-rule, was ": #c99065;" on line 15:1 of all.sass >> $accent: #c99065; ^ Traceback (most recent call last): 28: from /home/allan/gems/bin/jekyll:23:in <main>' 27: from /home/allan/gems/bin/jekyll:23:inload' 26: from /home/allan/gems/gems/jekyll-4.0.0/exe/jekyll:15:in <top (required)>' 25: from /home/allan/gems/gems/mercenary-0.3.6/lib/mercenary.rb:19:inprogram' 24: from /home/allan/gems/gems/mercenary-0.3.6/lib/mercenary/program.rb:42:in go' 23: from /home/allan/gems/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:inexecute' 22: from /home/allan/gems/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in each' 21: from /home/allan/gems/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:inblock in execute' 20: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/commands/serve.rb:86:in block (2 levels) in init_with_program' 19: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/command.rb:89:inprocess_with_graceful_fail' 18: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/command.rb:89:in each' 17: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/command.rb:89:inblock in process_with_graceful_fail' 16: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/commands/build.rb:36:in process' 15: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/commands/build.rb:65:inbuild' 14: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/command.rb:28:in process_site' 13: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:76:inprocess' 12: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:202:in render' 11: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:515:inrender_pages' 10: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:515:in each' 9: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:516:inblock in render_pages' 8: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:523:in render_regenerated' 7: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:63:inrun' 6: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:84:in render_document' 5: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:100:inconvert' 4: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:100:in reduce' 3: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:100:ineach' 2: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:102:in block in convert' 1: from /home/allan/gems/gems/jekyll-sass-converter-2.0.1/lib/jekyll/converters/scss.rb:179:inconvert' /home/allan/gems/gems/jekyll-sass-converter-2.0.1/lib/jekyll/converters/scss.rb:187:in `rescue in convert': Error: Invalid CSS after "$accent": expected 1 selector or at-rule, was ": #c99065;" (Jekyll::Converters::Scss::SyntaxError) on line 15:1 of all.sass

    $accent: #c99065;

    I am completely new to SCSS

    Can you offer any advice Regards Allan

  • 15

    Sass error

    c:\WEB\Art>jekyll serve --watch Configuration file: c:/WEB/Art/_config.yml Source: c:/WEB/Art Destination: c:/WEB/Art/_site Incremental build: disabled. Enable with --incremental Generating... Conversion error: Jekyll::Converters::Sass encountered an error while converting 'assets/css/all.sass': Error: Invalid CSS after "$accent": expected 1 selector or at-rule, was ": #c99065;" on line 15:1 of all.sass >> $accent: #c99065; ^ ------------------------------------------------ Jekyll 4.0.0 Please append --trace to the serve command for any additional information or backtrace. ------------------------------------------------

    c:\WEB\Art>

  • 16

    Conversion error sass

    I am following your tutorial on this project on youtube and I am encountering a problem.

    Conversion error: Jekyll::Converters::Sass encountered an error while converting '/assets/css/main.sass': File to import not found or unreadable: 1-tools/-tools-index. on line 1 Would really appreciate some assistance. PLease and Thank you

  • 17

    Error with Sass Converter

    I cloned the repository and when I ran jekyll serve I received this error:

    Conversion error: Jekyll::Converters::Sass encountered an error while converting Artists-Theme/assets/css/all.sass: $color: is not a color for lighten on line 16