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:
- Riccardo Pasianotto
- cust0dian
- Dylan Spicker
- arielsafari
- bzerangue
- Brian Guerrero
- Vipul Bansal
- iiSa3
- Killua13
- iMoritz
- jgrimshaw
- boodaah
- Vadzim
- Eric Ellenbrook
- rodrigofuentes
- Jonathan
- George
- Anders Thuesen
- beRoberto
- Sven Kube
A big thank you to these creators for contributing sample projects for the "work" section:
- Micael Butial
- Petras NargΔla
- Sergey Valiukh
- Ayoub Elred
- Anton Skvortsov
- Nick Zoutendijk
- Jonathan Quintin
- Jieyu Xiong
Artist Themes in the wild:
This is a free Jekyll Theme that is currently being developed in weekly episodes on the DevTips YouTube channel.
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.
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!
@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
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
Here is my configuration file so far:
Thanks for your help, Damien
Better path management - Changes in work section - Grunt workflow
_config.yml
files that wouldn't be compiled and added to the_site
folder.absolute_url
variable toportfolio.yml
to better manage url through the entire template.portfolio.yml
, this gives us more flexibility on the configurations..sass
files.index.html
andall.sass
. I've used theprepend
functionHope everybody will enjoy.
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.
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!
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:

However, after I publish the site, the layout gets completely messed up

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
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?
Thank's for this great theme!
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
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.
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, runningjekyll 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.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/
Adding webrick dependency and fixed syntax error in assets/css/all.sass
This fixes the bugs reported by:
I'm using jekyll-4.2.0 and webrick-1.7.0 on ruby 3.0.0p0 (2020-12-25 revision 95aff21468).
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:in
load' 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:in
program' 24: from /home/allan/gems/gems/mercenary-0.3.6/lib/mercenary/program.rb:42:ingo' 23: from /home/allan/gems/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in
execute' 22: from /home/allan/gems/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:ineach' 21: from /home/allan/gems/gems/mercenary-0.3.6/lib/mercenary/command.rb:220:in
block in execute' 20: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/commands/serve.rb:86:inblock (2 levels) in init_with_program' 19: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/command.rb:89:in
process_with_graceful_fail' 18: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/command.rb:89:ineach' 17: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/command.rb:89:in
block in process_with_graceful_fail' 16: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/commands/build.rb:36:inprocess' 15: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/commands/build.rb:65:in
build' 14: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/command.rb:28:inprocess_site' 13: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:76:in
process' 12: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:202:inrender' 11: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:515:in
render_pages' 10: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:515:ineach' 9: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:516:in
block in render_pages' 8: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/site.rb:523:inrender_regenerated' 7: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:63:in
run' 6: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:84:inrender_document' 5: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:100:in
convert' 4: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:100:inreduce' 3: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:100:in
each' 2: from /home/allan/gems/gems/jekyll-4.0.0/lib/jekyll/renderer.rb:102:inblock in convert' 1: from /home/allan/gems/gems/jekyll-sass-converter-2.0.1/lib/jekyll/converters/scss.rb:179:in
convert' /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.sassI am completely new to SCSS
Can you offer any advice Regards Allan
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 theserve
command for any additional information or backtrace. ------------------------------------------------c:\WEB\Art>
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 youError 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