10 besten CSS-Frameworks für Front-End-Entwickler

Ich habe einmal einen Front-End-Entwicklerwitz gehört: “Die NASA hat Roboter auf dem Mars gelandet, und hier kämpfen wir immer noch darum, unsere Divs in der Mitte auszurichten!” Und es macht mich schlecht, dass dieser Witz viel Wahrheit enthält. Es ist unglaublich schwierig, in CSS etwas zu tun, das so einfach und vernünftig klingt wie das Zentrieren einer Box innerhalb einer Box. Es sei denn, Sie haben es schon einmal erlebt. Und das Code-Snippet irgendwo gespeichert. Und selbst wenn Sie es schaffen, es zu schaffen, lauert immer die Angst, dass es in einem dummen Browser irgendwo schrecklich kaputt gehen könnte! CSS-Verbindungen für den ersten Punkt „notwendiger Web-Übel“ zusammen mit JavaScript. Es ist ein Standard, der sich willkürlich entwickelt hat, von verschiedenen Browserherstellern unterschiedlich interpretiert wurde und jetzt so voller Widersprüche ist, dass sich niemand traut, sich selbst als “CSS-Experte” zu bezeichnen..


Kein Wunder also, dass CSS-Frameworks im Laufe der Zeit entstanden und den größten Teil der Schmerzen beseitigt haben. Heute können wir uns das Codieren ohne unser bevorzugtes CSS-Framework nicht vorstellen, da die Ausrichtung auf mehrere Bildschirmgrößen zu einer Notwendigkeit geworden ist.

Aber woher wissen Sie, dass Ihr Framework für den jeweiligen Job am besten geeignet ist? Wenn Sie neu in der Front-End-Entwicklung sind, welches Framework sollte Ihnen bei der Auswahl helfen?

Dieser Beitrag wirft einen umfassenden Blick auf die Front-End-Entwicklungslandschaft und vergleicht die Spitzenreiter unter den CSS-Frameworks. Wenn Sie es satt haben, CSS-Regeln von Hand zu codieren, können Sie sich schnell entlasten lassen!

Bootstrap

Eine Initiative von Twitter, Bootstrap wird für die Einführung von Responsive Design in großem Maßstab gewürdigt. Es war der erste Rahmen, der die Philosophie von „Mobile-First“ förderte. Das Entwerfen für kleinere Bildschirmgrößen war kein eigenständiges Projekt mehr. Alles, was Sie tun mussten, war, die relevanten Bootstrap-Klassen einzuschließen, und das Design wurde automatisch an verschiedene Bildschirmgrößen angepasst (na ja, fast)..

Responsive Design in Bootstrap (4.0 vs. 3.0)

Bootstrap erzielte ein reaktionsschnelles Design, indem es die Idee eines Rasters einführte. Ein Raster ist eine unsichtbare Unterteilung des Bildschirms in Spalten (zusammen mit der Breite). Wenn Sie beispielsweise drei “Kästchen” haben, die Sie auf großen Bildschirmen nebeneinander, auf kleineren Bildschirmen jedoch vertikal positionieren möchten, gehen Sie wie folgt vor:

Eine von drei Spalten

Eine von drei Spalten

Eine von drei Spalten

Die derzeit beliebte Version von Bootstrap ist 4, was eine umfassende Überarbeitung der 3.3-Serie darstellt. Die obige Syntax ist die Art und Weise, wie Sie in Bootstrap 4 codieren, was einen großen Teil seiner Eleganz der rohen Kraft von Flexbox und andere moderne Layoutfunktionen, die von Browsern direkt unterstützt werden. In den unteren Versionen von Bootstrap wurde das Raster als insgesamt 12 Spalten definiert, was zu Code wie z

Damit ein Div ein Drittel der Bildschirmbreite bei großen Geräten und die Hälfte der Breite bei mittelgroßen Geräten einnimmt. Die Syntax ist jetzt viel angenehmer, erfordert jedoch Vertrautheit mit Flexbox.

Bootstrap-Profis

