Main title padding issue, mobile

[pascalandy]

On my iPhone 7, I saw two glitches:

Proposition

1) Add line-height: 4.8rem;

.welcome h1 {
    font-size: 6.25rem;
    font-weight: 500;
    letter-spacing: -.3125rem;
    margin-top: 30vh;
    line-height: 4.8rem;
    margin-bottom: 20px;
    color: #1f2429;
}

2. Add margin-bottom: 1.5em;

.btn-primary {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff;
    box-shadow: none;
    margin-bottom: 1.5em;
}

Screenshots

[pascalandy]

Do you have any tutorial to share ?

I always work on the files in from DIR /dist. I know I should work from the source file but I don't know how to compile and do to whole workflow.

P.S. I'm really comfortable with docker. Cheers!

[hisk]

@pascalandy Thanks for submitting this issue, I'll take a look in a few hours.

Regarding your last question, I will assume you are referring to a tutorial on how to build Shards from source. If so, the node-sass library readme does a pretty decent job at explaining how you can use it to compile SCSS files. If that isn't enough, you can also check out Brian Han's article on Medium.

Hope this helps!

[pascalandy]

Absolutely !

Regarding your last question, I will assume you are referring to a tutorial on how to build Shards from source. If so, the node-sass library readme does a pretty decent job at explaining how you can use it to compile SCSS files. If that isn't enough, you can also check out Brian Han's article on Medium.

[pascalandy]

I was able to run the example found on Brian Han's post.

Main commands are:

npm install -D node-sass nodemon

npm run build-css

npm run watch-css

Now I applied the same logic to this project. I can run:

npm install -D node-sass nodemon

But I cannot run the build or watch functions. I would like to understand the command I'm missing :)

[hisk]

@pascalandy Can you please post your current package.json configuration? :)

[pascalandy]

Sure:

{
  "name": "shards-ui",
  "description": "A free, modern and lightweight Bootstrap 4 UI toolkit for web makers.",
  "version": "2.0.2",
  "main": "dist/js/shards",
  "scripts": {
    "start": "npm-run-all --parallel watch serve-dist",
    "copy-html": "copyfiles -f src/extras/*.html dist",
    "copy-images": "copyfiles -u 3 src/extras/images/**/**/**/* dist/images/",
    "css": "npm-run-all css-compile css-prefix css-minify && npm run bundlesize",
    "css-compile": "npm-run-all css-compile:main css-compile:extras css-compile:demo",
    "css-compile:demo": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/extras/scss/shards-demo.scss dist/css/shards-demo.css",
    "css-compile:extras": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/extras/scss/shards-extras.scss dist/css/shards-extras.css",
    "css-compile:main": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/scss/shards.scss dist/css/shards.css",
    "css-minify": "npm-run-all css-minify:main css-minify:extras css-minify:demo",
    "css-minify:demo": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/shards-demo.min.css dist/css/shards-demo.css",
    "css-minify:extras": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/shards-extras.min.css dist/css/shards-extras.css",
    "css-minify:main": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/shards.min.css dist/css/shards.css",
    "css-prefix": "postcss --config build/postcss.config.js --replace dist/css/*.css",
    "js": "npm-run-all js-compile js-minify",
    "js-compile": "webpack --config build/webpack.config.js",
    "js-minify": "npm-run-all js-minify:main js-minify:demo",
    "js-minify:demo": "uglifyjs --compress --mangle --output dist/js/demo.min.js dist/js/demo.js",
    "js-minify:main": "uglifyjs --compress --mangle --output dist/js/shards.min.js dist/js/shards.js",
    "serve-dist": "browser-sync start --server \"./dist\" --files \".\" --no-open --no-online --no-notify",
    "watch": "npm-run-all --parallel watch-css watch-html watch-images watch-js",
    "watch-css": "nodemon --ignore src/js --ignore dist/ -e scss -x \"npm run css\"",
    "watch-html": "nodemon --ignore src/js --ignore src/scss --ignore src/extras/js --ignore src/extras/scss --ignore dist/ -e html -x \"npm run copy-html\"",
    "watch-images": "nodemon --ignore src/js --ignore src/scss --ignore src/extras/js --ignore src/extras/scss --ignore dist/ -e jpg,jpeg,png -x \"npm run copy-images\"",
    "watch-js": "nodemon --ignore src/scss --ignore dist/ -e js -x \"npm run js\"",
    "bundlesize": "bundlesize"
  },
  "bundlesize": [
    {
      "path": "./dist/css/shards.min.css",
      "maxSize": "14.5 kB"
    }
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/DesignRevision/shards-ui"
  },
  "author": "Catalin Vasile",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/DesignRevision/shards-ui/issues"
  },
  "homepage": "https://designrevision.com/downloads/shards",
  "keywords": [
    "ui",
    "kit",
    "ui kit",
    "free",
    "bootstrap 4"
  ],
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "browser-sync": "^2.18.13",
    "clean-css-cli": "^4.1.6",
    "copyfiles": "^1.2.0",
    "node-sass": "^4.5.3",
    "nodemon": "^1.11.0",
    "npm-run-all": "^4.0.2",
    "postcss-cli": "^4.1.0",
    "sass-lint": "^1.10.2",
    "sass-unused": "^0.2.2",
    "uglify-js": "^3.1.2",
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "bootstrap": "4.0.0",
    "bootstrap-datepicker": "^1.7.1",
    "bundlesize": "^0.15.3",
    "nouislider": "^10.1.0"
  }
}

[hisk]

Oh! You don't have to use Shards' build process for your own project because it's cluttered with other tasks to handle the extra templates and custom stylesheets that you'll probably won't need. Instead, I would recommend starting from scratch by creating a new project with two simple NPM tasks that you can build upon depending on your needs.

...

    "css:compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 main.scss compiled-file.css",
    "css:watch": "nodemon --ignore node_modules -e scss -x \"npm run compile:css\""

...

Based on the tasks above, assuming you installed Shards as an NPM package in your project (and also have the node-sass and nodemon libraries installed), you will only have to add the following line inside your main.scss file to include Shards.

// main.scss

@import "node_modules/shards-ui/src/scss/shards";

// Your custom SCSS code here...

You might have to edit your paths accordingly. Let me know if this helps. :)

[pascalandy]

Thanks! Will test it :)