jasonleow/gist:0fa007ba1af6913bb2dd20ef8d006bf8

## gistfile1.md

      
    Raw
  

              gistfile1.md
            
          
    Hey guys, thanks for offering to beta test Lists Kit for me!
Once you get access to this repo, please feel free to fork it, start customizing it for your own needs and deploy.
Where to start to customize your directory site


Edit the meta tags to change your website title, description, og images and favicon
the default brand color of the template is #FE6A34. ctrl/cmd-f and find instances of FE6A34 in the CSS to change to your brand color
for the CTA buttons with animated gradient backgrounds, ctrl-f background: linear-gradient(-45deg, #833ab4, #fd1d1d, #fcb045); to edit
to change the hero background image, ctrl-f HERO SECTION to find the .hero-image class, change the url
the default font color is #2d3748. ctrl/cmd-f and find instances of 2d3748 in the CSS to change to your preferred font color
the default alternate, non-white background color is #f7faff. ctrl/cmd-f and find instances of f7faff in the CSS to change to your preferred color
Don't forget to edit the aria-labels for the anchor links to correctly describe your links for better accessibility - ctrl/cmd-f to find them
For better SEO and Lighthouse scores, customize the robots.txt and sitemap.xml files too.
To start adding your own data to the listing cards, ctrl/cmd-f const directoryData and edit the data objects within the array – for beginners, remember to close each value with double quotation mark and a comma (",) otherwise the code will break:

{
    title: "Item 1",
    tags: ["tag1", "tag2"],
    likes: "10",
    topLeftText: "Featured",
    bottomText: "Use SALE50",
    imageUrl: "https://images.unsplash.com/photo-1558005530-a7958896ec60?auto=format&fit=crop&q=80&w=2071&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    description: "Description for Item 1 goes here...",
    linkUrl: "https://example.com"
},

Currently, there's no other  documentation yet. Besides fixing bugs, one of the goals of the beta is to flesh out the docs based on the questions you ask, so don't be shy, ask away!
Welcome any feedback regarding:


onboarding - are things clear, do you have want you need to get started
development - how's the development experience? Any difficulties using, customizing the code?
design - how does your end product look? Satisfied? Need more components? Or a different visual look-and-feel?

Please note:

I created this repo just for the beta. The commercial repo for Lists Kit is a different, separate one.
After beta closes, the code here will not get any updates. But you can continue using it for your projects if you like.
Standard media policy and common sense apply. As long as you don't use it for hate, violence, or anything criminal.
No sharing or reselling this repo in part or whole.


For beginners: Deploying your Lists Kit site

Automated deploy:

Create Github account
I will give you access to the private repository for Lists Kit
Create account on Netlify
Connect this repo in Netlify, and deploy – follow first half of tutorial here.

Manual upload:

Go to the index.html page of listskit-beta – https://github.com/jasonleow/listskit-beta/blob/main/index.html
On top right, click on "Download raw file" to get the index.html file. Remember to name your file as index.html. Save in your computer.
Drag and drop the file to deploy into Netlify Drop or Tiiny Host:

Netlify Drop - tutorial here.
Tiiny Host – tutorial here.


And your site is live!
To edit the html file, there's a few ways:

Use native apps TextEdit app on Mac, or Notepad on Windows.
Download desktop apps Brackets, Sublime Text or VS Code to edit the code.
Use JSfiddle.net or Codepen.io


~ Jason, ListsKit.com