Bootstrap hat viel zu bieten, insbesondere für Full-Stack-Entwickler:

  • Rapid-Prototyping: Mit Bootstrap müssen Sie sich kaum Gedanken über schwierige CSS-Positionierungen und Browser-Inkompatibilitäten machen. Alles, was Sie tun müssen, um den HTML-Code zu schreiben und dann die entsprechenden CSS-Klassen anzuwenden, wird die Reaktionsfähigkeit lebendig.
  • Großes Ökosystem: Bis heute verfügt Bootstrap über das größte Ökosystem unter den Front-End-Frameworks. Die Anzahl der mit Bootstrap erstellten Website-Layouts, -Themen, Admin-Panels, UI-Komponenten usw. ist umwerfend und wird immer besser. Für Berater und Produktunternehmen bedeutet dies, dass vorgefertigte Artikel und Community-Support immer ausreichend sind.
  • Unterstützt von Twitter: Ein aufkommender Trend bei Open Source ist der Anstieg von Projekten, die von einer kommerziellen Einheit gesponsert werden. Meistens bauen diese Unternehmen profitable Geschäfte rund um ihr Angebot auf. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook) usw. sind einige Beispiele. Wenn ein Projekt von einer etablierten Einheit unterstützt wird und keine Einzelausstellung ist, gibt es der Community (insbesondere den Unternehmenskunden) das Vertrauen, dass das Projekt eine klare Roadmap und eine langfristige Zukunft haben wird.
  • Große Sammlung von Komponenten: Bootstrap bietet sofort fast alle UI-Komponenten, die Sie wahrscheinlich jemals benötigen werden. Navigation, Formulare, Karten, Modalitäten, Schaltflächen, Abzeichen, Fortschrittsbalken, Warnungen. . . Sie nennen es und Bootstrap hat es. Für viele Unternehmen bedeutet dies praktisch, dass kein dediziertes Front-End-Team erforderlich ist.
  • WENIGER und SASS Unterstützung: Unter den äußerst beliebten CSS-Frameworks ist Bootstrap das einzige, das sowohl LESS als auch SASS unterstützt. Ja, ich weiß, Sie verwenden nicht WENIGER (wie es kein Entwickler mit Selbstachtung tun sollte, oder?), Aber hey, es gibt massive Projekte, die auf WENIGER angewiesen sind. Natürlich können Sie keine auswählen und Ihre einfachen CSS-Dateien ausschreiben.

Bootstrap Cons

Nichts ist ohne Preis, oder? Nun, Bootstrap ist keine Ausnahme. Im Laufe der Zeit wurde Bootstrap von Designern und UI-Experten schwer beschossen. Hier ist der Grund:

  • UX-Monotonie: Die Tatsache, dass Bootstrap über eine so große Sammlung integrierter Funktionen verfügt, führt zu Websites, die allzu vertraut und ehrlich gesagt langweilig aussehen. Sie müssen nur zum gehen offizielle Beispiele um zu sehen, wie nervig die Standardeinstellungen sind. Suchen Sie einfach nach “Alle Bootstrap-Websites sehen gleich aus” und Sie werden wissen, was ich meine. ��
  • Styling-Probleme: Bootstrap ist ein Framework, das als Stellungnahme angesehen werden kann. Mit anderen Worten, es enthält Ideen zu Layouts, und Sie arbeiten besonders hart, wenn Sie möchten, dass es anders aussieht / sich anders verhält. Berücksichtigen Sie die Standard-CSS-Haltepunkte für Bildschirmbreiten: Ein mittelgroßer Bildschirm für Bootstrap beginnt bei einer Gerätebreite von 768 Pixel. Und was ist, wenn Sie beispielsweise das Limit von 600px anstreben möchten? Nun, viel Glück damit! Dies gilt auch für fast alle anderen Komponenten in Bootstrap: Zeilen und Container haben ihre Standardauffüllung, Schaltflächen haben Farben und Ränder, die ohne großen Aufwand nur sehr schwer zu überschreiben sind, und so weiter.

Möchte Beherrsche den Bootstrap? Schau dir das an Online-Kurs von Brad Traversy.

Stiftung

Wenn Technologien Religionen wären, würden sich die Leute von Foundation und Bootstrap gegenseitig um das Blut bemühen. Keine Diskussion über moderne CSS-Frameworks ist vollständig, ohne Foundation zu erwähnen.

