Giter VIP home page Giter VIP logo

11ty-sass-skeleton's Introduction

logo

11ty Sass Skeleton

Featuring absolutely nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside 11ty.

Includes minifiying and autoprefixing of styles during development and on build using Lightning CSS. The v3 update ensures processing also occurs during development.

If you have different preferred browser targets, be sure to modify the package browserslist or use a .browserslistrc.

Note > As of v3, Sass + LightningCSS processing now provided via the standalone plugin which you can use to add this functionality to an existing 11ty project!

Created by @5t3ph

Development Scripts

npm start

Run 11ty with hot reload at localhost:8080, including reload based on Sass changes

npm run build

Production build includes minified, autoprefixed CSS

Use this as the "Publish command" if needed by hosting such as Netlify.

Resources to extend this and learn 11ty

A variety of tips, tutorials and resources on 11ty Rocks!

Ensure accessible colors by adding my a11y-color-tokens package

Learn to build an 11ty site in 20 mins with my egghead video course and see how to add a blog and custom data.

Explore advanced setup of custom data through my tutorial on building a community site

11ty-sass-skeleton's People

Contributors

5t3ph 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

11ty-sass-skeleton's Issues

CSS not included in npm run build command with Netlify

Hello Stephanie.

Thank you so much for the starter skeleton. It's been a huge time-saver in my workflow.
So I've cloned this repo and have set-up continuous deployment with Netlify.
Here are the results: https://xenodochial-torvalds-8aa5b9.netlify.app

Here is a screenshot of my Netlify configuration (which I hope is correct):
Screenshot_2020-10-18 Create a new site Netlify

It doesn't appear your base CSS styles—typography and background color are being referenced.
So—I hope you can help a total noob out.

Thank you so much.

License

Hi, just wondered if there was a license for using this code? If you could add one that would be awesome :)

Cheers!

lightning postbuild never gets called

In package.json you have a script setup for "postbuild" but it never gets called. I think that should get called during the "build" script since I believe that is what is used for production.

Additionally, you define "browserslist" in package.json but don't use it in postbuild.

Multi layer folders sass

hello

great work i really love it and help me but i have a question how can i complie scss file that exist in multi folder layers
image
for exemple i want to compile buttons.scss that exist in sass/ui/elements/buttons.scss

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.