Git Product home page Git Product logo

cards-jekyll-template's Introduction

⚠️⚠️ This project is not maintained anymore ⚠️⚠️

Cards Jekyll Template - Demo

Screenshot

This is a simple and minimalist template for Jekyll designed for developers that want to write blog posts but don't want to care about frontend stuff.

The Theme features:

  • Gulp
  • Stylus (Jeet, Rupture, Kouto Swiss)
  • Live Search
  • Offcanvas Menu
  • SVG icons
  • Very very small and fast!
  • Shell Script to create posts
  • Tags page
  • Series page
  • About Me page
  • Feed RSS
  • Sitemap.xml
  • Color Customization
  • Info Customization

If you want to see this template in real action, take a look at my original site.

Basic Setup

  1. Install Jekyll (use the command sudo gem install jekyll)
  2. Fork the Cards Jekyll Template
  3. Clone the repo you just forked.
  4. Edit _config.yml to personalize your site.
  5. Check out the sample posts in _posts to see examples for assigning categories and tags, and other YAML data.
  6. Read the documentation below for further customization pointers and documentation.
  7. Remember to compile your assets files with Gulp.

Site and User Settings

You have to fill some informations on _config.yml to customize your site.

# Site settings
title: Willian Justen - Desenvolvedor Front End
description: A blog about lorem ipsum dolor sit amet
baseurl: "" # the subpath of your site, e.g. /blog/ or empty.
url: "http://localhost:3000" # the base hostname & protocol for your site 

# User settings
username: Lorem Ipsum
user_description: Anon Developer at Lorem Ipsum Dolor
email: [email protected]
twitter_username: lorem_ipsum
github_username:  lorem_ipsum
gplus_username:  lorem_ipsum
disqus_username: lorem_ipsum

Header Name

To use the power of CSS Content and media query, the header name is defined on src/styl/_header.styl. Change to your prefered name.

Color customization

All color variables are in src/styl/_variables.styl. To change the main color, just set the new value at main assignment. Another colors are for texts and the code background color.

Theme Colors

Every post has a main color that is defined on src/styl/_theme-colors.styl. Just create a new color with the prefix post- and define your main-class: 'css' and color: '#2DA0C3' on every post you create.

Creating posts

You can use the initpost.sh to create your new posts. Just follow the command:

./initpost.sh -c Post Title

The new file will be created at _posts with this format date-title.md.

Front-matter

When you create a new post, you need to fill the post information in the front-matter, follow this example:

---
layout: post
title: "Falando sobre RSCSS"
date: 2016-02-07 18:48:16
image: '/assets/img/rscss/rscss.png'
description: 'Escrevendo CSS sem perder a sanidade. Aprenda uma metodologia que pode salvar muitas dores de cabeça.'
main-class: 'css'
color: '#2DA0C3'
tags:
- css
- metodologia
- frontend
categories:
twitter_text: 'Escrevendo CSS sem perder a sanidade.'
introduction: 'Escrevendo CSS sem perder a sanidade. Com essa introdução, Rico St. Cruz o criador chama a atenção de todos sobre uma metodologia melhor para se escrever CSS.'
---

Running the blog in local

In order to compile the assets and run Jekyll on local you need to follow those steps:

  • Install NodeJS (remember to use the latest version)
  • Run npm install
  • Run npm install -g gulp gulp-cli
  • Run gulp

Questions

Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter @willian_justen or file a GitHub Issue.

Donation

If you liked my work, buy me a coffee <3

paypal

License

This theme is free and open source software, distributed under the The MIT License. So feel free to use this Jekyll theme on your site without linking back to me or using a disclaimer.

If you’d like to give me credit somewhere on your blog or tweet a shout out to @willian_justen, that would be pretty sweet.

cards-jekyll-template's People

Contributors

agtlucas avatar astfarias avatar daenamkim avatar danielschmitz avatar devingd avatar pinzolo avatar wenndersantos avatar willianjusten avatar yuhao-kuo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cards-jekyll-template's Issues