Kopf über die Stiftung Webseite, und Sie können nicht anders, als die Zeile zu bemerken: “Das fortschrittlichste reaktionsschnelle Front-End-Framework der Welt.” Auf den ersten Blick scheint es ein großer Anspruch zu sein, eine Marketingkampagne durchzuführen.

Anhänger des Foundation-Frameworks wissen jedoch, dass dies zumindest eine gewisse Wahrheit ist. Foundation wurde entwickelt, um auf natürliche Weise zum Rails-Framework zu passen, und einige der „zenartigen“ Leitprinzipien von Rails sind bei der Arbeit zu sehen.

Wenn Sie beispielsweise eine Zeile mit zwei Elementen auf kleinen Bildschirmen, drei auf mittleren und vier auf großen Bildschirmen möchten, sieht der entsprechende Code in Foundation folgendermaßen aus:

Im Vergleich zu früheren Bootstrap-Versionen finde ich dies sehr intuitiv und leicht zu merken. Keine zwölf Spaltengitter mehr und herausfinden, was 4/12 sein soll!

Foundation ist zwar viel weniger beliebt als Bootstrap, für viele erfahrene Front-End-Entwickler jedoch ein Geschäftsgeheimnis.

Vorteile des Foundation Frameworks

Foundation weist einige ungewöhnliche Merkmale aller CSS-Frameworks auf, die wir in diesem Artikel berücksichtigen werden:

  • Volles Werkzeug: Es ist technisch falsch zu sagen, dass Foundation ein CSS-Framework ist. Ich meine, das ist es, aber es wurde als große und modulare Sammlung von Tools entwickelt, die darauf abzielen, fast alle Arten von Front-End-Problemen zu lösen. Es gibt separate Framework-Angebote für Websites und E-Mails, die stark für die jeweiligen Domains optimiert sind. Foundation verfügt außerdem über eine Befehlszeilenschnittstelle (Command Line Interface, CLI), die für Entwickler, die mit Webpack oder anderen Modulbündlern arbeiten, wie Musik klingt.
  • Extreme Flexibilität: Im Gegensatz zu Bootstrap wurde Foundation entwickelt, um dem Front-End-Entwickler die volle Kontrolle über seine Benutzeroberflächen zu geben. Infolgedessen wird sich Foundation für den Neuankömmling langweilig und enorm komplex fühlen. Der Grund dafür ist jedoch, dass Foundation Ihnen keine Stilsprache aufzwingt, sondern genau das sein möchte, was es ist: ein hervorragendes CSS-Framework.
  • Mehr als nur UI-Komponenten: Foundation verfügt zwar über die übliche Sammlung von UI-Elementen, geht jedoch weit über die Pflichterfüllung hinaus. Die Entwickler haben ein erweitertes Responsive Image-System, eine Preistabellenkomponente (ja, die zur Anzeige verschiedener Preispläne verwendet), Formularvalidierung, Unterstützung von rechts nach links, Responsive Embeds und mehr integriert. Ich möchte noch einmal betonen, dass dies für die meisten einfachen Websites ein Overkill ist, für große jedoch ein Segen, den erfahrene Entwickler erkennen werden.
  • Schulung und Beratung: Während Bootstrap von Twitter erstellt wird, ist es ein Nebenprojekt und ein sehr kleiner Teil des Gesamtbildes. Das Unternehmen hinter der Stiftung (ZURB) ist jedoch bestrebt, diese zu nutzen, weiterzuentwickeln und zu fördern. Für Großkunden werden Schulungen und professionelle Beratung angeboten. Dies ist ideal für Unternehmen, die auf massive Projekte abzielen und bereit sind, dafür zu zahlen.

Nachteile des Foundation Framework

