Archivi categoria: CSS3

Installare Bootstrap 4 come dipendenza di app Angular 5

E’ un pò di tempo che non scrivo un nuovo articolo per il mio Blog, oggi volevo riprendere con questo argomento: come installare Bootstrap 4.0.0-beta-2 come dipendenza di un progetto Angular 5.

1. Posizionarsi sulla root del progetto, tramite terminale Node.js eseguire il seguente comando:

npm install bootstrap@4.0.0-beta.2 –save –style sass

per chi non conoscesse bene le opzioni di node.js  –save permette di includere automaticamente il pacchetto all’interno della sezione delle dipendenze del progetto nel file package.json e –style indica il tipo di foglio di stile da usare nel nostro caso se si preferisce usare sass lo indichiamo.

2. Una volta terminata l’installazione del modulo bootstrap verrà segnalato un warning che indica che è necessario installare due dipendenze per far funzionare correttamente bootstrap che sono le seguenti:

npm install jquery@1.9.1 –save –style sass

npm install popper.js@^1.12.9 –save –style sass

3. Aprire il vostro angular-cli.json e aggiungere lo stile e gli script nel seguente modo:

"styles": [
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/jquery.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

Continua la lettura di Installare Bootstrap 4 come dipendenza di app Angular 5

Le migliori pratiche CSS da seguire e cattive abitudini da evitare

Da un pò di tempo non dedico un pò del mio tempo a scrivere un’articolo del mio Blog, oggi finalmente l’ho trovato e vorrei riprendere il discorso parlando di CSS e la mia sfida di oggi sarà cercare di creare un set di regole CSS seguendo una determinata metodologia.

Attraverso la pratica, si dovrebbe essere in grado di evitare errori CSS. Elencheremo per darvi una mano in tal senso le migliori pratiche CSS seguire, così come le cattive abitudini da evitare.

Le Migliori Pratiche CSS

Usare CSS reset

Il diverso Rendering dei vari browser sul mercato rappresenta uno dei maggiori problemi che attualmente lo sviluppatore front-end deve affrontare quotidianamente. Infatti, Stili come margini, padding, altezze, intestazioni, dimensioni dei caratteri in base al browser utilizzato dall’utente può apparire diverso su diversi browser. L’obiettivo che vogliamo raggiungere con un foglio di stile di reset è quello di ridurre tali incongruenze, fornendo dei stili di carattere generali che possono essere modificati o addirittura estesi.

Un foglio di stile CSS di reset di riferimento uno dei migliori in circolazione è normalize.css, che potete scaricare cliccando dal precedente link. Le uniche operazioni che dovete fare è  includere il file css nella vostra pagina HTML nella sezione Head.

Continua la lettura di Le migliori pratiche CSS da seguire e cattive abitudini da evitare