Cards scrolling and positioning issue

Hi Willian, Great template by the way.
I am facing an issue with the positionning of the cards.
I used npm & gulp install commands you described but the scrolling does not work at all neither the positioning.
When I have access to you website everything is fine but with the github one I get the result in attachement.
Do you have any clue about that ?
Thank you,
Youssef
cardslayout

Pagination

If there is a pagination, the theme will become far far better..... However it is awesome...

about your website template

thanks for this great theme, can you please upload your site template from https://willianjusten.com.br because the theme on github is not up to date with dark and light theme and image to article, also when i add a new article (the number of article become 10), the 10th show on an entire row,
like in the screenshoot:

screen shot 2018-09-16 at 9 39 27 pm

Fixed width of cards

Hi @willianjusten. While using the template I see that whenever I add a new post that starts in a new row of cards, it occupies the whole width of the page/screen. I would like each card to always have the same width irrespective of the positioning and presence/absence of other cards in a row. Any config to fix this will be helpful.

image

gulp: command not found

Hi, I did follow your installation instructions to run in local and when I do npm install then press gulp, it shows error: gulp: command not found. I did try on different machine, the result is the same. May be I'm missing something?

Help with the logo in Mobile view

Hi Will,

Sorry for the noob question. I am looking to use an SVG graphic file as the logo. So, I have two questions.

  1. How to configure the Blog and title to use a logo
  2. The original SVG is pretty big. How do I ensure that it will scale appropriately based on the size of the window.

`gulp` command throwing error

After following instructions in README.md:

  • Install NodeJS (remember to use the latest version)
  • Run npm install
  • Run npm install -g gulp gulp-cli
  • Run gulp

Running gulp command throws an error:

ReferenceError: primordials is not defined
    at fs.js:27:26
    at req_ (/Users/nikitahlopovs/Documents/html/cards-jekyll-template/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/nikitahlopovs/Documents/html/cards-jekyll-template/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/Users/nikitahlopovs/Documents/html/cards-jekyll-template/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)

Possibly need to update packages or config. Please advise. Thank you.

Can we nest card pages

Is it possible to have a top-level set of cards, some of which open other card pages, rather than article pages?

Could not find 'jekyll' (>= 0.a) among 16 total gem(s)

Hi,

I followed these instruction on README:

gem install jekyll
sudo npm install
sudo npm install -g gulp gulp-cli

then I ran sudo gulp to compile the assets, it showed the error:

[16:48:58] Using gulpfile ~/workspace/cards-jekyll-template/gulpfile.js
[16:48:58] Starting 'js'...
[16:48:58] Starting 'stylus'...
[16:48:58] Finished 'stylus' after 17 ms
[16:48:58] Starting 'jekyll-build'...
[16:48:58] Starting 'watch'...
/usr/local/rvm/rubies/ruby-2.3.0/lib/ruby/2.3.0/rubygems/dependency.rb:319:in `to_specs': Could not find 'jekyll' (>= 0.a) among 16 total gem(s) (Gem::LoadError)
Checked in 'GEM_PATH=/home/ubuntu/.gem/ruby/2.3.0:/usr/local/rvm/rubies/ruby-2.3.0/lib/ruby/gems/2.3.0', execute `gem env` for more information
        from /usr/local/rvm/rubies/ruby-2.3.0/lib/ruby/2.3.0/rubygems/dependency.rb:328:in `to_spec'
        from /usr/local/rvm/rubies/ruby-2.3.0/lib/ruby/2.3.0/rubygems/core_ext/kernel_gem.rb:65:in `gem'
        from /usr/local/rvm/gems/ruby-2.3.0/bin/jekyll:22:in `<main>'
        from /usr/local/rvm/gems/ruby-2.3.0/bin/ruby_executable_hooks:15:in `eval'
        from /usr/local/rvm/gems/ruby-2.3.0/bin/ruby_executable_hooks:15:in `<main>'
[16:49:00] Finished 'watch' after 2.09 s
[16:49:00] 'jekyll-build' errored after 2.16 s