Die Stärken eines Frameworks werden aus entgegengesetzter Sicht zu seinen Schwächen. Deshalb ist Foundation möglicherweise nicht die beste Wahl für Ihr Projekt:

  • Kleine (er) Gemeinschaft: Die Foundation-Community ist viel kleiner als die von Bootstrap. Wenn Sie etwas Exotisches ausprobieren und nicht weiterkommen, sind die Chancen geringer, relevante Hilfe zu finden. Ich würde dies jedoch für alle praktischen Zwecke hinzufügen; Es gibt genug Community da draußen. Es ist nur so, dass es mehrere Größenordnungen kleiner ist als das von Bootstrap, sodass Sie möglicherweise nicht sofort Lösungen finden.
  • Komplexität: Wenn Sie an Bootstrap oder etwas Einfaches oder Schlimmeres an Vanille-CSS gewöhnt sind, wird Foundation sich wie eine unendliche Explosion der Komplexität anfühlen. Ebenen in Ebenen, Komponenten mit Komponenten, endlose Anpassungsmöglichkeiten. . . Schon bald werden Sie anfangen, die Nützlichkeit des Lebens selbst in Frage zu stellen! Andererseits hat die Stiftung ein ganz anderes Ziel und kann nicht dafür verantwortlich gemacht werden.
  • Zu viele Optionen: Manchmal möchte man einfach nur Scheiße machen und sich später um Perfektion sorgen. In solchen Zeiten ist es frustrierend, zu viele Optionen mit geringfügigen Abweichungen zu erhalten. Denken Sie beispielsweise daran, ein Subway-Sandwich bestellen zu müssen, wenn Sie so hungrig sind, dass Sie Schlamm essen könnten. Natürlich ist Foundation nicht für solche Zeiten.
  • Talentverfügbarkeit: Da Foundation (viel) weniger beliebt ist als Bootstrap, ist das verfügbare Talent viel geringer. In der Regel kennt jeder neue Mitarbeiter Bootstrap mit ziemlicher Wahrscheinlichkeit, hat jedoch keine Ahnung von Foundation. Lernen braucht Zeit und es ist ein Luxus, den nicht alle Teams haben können.

Bulma

Bulma ist ein relativ neuer Anbieter auf dem Schlachtfeld der CSS-Frameworks und hat sich in kurzer Zeit einen Namen gemacht. Seine Attraktivität liegt in einem strengen, nur CSS-basierten Ansatz (es gibt keine JavaScript-Komponenten) und eleganten Standardeinstellungen, mit denen viele Entwickler mit einem guten Auge für Design Probleme haben, wenn sie mit Bootstrap arbeiten.

Ein Großteil der Dynamik von Bulma beruht auf hohen Akzeptanzraten bei der Laravel-Community (ein PHP-Webframework, falls Sie es nicht wussten), was Vue.js sicher zu einem Höhepunkt der Popularität verholfen hat unter JavaScript-Frameworks.

Warum sollten Sie sich für das Bulma CSS Framework entscheiden?

Es gibt viele Gründe, Bulma zu mögen und für Ihr nächstes Projekt zu verwenden:

  • Sehr beliebt: Okay, es ist nicht beliebter als Bootstrap, aber es ist beliebter als Foundation. Zum Zeitpunkt des Schreibens hat Bulma mehr als 30.000 Sterne auf Github, rund 3.000 mehr als Stiftungen. Natürlich ist eine Reihe von Github-Sternen keine Metrik des Verdienstes, aber es heißt, dass die Community Bulma gutheißt.
  • Sehr gut lesbare Klassen: Bulma hat für mich die am besten lesbaren CSS-Klassen aller Frameworks, die ich ausprobiert habe. Es gibt auch ein lächerlich leistungsfähiges und einfaches System zum Erstellen von Gittern im Metro-Stil, sogenannte Kacheln (sehen Sie sich einfach den Code in der zweiten Hälfte des Screenshots an und sagen Sie mir, dass Sie nicht beeindruckt sind!).

  • Flache Lernkurve: Bulma ist sehr modular aufgebaut und wurde entwickelt, um die praktischen, alltäglichen Probleme zu lösen, auf die kleinere Teams und einzelne Entwickler stoßen. Sie werden feststellen, dass Bulma sehr einfach zu erlernen ist, obwohl ich denke, dass ein anständiger Hintergrund in CSS immer gut ist, um eine Vorstellung davon zu haben, was unter der Haube vor sich gehen könnte. Dies hilft Ihnen, wenn Sie das Standardverhalten überschreiben möchten.
  • Elegant: Schauen Sie sich unten den Standard-Heldenabschnitt für Bulma an. Genug gesagt!

Bulma hat eine kleine, aber äußerst leidenschaftliche Community. Wenn Sie also den ganzen Flaum beseitigen und dennoch in Rekordzeit elegant aussehende Benutzeroberflächen erstellen möchten, ist Bulma der richtige Weg. Für Bootstrap-Entwickler hat Bulma einen separaten Bereich, in dem sie überzeugen und bei der Migration helfen können.

