Git Product home page Git Product logo

minwiz's Introduction

MinWiz - Minimal starter kit for under 2 KB sites

Use this starter kit to create a viable, good looking, production-ready website whose entire size does not exceed 2 KB compressed when opened in a browser. Ideally, the total size of all assets (HTML, CSS, favicon, etc.) downloaded by the browser when opening the page will be under 2 KB. You can see a live version at MinWiz.com.

Getting started

Make sure you have Node and npm installed. Any version will do.

If you're doing web development you probably already have gulp-cli globally installed (you can test with gulp -v). If you don't have it, run npm install --global gulp-cli

  • clone the repo
  • install the dependencies with npm install
  • build the site (in the dist folder) with npm run build
  • at this point, the dist folder contains all assets in a minified form, ready to be copied/deployed to your web hosting service

If you want to live edit the site, there is a handy-dandy gulp dev command and the Live Server extension for VS Code is configured to open the site from dist folder. Run the command, click Go Live in the status panel of VS Code and you're good to go.

Contributing

If you have a creative idea for decreasing the size of the website feel free to submit a PR! You can learn how from this Step-by-step guide to contributing on GitHub.

If it's not obvious how your PR will help, please conceptually explain it. Ex:

As the stylesheet.css already includes the text "section {", rearranging the order in "section, p, h1," to "p, h1, section {" will pick-up more text during gzipping.

Please note that I'm using package-lock with lockfileVersion 2. If you submit a PR and you're using lockfileVersion 1, make sure not to include the package-lock.json file.

Thank you

CDK deployment notes

For cdk deploy to work we need to have a Github personal access token in the GITHUB_TOKEN variable:

echo export GITHUB_TOKEN=REPLACE_ME_WITH_THE_REAL_GITHUB_TOKEN >> ~/.bashrc

minwiz's People

Contributors

dependabot[bot] avatar jgregordev avatar trofosila 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

minwiz's Issues

Inconsistent navbar/anchor behaviour

Hí! Thanks for this excellent template. It's really elegant.

Slight problem: Clicking links in the navbar can act in one of two ways depending on page content.

Situation 1 : page content is less than viewport height
In this case, clicking the navbar link changes the page content nice and smoothly with the navbar is still displayed.

Screen.Recording.2022-02-08.at.4.05.44.p.m.mov

Situation 2: page content is greater than viewport height
In this case, clicking the navbar link changes the page content, but the navbar jumps upward out of view.

Screen.Recording.2022-02-08.at.4.06.28.p.m.mov

Is it possible to get the situation 1 behaviour always? Here is code to test on, since I haven't deployed yet
index.html.txt
.

Fix WooRank issues

WooRank review

  • title length: 50-60 (moz), 20-70 (WooRank), 70 twitter card (under 50 won't truncate).
  • meta description length: 158 Google, 168 Bing and Yahoo, 120 mobile
  • headings

Actual

  • title: "MinWiz - Starter kit for lightweight sites" 42 length
  • description: "Starter kit for good looking, viable, lightweight (under 2 KB compressed), production-ready sites with all the bells and whistles of modern web included." 153 length

Initial score: 55

Accessibility issues

display: none;

Basically, display:none isn't recommended, it's better to use another technique.

Without using exotic properties like clipand clip-path, I have found this to be enough for this case (I'm planning to use it for the john-doe template:

section, section:target ~ section:last-of-type {
  height: 0;
  overflow: hidden;
}

section:target, section:last-of-type {
  height: auto;
  overflow: visible;
}

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.