My node version is 6.3.1

The Header is not changing

The website header always shows </> Anon Developer or </> AD(for mobile site). changed header of the site by editing the file /src/style/_header .style like this

			transition all .4s
			content '</> TP'
			+above(cut)
				content '</> Tip4programs'

But the change is not affecting on the website. What is the reason behind this? I have committed this change on both gh-pages and master branch😧.

How to change the post grid to rectangles instead of squares?

Hi Willian,

First, I would like to thank you for creating such a beautiful and really amazing template. Its makes the endeavour to start a Jekyll blog super easy. Kudos!!

Now, for my question. I would like to change the grid to display rectangles, instead of squares and also the grid to show from left edge to right edge instead of leaving a very wide border. Can you please tell if this is configurable? If yes, then it would be a great help.

Thanks,
Ash

Error: Cannot find module 'minimatch' after `sudo gulp`

When running

sudo gulp

An error is thrown. No changes were done to the repo after it was cloned.

 user__$ sudo gulp
module.js:529
    throw err;
    ^

Error: Cannot find module 'minimatch'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/gulp-cli/node_modules/glob/glob.js:44:17)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
admins-MBP:cards-jekyll-template motaher$ 

What's happening?

Question: Homepage cards pushed down resulting in blank space

I'm running into issues after pulling down a copy of the this theme where the homepage loads the initial posts (I'm just using an exact copy of this repo) but they're all pushed down below the fold.

This results in the title, menu, and search being where they should be, but they're followed by blank space.

Then I see two rows of posts, the footer, and then the last row of posts. The series and tags pages work as expected, and the empty space on the homepage seems to be close to the height of the block that would be there if it was one of those subpages.

I've tried dropping in the default CSS and it results in the exact same behavior. Pulling up https://willianjusten.com.br/cards-jekyll-template/ results in the site working as expected, so it doesn't appear to be an issue (Chrome current on Mac).

I've tried inspecting CSS and things appear to be matching up.

Any suggestions on how I could try resolving this?

Example: http://ebacher-skemp.com/

How to fix "ReferenceError: primordials is not defined" in Node.js

I have installed Node.js modules by 'npm install', and then I tried to do npm install -g gulp gulp-cli.

When I run gulp I get that :

