Chlouchloutte ¯\_(ツ)_/¯
213 shaares
7 résultats
taggé
css
A tester ! Ça peut m’être très utile :3
Et comment les éviter
Il y en a beaucoup que j'utilise sans avoir de vrai définition.
Maintenant, j'en ai une :)
{
"name": "toto",
"version": "1.0.0",
"description": "fdsvfkdgbvfi",
"author": "MOA",
"license": "MIT",
"scripts": {
"build": "npm run build-clean-dist && npm run build-sass && npm run build-autoprefix && npm run optimize-css",
"build-clean-dist": "rimraf dist",
"build-sass": "node-sass --output-style expanded --source-map true scss/target.scss dist/target.css",
"build-autoprefix": "postcss --use autoprefixer --map false --output dist/target.css dist/target.css",
"optimize-css": "cleancss -o dist/target.min.css dist/target.css"
},
"devDependencies": {
"rimraf": "2.6.2",
"clean-css-cli": "4.1.11",
"node-sass": "4.8.3",
"autoprefixer": "8.2.0",
"postcss-cli": "5.0.0"
}
}Je recopie :
This should work with any div or screen size:
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
} <html>
<head>
</head>
<body>
<div class="center-screen">
I'm in the center
</div>
</body>
</html>Une représentation d'étapes qui gère la fougère.
Bon, personnellement, je ne suis pas fan du ng-cli, mais reconstruire le build angular à la main, c'est juste la croix et la bannière.
Heureusement, il y a le .angular-cli.json, qui permet de configurer à minima le tin-touin. C'est notamment utile lorsque l'on souhaite changer l'icône du site ou rajouter des fichiers css perso, voire des fonts.
Exemple :
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "Mon application"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"logo-brand.png" <-------- nouvelle icone qui apparaitra dans l'onglet navigateur (à configurer ensuite dans le index.html)
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test/test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app", <------ On peut changer le nom du composant de base
"styles": [
"assets/css/bulma.css", <------ On peut rajouter ici des css perso
"assets/css/fontawesome-all.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}