UIkit

Das, woran man denkt UIkit ist Minimalismus. Minimalismus nicht in Features (tatsächlich bietet er vielleicht die meisten Features aller Frameworks), sondern im Design. Wenn super saubere, elegante, nicht Leerzeichen-schüchterne Designs Ihr Ding sind, hat UIkit Sie abgedeckt.

Schauen Sie sich zum Beispiel die Fortschrittsbalken-Komponente an:

Oder die Bildmarkierungskomponente (eine JS-gesteuerte interaktive Markierung für Bilder):

Oder sogar das bescheidene HTML-Formular:

Wenn dies nicht lautstark nach Eleganz schreit, weiß ich nicht, was es tut. Besuchen Sie einfach die UIkit-Website und sehen Sie sich die unglaublichen Komponenten an. Ich denke, Uikit übernimmt die Krone für das UI-Design und ist dem Material Design von Google mehrere Meilen voraus, es sei denn, Ihr Projektmanager oder Kunde zwingt Ihnen eine bestimmte Stilsprache auf.

Aber gibt es einen Haken, fragen Sie sich? Ja da ist. Wie Bootstrap arbeitet UIkit mit seinem JavaScript. Während Sie jQuery für die DOM-Manipulation verwenden können, ist die Verwendung eines virtuellen DOM-Frameworks wie React nicht möglich.

Außerdem ist Uikit ein in sich geschlossenes System, und Sie können es nicht ohne großen Aufwand ändern oder erweitern.

Semantische Benutzeroberfläche

Ein weiterer Anwärter im Rennen ist Semantische Benutzeroberfläche, das versucht, sich mit vielen Themen und Anpassungen zu unterscheiden. Es gibt mehr als 3000 Themenvariablen, was zu einer enormen Breite führt. Zumindest sagen die Dokumente.

Bootstrap 4 deckt all dies ab und ist auch vollständig anpassbar. Ein Vorteil der semantischen Benutzeroberfläche ist jedoch, dass sie standardmäßig zu gut aussehenden Layouts führt. Trotzdem sieht es nicht besonders gut aus, weshalb ich es später auf meine Liste setze.

Es hat auch eine der steilsten Lernkurven und die Codierungskonventionen sind viel strenger. Versuch es; Ich würde sagen und sehen, ob es nach etwas aussieht, das Sie vielleicht bevorzugen.

Susy

Susy ist derzeit ein wenig bekannter Rahmen, aber es ist eine faszinierende und erfrischende Idee. Susy ist ein weiteres Framework mit reinem Layout. Sie verzichtet auf alle vordefinierten Ideen für Float, Grid, Flexbox, Tabellen oder andere Elemente und lässt Sie das gewünschte Layout erstellen. “Komponieren” ist hier das Schlüsselwort, da Susy für die Erstellung hochmodularer, atemberaubender Layouts mit äußerst komplexen, ungewöhnlichen und präzisen Anforderungen gedacht ist.

In den Händen des erfahrenen Entwicklers ist Susy wie ein Flammenwerfer, der alles andere wegbläst. Kleinere Sterbliche werden es natürlich schaffen, sich die Hände zu verbrennen.

Probieren Sie diese Standardeinstellung (SASS) aus, um sich ein Bild von der Leistungsfähigkeit von Susy zu machen:

// 4 symmetrische, flüssige Säulen
// Dachrinnen sind 1/4 so groß wie eine Säule
// Elemente überspannen 1 weniger Rinne als Spalten
// Container überspannen auch 1 Rinne weniger
$ susy: (
‘Spalten’: Susy-Repeat (4),
“Dachrinnen”: 0,25,
‘verbreiten’: ‘eng’,
‘Container-Spread’: ‘eng’,
);

Ich denke, dass der Code ziemlich selbsterklärend ist, obwohl er nicht für diejenigen gedacht ist, die es eilig haben. �� Susy ist absolut sinnvoll, wenn Sie die Aufblähung, die moderne Frameworks Ihnen auferlegen, satt haben und Layoutanforderungen haben, von denen Sie wissen, dass kein gewöhnliches Framework sie erfüllen kann.

Materialisieren