ReferenceError: primordials is not defined
    at fs.js:47:5
    at req_ (/Users/aparrot/git/cards-jekyll-template/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/aparrot/git/cards-jekyll-template/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/Users/aparrot/git/cards-jekyll-template/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (node:internal/modules/cjs/loader:1099:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)

Accessibility errors found in your template

The user @carlsonsantana validate your site template "https://willianjusten.github.io/cards-jekyll-template" and found these accessibility errors:

  • Page https://willianjusten.github.io/cards-jekyll-template/:
    • Issue b867e3e8-08ce-4c45-a1a8-04e4c4748b12:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_3.1_3_1.F68
      • Message: This form field should be labelled in some way. Use the label element (either with a "for" attribute or wrapped around the form field), or "title", "aria-label" or "aria-labelledby" attributes as appropriate.
      • Selector: html > body > div:nth-child(3) > div > input
      • Context: <input type="text" class="search-field" placeholder="Search...">
    • Issue 0afea728-aab3-4bb1-9262-3a3448a9a8d8:
      • Type: Error
      • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputText.Name
      • Message: This textinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.
      • Selector: html > body > div:nth-child(3) > div > input
      • Context: <input type="text" class="search-field" placeholder="Search...">
    • Issue 0b774408-cc80-4589-9177-b7a5e0a64689:
      • Type: Error
      • Code: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent
      • Message: Anchor element found with a valid href attribute, but no link content has been supplied.
      • Selector: html > body > header > h1 > a
      • Context: <a href="/cards-jekyll-template/"></a>
    • Issue 3b5357f2-3de2-4826-b310-7e5c1f571a5b:
      • Type: Error
      • Code: WCAG2AA.Principle1.Guideline1_3.1_3_1.H42.2
      • Message: Heading tag found with no content. Text that is not intended as a heading should not be marked up with heading tags.
      • Selector: html > body > header > h1
      • Context: <h1 class="logo"> <a href="/cards-jekyll-templat...</h1>

You can check these accessibility errors using pa11y.
You can view the full validation results in our website.

How to add disqus comments?

Hi Willian,

I would like to add disqus support to my blog. I am reading the steps and it says that i need to add
comments: true to YAML frontmatter and so I did the same in page.html


layout: default
comments: true

After this the second step is to

<2>

In between a {% if page.comments %} and a {% endif %} tag, copy and paste the Universal Embed Code in the appropriate template where you'd like Disqus to load.

Now, do I ad the Embed code in page.html or in default.html as i do see similar tag logic in default.html but not in page.html

Can not create a new color in _theme-colors.styl

i add the 'ios' color but no work and the tag’s border disappears

themes = {
    post-jekyll: #B31917,
    post-css: #2DA0C3,
    post-js: #D6BA32,
    post-html: #EB7728,
    post-svg: #7D669E,
    post-dev: #637a91,
    post-misc: #7AAB13,
    post-ios: #7AAB13
}

Header content doesn't update via Gulp

Changing the _header.styl title content values and then trying to compile with Gulp throws a stylus error. I made sure that gulp-stylus was on current 2.5.0 version. Any help appreciated.

$Noels-MBP:17.0 noxidsoft$ gulp
[15:48:56] Using gulpfile /Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0/gulpfile.js
[15:48:56] Starting 'js'...
[15:48:56] Starting 'stylus'...
[15:48:56] Finished 'stylus' after 4.52 ms
[15:48:56] Starting 'jekyll-build'...
[15:48:56] Starting 'watch'...
Configuration file: /Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0/_config.yml
Source: /Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0
Destination: /Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0/_site
Incremental build: disabled. Enable with --incremental
Generating...
[15:48:57] Finished 'watch' after 1.44 s
[15:48:57] Plumber found unhandled error:
Error in plugin 'gulp-stylus'
Message:
/Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0/src/styl/main.styl:22:9
18| And of course, look in node_modules for axis-css and jeet
19| */
20|
21| @import "kouto-swiss"
22| @import "jeet"
---------------^
23| normalize()
24| @import "_variables"
25| @import "_typo"

failed to locate @import file jeet.styl

Details:
lineno: 22
column: 9
filename: /Applications/MAMP/htdocs/dev_noxidsoft_flat/17.0/src/styl/main.styl
stylusStack:
input: /* Syntax Quick Reference for Jeet
--------------------------
column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet.gutter)
span(ratio = 1, offset = 0)
shift(ratios = 0, col_or_span = column, gutter = jeet.gutter)
unshift()
edit()
center(max_width = 1410px, pad = 0)
stack(pad = 0, align = false)
unstack()
align(direction = both)
cf()
...

Error: spawn jekyll ENOENT

Steps I followed to setup:

$ node -v
v7.4.0
$ sudo npm install
$ sudo npm install -g gulp gulp-cli
$ sudo gulp
[21:43:39] Starting 'js'...
[21:43:39] Starting 'stylus'...
[21:43:39] Finished 'stylus' after 9.68 ms
[21:43:39] Starting 'jekyll-build'...
[21:43:39] Starting 'watch'...
[21:43:41] Finished 'watch' after 1.48 s
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: spawn jekyll ENOENT
    at exports._errnoException (util.js:1022:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:359:16)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

Any help would be really appreciated 🙋‍♂️ I am using Fedora 24.

Tables are not responsive

There is a post with tables on this theme(Demo): https://willianjusten.com.br/cards-jekyll-template/dica-rapida-1/ . The table in this post gets hided on my phone with 5" screen on landscape mode. But the table gets visible, if I turned phone to portrait mode , with some overflow. I used overflow-x:auto for inline CSS of table tag. Unfortunately it didn't work for me. I expect this problem will eradicated soon. Also I expect th with theme color for more visually pleasing tables.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.