https://github.com/mobile-michel/sass-simple

Basic template with Eleventy, LiquidJS & Sass processing
https://github.com/mobile-michel/sass-simple

eleventy github-pages liquidjs sass

Last synced: 20 days ago
JSON representation

Basic template with Eleventy, LiquidJS & Sass processing

• Host: GitHub
• URL: https://github.com/mobile-michel/sass-simple
• Owner: mobile-michel
• Created: 2023-11-01T16:06:20.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-17T18:36:46.000Z (10 months ago)
• Last Synced: 2024-11-16T07:39:48.078Z (3 months ago)
• Topics: eleventy, github-pages, liquidjs, sass
• Language: Liquid
• Homepage: https://mobile-michel.github.io/sass-simple/
• Size: 268 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Basic template with Eleventy, LiquidJS & Sass processing

## Folder structure

- pages in /src

- Sass files in /sass

- layouts in /_layouts

- includes in /_components

- Json files in /_data

- images & JavaScripts in /assets

## Page layout

- _layouts/base.liquid

- _components/header.liquid

- _components/nav.liquid

- _components/footer.liquid

## Responsive navbar

- responsive mobile menu with CSS without JavaScript from [LogRocket](https://blog.logrocket.com/create-responsive-mobile-menu-with-css-no-javascript/), without classes

- add tags: primary in frontmatter

## Package.json scripts

- "watch:eleventy": "npx @11ty/eleventy --serve",

- "watch:sass": "npx sass src/sass:_site/assets/css --watch",

- "start": "npm run watch:eleventy & npm run watch:sass",

- "build": "sass src/sass:_site/assets/css --style=compressed && eleventy",

- "debug": "DEBUG=* eleventy"

## Dependencies

- "@11ty/eleventy": "^2.0.1",

- "sass": "^1.69.0"

- ready for [Decap CMS](https://decapcms.org/) integration.

# Simple.css framework with dark mode

## Simple.css classless framework

- version 2.2.1 (May 17th, 2023)

- hue editable variable

- calculated complementary & analogous variables

- primary, secondary & 2 accent colors

- 100 to 900 lightness indice

- html[data-theme='light'] + html[data-theme='dark']

- descriptive variables for light & dark mode

- article & aside as box elements

## HTML checkbox to switch mode

- input element with type checkbox

## JavaScript to switch between light & dark mode

- html element with data-theme attribute

- activate the input element to toggle light & dark mode