Wenn Sie in das Materialdesign von Google verliebt sind, ist Materialise ein Rahmen Sie werden es genießen. Das Beste ist, dass es nur eine Handvoll Komponenten und Klassen zu lernen gibt und sich darauf konzentriert, Sie so schnell wie möglich produktiv zu machen. Es gibt nur wenige Anpassungsoptionen, und Materialise folgt dem beliebten 12-Spalten-Rasterformat, das von Bootstrap festgelegt wurde.

Wenn Sie mich jedoch fragen, a Material Design wird so üblich und ist so. . . Standardmäßig flach, dass wir uns ziemlich bald darüber beschweren werden, genauso wie über das Problem, dass alle Websites von Bootstrap gleich aussehen. Trotzdem ist es zunächst ein guter Rahmen.

Rein

Ist Yahoo tot??

Nein, diese Frage ist keine Ablenkung, sondern unterstreicht eine wichtige Beobachtung: Yahoo hat die Reiner Rahmen und unter der BSD-Lizenz veröffentlicht.

Ein kurzer Blick beeindruckt mich und ich frage mich, warum dieses Angebot nicht mehr Menschen bekannt ist. Was Pure macht, ist, dass es sich um ein reines CSS-Framework handelt. �� Tatsächlich haben die Entwickler die Extrameile gegangen und es in verschiedene CSS-Module aufgeteilt, die Sie nach Bedarf importieren können. Wenn Sie also nur das Grid-System benötigen, müssen Sie nicht das gesamte CSS importieren und die Ladezeit der Site verlängern.

Das Pure-Raster gibt es in verschiedenen Varianten: 5-Punkt-, 2-Punkt-, 24-Punkt-Raster usw. Wenn Sie also Spalten erstellen, haben Sie viel mehr Flexibilität. Pure ist standardmäßig nicht das am besten aussehende CSS-Framework, aber ich kann sehen, wie es denjenigen einen Mehrwert bietet, die ein kleines CSS-Problem in ihrer Benutzeroberfläche lösen und sich an den „hilfreichen“ Standardeinstellungen anderer Frameworks festhalten möchten.

Skelett

Wie Sie im Screenshot sehen können, Skelett ist so minimal, dass es sich nicht einmal als CSS-Framework, Bibliothek oder gar Modul bezeichnet. Es ist ein Boilerplate und enthält nur 400 Zeilen Quellcode! Unglaublich? Ich denke schon, aber um die Dinge ins rechte Licht zu rücken, wurde Skeleton für kleine oder kleine Projekte entwickelt, die nur Layouts und Positionierungen benötigen.

Einen Blick wert; Wer weiß, Skeleton könnte das sein, wonach Sie die ganze Zeit gesucht haben!

Milligramm

Der letzte auf der Liste ist Milligramm, Ein CSS-Framework für Geschwindigkeit und Produktivität. Die Entwickler haben die Größe unter 2 KB gehalten, was nach heutigen Maßstäben viel bedeutet.

Ein Milligramm ist eine lustige kleine Version von CSS-Frameworks, mit denen Sie gerne arbeiten werden. Das Erweitern ist einfach und mit ein paar Zeilen benutzerdefiniertem CSS können Sie das Erscheinungsbild nach Ihren Wünschen ändern.

Welches CSS-Framework ist das beste??

Geben Sie zu, Sie haben zuvor ähnliche Fragen gestellt und die folgende enttäuschende Antwort erhalten: keine. �� Die Auswahl eines Frameworks (oder eines Tools oder sogar einer Person in Ihrem Leben) hängt von vielen Faktoren ab. Wenn Sie meinen Rat wollen, hier ist es: Schneiden Sie den Lärm aus. Nur weil die Leute verrückt nach etwas Neuem und Glänzendem sind, heißt das nicht, dass Sie es lernen müssen, sonst werden Sie zurückgelassen. Es ist großartig, neue Dinge auszuprobieren, aber auf der Suche nach dem perfekten Werkzeug im Kreis herumzulaufen, ist eine Verschwendung.

Welches dieser Frameworks haben Sie ausprobiert? Oder ist da draußen etwas Erstaunliches, das ich gerade verpasst habe? Lass es mich bitte in den Kommentaren wissen. Liebe, Hass, zufällige Hallo, alle sind willkommen!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map