Giter Site home page Giter Site logo

minimaly's Introduction

Minimaly

Features

Minimaly is an eleventy starter with :

  • Design tokens so you can brand it as you wish (color, sizes ...)
  • Eleventy data for all metas, cover and post display (grid, list, cover background ...)
  • Custom navigation
  • Blog ready with markdown post
  • RSS feed
  • Service workers for offline reading
  • Accessibility (Any advise will help ! Still learning)

It is inspired by Hylia starter by Andy Bell except that i didn't plug any CMS. Andy Bell starter helped me a lot, especially to discover design tokens. Also i highly recommand to read and buy Every layout wrote by him and Heydon Pickering. It helped me a lot to implement a better css structure and understand some basics stuff.

I wrote a post about how i have done this starter.

It is for simple markdown blog use only. Event if, once installed, you can do what you want with it ! Look at Eleventy doc cause it is super powerfull.

1 . Get the starter

git clone the repo

2 . Install it

Once cloned, cd minimaly then npm install to install all the dependencies.

3 . UI settings

You can then modify token.json in src/_data folder to change the color, breakpoints, sizes... It will automatically generate a _tokens.scss in scss/settings folder, do not change directly this file since it's automated, always modify token.json.

4. Theme options

You can also change any data in src/_data/site.json Display posts as list showAsGrid: false

  • If you don't want your post to have thumbnail change postWithImage: false
  • If there is a cover title it will display the cover hero. You can choose cover text alignement just change coverTextAlignement: "center" (left, center, right)
  • How many posts are render on homepage maxPostsPerPage: 6
  • Customize your navigation navItems

4 . Run in the browser

You can run npm run serve and go to localhost:8080 adress in your browser to check the result.

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.