Hoe dubbele mediaquery's te combineren

Tegenwoordig zijn er tal van frameworks die u kunnen helpen snel responsieve websites te bouwen. Bootstrap en Foundation, bijvoorbeeld, worden geleverd met een set algemene websitecomponenten, plug-ins, heel veel vooraf gedefinieerde stijlregels en CSS3-mediaquery's voor het construeren van het responsieve raster.

Een van de nadelen van het gebruik van deze frameworks is dat de mediaquery's verspreid zijn terwijl ze worden gedeclareerd en genest binnen de Mixins of de Functies. Het kan dus zijn dat u meerdere gedupliceerde mediaquery's door de codes heen hebt geplaatst .

Zou het niet beter zijn als we deze duplicaten eruit zouden kunnen halen en ze zouden kunnen combineren in één enkele CSS-regel ? Als je akkoord gaat, bekijk dan deze tip.

Ermee beginnen

Deze taak is afhankelijk van zowel Grunt als Grunt CLI, een pakket van Node.js voor taakautomatisering. Typ in Terminal of opdrachtprompt de volgende opdracht om Grunt CLI (opdrachtregel) te installeren.

 npm install -g grunt-cli 

Na het uitvoeren van de bovenstaande commando's, zorg ervoor dat de grunt opdracht werkt. Je kunt het uittesten door grunt --version in te typen, wat het geïnstalleerde Grunt versienummer moet laten zien, zoals zo.

Als u echter een fout tegenkomt waarbij de opdracht niet wordt gevonden of herkend, gaat u naar ons vorige bericht over het oplossen van dit probleem: Grunt oplossen "Opdracht niet gevonden" Fout in Terminal [Quickfix]

Installeer Grunt Plugin

Navigeer naar de projectmap en voer de volgende opdracht uit om een ​​bestand met de naam Gruntfile.js dat zal worden gebruikt om de Grunt-functies te specificeren en de taken te registreren.

 raak Gruntfile.js aan 

Typ deze twee onderstaande opdrachten om de Grunt-module te downloaden, die nodig is om de taak later uit te voeren. Download ook een Grunt-plug-in genaamd grunt-combine-media-queries (cmq) voor het combineren van overeenkomende mediaquery's.

 npm install grunt --save-dev npm install grunt-combine-media-queries --ave-dev 

Nadat het proces is voltooid, vindt u een extra map met de naam node_modules in uw projectdirectory, die deze modules bevat.

Taken registreren en configureren

Laten we Gruntfile.js en de volgende code erin stoppen.

 module.exports = functie (grunt) {grunt.initConfig ({cmq: {options: {log: false}, your_target: {files: {'output': ['build / *. css']}}}}); grunt.loadNpmTasks ( 'grunt-combineer-media-queries'); grunt.registerTask ('standaard', 'cmq'); }; 

Deze code hierboven configureert de cmq taak. Het bevat twee parameters, log en files :

De log is een boolean die u kunt instellen op true of false ; indien ingesteld op true, wordt een logbestand gemaakt dat bestaat uit de verwerkte mediaquery's.

De parameter files specificeert de doelbestanden en de uitvoermap. En gezien het bovenstaande codevoorbeeld doorzoekt het alle CSS-bestanden in de build map en geeft het resultaat door in de output . U kunt het pad vervangen volgens uw eigen projectconfiguratie.

Voer de taak uit

Op dit punt is alles geconfigureerd; we hebben Grunt CLI, Grunt-module en de plug-in geïnstalleerd om mediaquery's te combineren. Nu moeten we gewoon de taak uitvoeren.

Ik heb bijvoorbeeld een CSS-bestand met meerdere gedupliceerde mediaquery's, zoals u hieronder kunt zien.

Open Terminal, zorg dat u nog steeds "in" uw projectdirectory bent. Typ dan gewoon grunt, zoals zo.

We zijn klaar. Hieronder ziet u de vergelijking tussen het bronbestand en het uitvoerbestand.

Verdere referentie

• Aan de slag met GruntJS
• Grunt Combineer mediaquery's Repo

Kaders en hulpmiddelen om desktop-apps op meerdere platforms te ontwikkelen - het beste van

Cross-platform software-ontwikkeling is de noodzaak van het uur vanwege de toenemende vraag naar kostenefficiënte en kortlopende software projecten. Een dergelijk ontwikkelingsproces bespaart veel inspanningen en maakt het schrijven van een enkele codebase om apps voor meerdere platforms te maken .In deze post presenteren we de 9 beste frameworks en toolkits voor het coderen van platformonafhankelijke desktopsoftware .

(Technische en ontwerptips)

6 tips om het probleem te overwinnen en geweldige blogideeën te genereren

Het is dag-4 van een project van 5 dagen dat je nu al had moeten afronden. Je moet een nergens uithalen, maar je kunt niets interessants bedenken om te zeggen . Maak je geen zorgen, je komt wel goed ondanks dat innerlijke alarm dat je anders vertelt.Het is misschien geen writer's block. Wat er mogelijk gebeurt, lijkt veel op erectiestoornissen

(Technische en ontwerptips)