The file contains an array of properties, each with its own array of values. This is where the CSS properties and their values are stored. The Data #Įvery cheatsheet has a data file, a YAML file stored in the _data directory (e.g. There are 3 files involved to create a cheatsheet. Once the Jekyll site is setup, we can start creating the actual cheatsheet files. The resulting directory for the Cheatsheets Jekyll site looks like this - _cheatsheets/ So, the files within the cheatsheets collection should be in a directory titled _cheatsheets. When a custom collection is created, Jekyll expects the files within that collection to be stored in a directory titled after the name of the collection. Scope : # Sets the scope of the defaults we are about to set to cheatsheets collection For example, instead of having to set the layout for each cheatsheet in the front matter of each file, we can set this as the default behaviour in the _config.yml file. We can also specify default front matter for custom collections. Output : true # Makes the collection public This is how the cheatsheets custom collection is defined - collections :Ĭheatsheets : # The name of the custom collection To create a custom collection, we define it in the _config.yml file. If we want to use Jekyll for groups of content other than blog posts or pages, we can use what is called a custom collection. the cheatsheet for Flexbox or object-fit & object-position). There are no blog posts, as is usually expected and instead we have “cheatsheets” (e.g. ![]() The Cheatsheets site uses Jekyll in a rather unconventional way. ![]() You can watch the full talk here, but here is an overview of the method I used to create the site. ![]() Here's an example of the cheatsheet for Flexbox. Using this method, I created, where I display the resulting demos. My talk, " Using Jekyll for Rapid CSS Testing", was about how I use Jekyll to quickly and easily create visual demos of CSS properties and their potential values. ![]() Last week, I gave a talk at JekyllConf, the free online global conference for all things Jekyll.
0 Comments
Leave a Reply. |