roybarber / static-starter Goto Github PK

Create a humans.txt file to show who built the site

Styling is a little off when using <input type="file">

Node version for packages?

Ignores all other html files

When running the build:dist command on gulp, css and js folders don't exist in the dist folder.

Because of the amount of SVG/PNG icons by default, we should look to turn this into a sprite map for speed

We need to look at migrating our base sass config into an npm module.

This would also require a new main.scss to import the values in the npm module along with a style guide for extending.

Needs some thought on execution

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Apart from the hover icon, theres no real difference to show the state of the box. We need to improve this. Add a variable for state color if needed/not there already.

Extend the readme to incorporate:

• Netlify
• Git Labels
• Build Commands
• Sketch export & build

We should add a one click deploy button to netlify. This might need a config file creating.

Fix for webfont smothing after testing options this looks to be the best:

body { -moz-font-feature-settings: 'liga', 'kern'; -moz-font-feature-settings: 'liga=1, kern=1'; -ms-font-feature-settings: 'liga', 'kern'; -o-font-feature-settings: 'liga', 'kern'; -webkit-font-feature-settings: 'liga', 'kern'; font-feature-settings: 'liga', 'kern'; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-stretch: normal; }

Look to integrate: https://github.com/una/svg-icon-system-boilerplate

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Look to add a Z-Index helper of 10x levels with a reset and a minus. Possibly with breakpoints?

minus = -1
reset = 0
10 = 10
20 = 20
30 = 30
40 = 40
50 = 50
60 = 60
70 = 70
80 = 80
90 = 90
100 = 100

The new sketch static starter we have to kick off design projects. We should integrate the default css & components to better extend this starting code.

add some background image helpers to prevent duplicate code.
e.g:

bg-size-cover {
  background-size: cover;
}

Hello, a great project. Great new demo site.

################################################

• is it possible to include scss?

e.g.
src/assets/scss/navigation.scss
src/assets/scss/my-css1.scss
src/assets/scss/my-css2.scss
to
-->dist/assets/css/my-css-min.css

################################################

• is it possible to use php files as well (contact.php)?

e.g.
src/pages/contact/index.php
to
--> dist/contact/index.php

################################################

• is it possible to compile all JavaScript files as one file in "my-js-min.js"?

e.g.
src/assets/js/modules/lazyload.js
src/assets/js/modules/navigation.js
src/assets/js/modules/validation.js
to
--> dist/assets/js/my-js-min.js

################################################

• how do i use src/components/image.html and lazyload? Do you have an example?

################################################

• can I minimize all HTML and PHP files in production mode?

Thank you very much.

should point to '-v2'

Look at integrating https://github.com/bugsnag/chromatic-sass into the build and creating a mixin to handle.

Currently we have the following issue:

I propose adding the following to the standard button class to add ellipsis if text is too long:

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

Which produces:

Any thoughts?

Update code to include following starter information

<!-- 
    Date Required:
    Remove HTML Comments below
    - Page Title (SEO)
    - Page Description (SEO)
    - Site Name (e.g Run For Charity)
    - Current URL (URL of page currently on)
    - Twitter Handle (e.g @roybarberuk can be hard coded)
-->
<!-- META -->
<title>{{Page Title}}</title>
<meta name="description" content="{{Page Description}}"/>
<meta name="author" content="{{Site Name}}"/>
<meta name="copyright" content="Copyright {{Site Name}} <?php echo date("Y"); ?>. All Rights Reserved."/>
<meta name="application-name" content="{{Site Name}}"/>
<!-- Facebook -->
<meta property="og:locale" content="en_GB" />
<meta property="og:title" content="{{Site Name}}"/>
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="{{Site Name}}" />
<meta property="og:image" content="/custom/img/favicons/favicon-194x194.png"/>
<meta property="og:url" content="{{Current URL}}"/>
<meta property="og:description" content="{{Page Description}}"/>
<!-- Twitter -->
<meta name="twitter:site" content="{{Twitter Handle}}" />
<meta name="twitter:title" content="{{Page Title}}" />
<meta name="twitter:description" content="{{Page Description}}"/>
<meta name="twitter:image" content="/custom/img/favicons/favicon-194x194.png"/>
<meta name="twitter:url" content="{{Current URL}}" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:domain" content="{{Site Name}}"/>
<!-- Touch Icons -->
<link rel="apple-touch-icon" sizes="57x57" href="/custom/img/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/custom/img/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/custom/img/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/custom/img/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/custom/img/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/custom/img/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/custom/img/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/custom/img/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/custom/img/favicons/apple-touch-icon-180x180.png">
<!-- Fav Icons -->
<link rel="shortcut icon" href="/custom/img/favicons/favicon.ico">
<link rel="icon" type="image/png" href="/custom/img/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/custom/img/favicons/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="/custom/img/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/custom/img/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/custom/img/favicons/favicon-16x16.png" sizes="16x16">
<!-- Android -->
<link rel="manifest" href="/custom/img/favicons/manifest.json">
<!-- Internet explorer 10 -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/custom/img/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="/custom/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

When you add a folder to the scss folder, changes to anything in that 'custom' folder dont trigger a reload or recompile the css, you have to go into main.scss and save that to force the changes to happen.

https://github.com/ApoorvSaxena/lozad.js

https://www.npmjs.com/package/gulp-sass-glob

Include this

If using a defined input type, such as email, and the entered text doesn't validate as correct, firefox applies a styling. This can be fixed with:

input:invalid, textarea:invalid{
    box-shadow: none;
}

Not working

Add following to the forms.scss boilerplate:

input {
    &::-ms-clear {
        display: none;
    }
}

failed during stage 'building site': Build script returned non-zero exit code: 127

Reading up it seems 127 is retuned from unix systems when a command or binary can’t be found.

Value 127 is returned by /bin/sh when the given command is not found within your PATH system variable and it is not a built-in shell command. In other words, the system doesn't understand your command, because it doesn't know where to find the binary you're trying to call.

Look to add more breakpoints to make everything more flexible.

XXS = 320px;
XS = 400px;
S = 600px;
M = 800px;
L = 1000px;
XL = 1200px;
XXL = 1400px;

Possibly tweak the above.

When I spin up the server with $ npm run dev it was very clear that the CSS was not loading. Note I have not yet made any changes to the repo. Here's how it looks as deployed.

Sure enough looking in dist after running npm run build and the css is not generating.

Can you work out why main.css is not compiling into /dist?

For anyone else following:
The web console also provided this error:

The resource from “http://localhost:8888/assets/css/main.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Which some web searching revealed usually occurs when a file is not found.

There's a few branches with various changes, just jumping onto it to style the file input and it's a little confusing. This is just an issue for a request to somehow unify everything into master and develop, just to tidy things up a little.

in order that this works under windows, you need to change/add in config.json:

"scripts": {
"dev": "cross-env NODE_ENV=development LANG=en netlify dev",
"dev:es": "cross-env ENV NODE_ENV=development LANG=es netlify dev",
"build": "cross-env ENV NODE_ENV=production gulp build --production",
[...]
"build:serve": "cross-env ENV NODE_ENV=production gulp build:serve --production"
},
"dependencies": {
[...]
"cross-env": "^7.0.2",

No files in /client/img are being copied to /build/dist/assets/img, JS and CSS is copying fine

Need to integrate these: https://www.sketchappsources.com/free-source/1818-cursor-symbols-vector-sketch-freebie-resource.html

As sketch symbols (not exportable)