10 geriausių CSS struktūrų, skirtų kūrėjams

Kažkada girdėjau kūrėjo anekdotą: „NASA nusileido robotams į Marsą. Čia mes vis dar stengiamės sutelkti savo jėgas į centrą!“ Ir man blogai jaustis, kad šis pokštas turi daug tiesos. Atlikti darbus, kurie skamba taip lengvai ir sveiku protu, kaip sukoncentruoti dėžę dėžutėje, yra nepaprastai sudėtinga. Nebent jūs su tuo anksčiau susidūrėte. Ir kažkur išsaugojo kodo fragmentą. Ir net jei jums pavyks tai atsisakyti, visada kyla baimė, kad jis gali siaubingai sudužti kažkurioje kvailoje naršyklėje! CSS susieja pirmąją „būtinų internetinių blogybių“ vietą kartu su „JavaScript“. Tai standartas, kuris vystėsi atsitiktinai, skirtingai aiškino skirtingus naršyklių gamintojus, ir dabar yra toks kupinas prieštaravimų, kad niekas nedrįsta savęs vadinti „CSS ekspertu“.


Tad nenuostabu, kad CSS sistemos atsirado laikui bėgant ir atėmė didžiąją dalį skausmo. Šiandien negalime įsivaizduoti kodavimo be savo mėgstamos CSS sistemos, nes taikymas keliems ekrano dydžiams tapo būtinybe.

Bet kaip jūs žinote, kad jūsų sistema yra geriausia šiam darbui? Be to, jei dar nesinaudojote „end-end“ plėtra, kokia sistema turėtų padėti jums pasirinkti?

Šis įrašas žvilgteli į priekinį programos vystymo kraštovaizdį ir lygina priekinius dalyvius tarp CSS struktūrų. Taigi jei pavargote nuo CSS taisyklių kodavimo rankomis, pasinerkite į greitą pagalbą!

Bagažinė

„Twitter“ iniciatyva, Bagažinė atsižvelgia į tai, kad pristato reaktyvų dizainą dideliu mastu. Tai buvo pirmasis pagrindas, kurio tikslas buvo skatinti „pirmiausia mobilusis“ filosofiją. Mažesniems ekrano dydžiams nebebuvo skirtas atskiras projektas; jums tereikėjo įtraukti atitinkamas „Bootstrap“ klases, o dizainas automatiškai prisitaikys prie skirtingų ekrano dydžių (gerai, beveik).

Reaktyvus dizainas „Bootstrap“ (4.0 ir 3.0)

„Bootstrap“ pasiekė reaktyvų dizainą pristatydamas tinklelio idėją. Tinklelis yra nematomas ekrano padalijimas į stulpelius (kartu su pločiu). Pvz., Jei turite tris „langelius“, kuriuos norite išdėstyti greta dideliuose ekranuose, bet vertikaliai – mažesniuose ekranuose, tai darytumėte taip:

Viena iš trijų kolonų

Viena iš trijų kolonų

Viena iš trijų kolonų

Dabartinė populiari „Bootstrap“ versija yra 4, kuri buvo kapitalinis remontas per 3,3 seriją. Aukščiau pateiktoje sintaksėje yra tai, kaip jūs koduojate „Bootstrap 4“, kuris didžiąją savo elegancijos dalį lemia neapdorota „Flexbox“ ir kitas šiuolaikines išdėstymo funkcijas, kurias tiesiogiai palaiko naršyklės. Apatinėse „Bootstrap“ versijose tinklelis buvo apibrėžtas kaip iš viso 12 stulpelių, todėl atsirado toks kodas kaip

kad padalytumėte dideliems įrenginiams, ekranų plotį užimkite trečdalį ekrano pločio, o vidutinio dydžio įrenginiams – pusę jo. Dabar sintaksė yra daug malonesnė, nors ji reikalauja žinių apie „Flexbox“.

„Bootstrap“ pranašumai

„Bootstrap“ yra daug, kas patinka, ypač „full stack“ kūrėjams:

  • Greitas prototipų sudarymas: Naudojant „Bootstrap“ beveik nereikia galvoti apie keblią CSS padėties nustatymą ir naršyklės nesuderinamumą. Viskas, ką jums reikia padaryti, išrašykite HTML, o tada pritaikę atitinkamas CSS klases reagavimas atgyja.
  • Didelė ekosistema: Nuo šiandien „Bootstrap“ yra didžiausia ekosistema tarp priekinių rėmų. Naudojant „Bootstrap“ sukurtų svetainių išdėstymų, temų, administratoriaus skydų, vartotojo sąsajos komponentų ir kt. Skaičius yra nepaprastas ir nuolat tobulėja. Tiek konsultantams, tiek produktų kompanijoms tai reiškia, kad iš anksto paruošti gaminiai ir bendruomenės palaikymas visada bus gausus.
  • Remia „Twitter“: Atsirandanti atvirojo kodo tendencija yra komercinio subjekto remiamų projektų padaugėjimas. Dažniausiai šie subjektai sukuria pelningą verslą, remdamiesi pasiūlymu. Kotlin („JetBrains“), „WordPress“ („Automattic, Inc.“), kampinis („Google“), „React“ („Facebook“) ir kt. Yra keli pavyzdžiai. Kai projektą remia nusistovėjęs subjektas ir tai nėra vieno asmens pasirodymas, tai bendruomenei (ypač verslo klientams) suteikia tikėjimo, kad projektas turės aiškų planą ir ilgalaikę ateitį..
  • Didelė komponentų kolekcija: „Bootstrap“ siūlo beveik visus UI komponentus, kurių jums gali prireikti. Naršymas, formos, kortelės, moduliai, mygtukai, ženkleliai, eigos juostos, perspėjimai. . . Jūs tai vadinate, o „Bootstrap“ ją turi. Daugeliui kompanijų tai praktiškai sumažina poreikį turėti specialią „front-end“ komandą.
  • Mažesnė ir mažesnė parama: Tarp ypač populiarių CSS schemų „Bootstrap“ yra vienintelis, palaikantis tiek mažesnį, tiek ir SASS. Taip, aš žinau, jūs nenaudojate MAŽESNIO (kaip neturėtų elgtis joks save gerbiantis kūrėjas, tiesa?), Bet, hei, yra masinių projektų, kurie remiasi MAŽIAU. Žinoma, jūs negalite pasirinkti nei vieno, nei parašyti savo paprastų CSS failų.

„Bootstrap“ minusai

Nieko nėra be kainos, ar ne? Na, „Bootstrap“ nėra išimtis. Laikui bėgant dizaineriai ir UI ekspertai „Bootstrap“ patyrė didelę ugnį. Štai kodėl:

  • UX monotonija: Pats faktas, kad „Bootstrap“ turi tokią didelę integruotų prekių kolekciją, sukelia svetaines, kurios atrodo pernelyg pažįstamos ir, sąžiningai, nuobodžios. Jums tereikia pereiti prie oficialūs pavyzdžiai norėdami pamatyti, kiek daug akių turi nutylėjimai. Tiesiog ieškokite „visos internetinės įkrovos svetainės atrodo vienodai“ ir žinosite, ką turiu omenyje. ��
  • Stiliaus sunkumai: „Bootstrap“ yra tai, ką galima laikyti pagrįsta sistema. Kitaip tariant, jis turi idėjų apie maketus ir verčia jus dirbti ypač sunkiai, jei norite, kad jis atrodytų / elgtųsi kitaip. Apsvarstykite numatytuosius ekrano pločio CSS lūžio taškus: vidutinio dydžio „Bootstrap“ ekranas yra tas, kurio įrenginio plotis yra 768 pikseliai. O kas, jei norite nukreipti, tarkime, į 600 pikselių ribą? Na, sėkmės su tuo! Tas pats ir su beveik visais kitais įkrovos juostos komponentais: eilutėse ir konteineriuose yra numatytasis padėklas, mygtukai turi spalvas ir kraštines, kurias labai sudėtinga perrašyti be daug darbo ir pan..

Norėti įsisavinti „Bootstrap“? Patikrinkite tai internetinis Brad Traversy kursas.

Fondas

Jei technologijos būtų religijos, Fondas ir „Bootstrap“ vaikinai būtų laukiami vienas kito kraujo. Nė viena diskusija apie šiuolaikines CSS sistemas nėra baigta, neminint Fondo, taigi, mes einame toliau.

Vadovauti fondui Interneto svetainė, ir jūs negalite nepastebėti eilutės: „Pažangiausia reaguojanti sąsaja su pasauliu“. Iš pirmo žvilgsnio tai atrodo kaip aukšta pretenzija į rinkodaros kampaniją.

Tačiau fondo sistemos šalininkai žino, kad yra bent šiek tiek tiesos. Fondas buvo sukurtas taip, kad natūraliai atitiktų „Rails“ sistemą, o darbe galima pastebėti kelis Rails „zen-like“ principus..

Pvz., Jei norėtumėte eilutės, kurioje būtų du elementai mažuose ekranuose, trys – vidutiniuose ir keturi – dideliuose, ekvivalentinis kodas fonde atrodys taip:

Palyginti su ankstesnėmis „Bootstrap“ versijomis, man atrodo, kad tai labai intuityvu ir lengvai įsimenama. Nebereikia dvylikos stulpelių tinklelių ir supranti, koks turėtų būti 4/12!

Nors „Foundation“ yra daug mažiau populiarus nei „Bootstrap“, tai yra komercinė paslaptis daugeliui ekspertų, veikiančių kaip „end-end“.

Fondo sistemos privalumai

Fondas turi keletą neįprastų savybių iš visų CSS struktūrų, kurias aptarsime šiame straipsnyje:

  • Visas įrankis: Techniškai neteisinga sakyti, kad fondas yra CSS sistema. Aš turiu omenyje, kad yra, bet jis buvo sukurtas kaip didelis ir modulinis įrankių rinkinys, kurio tikslas – išspręsti beveik visas priekinio tinklo problemas. Tinklalapiams ir el. Laiškams siūlomi atskiri pagrindų pasiūlymai, labai pritaikyti jų atitinkamiems domenams. Fondas taip pat aprūpintas komandų eilutės sąsaja (CLI), kuri skambės kaip muzika kūrėjams, įpratusiems dirbti su „Webpack“ ar kitais modulių paketų kūrėjais..
  • Nepaprastas lankstumas: Skirtingai nuo „Bootstrap“, fondas buvo pastatytas tam, kad programinės įrangos kūrėjai galėtų visiškai valdyti savo vartotojo sąsajas. Dėl to Fondas jausis nuobodus ir nepaprastai sudėtingas naujokams. Tačiau priežastis ta, kad Fondas nepriverčia jūsų stiliaus stiliaus, bet siekia būti kuo jis yra: puiki CSS sistema.
  • Ne tik UI komponentai: Nors fondas turi įprastą vartotojo sąsajos elementų kolekciją, jis žymiai viršija pareikalavimą. Kūrėjai įtraukė patobulintą reaguojančių vaizdų sistemą, kainų lentelės komponentą (taip, tą, kuris buvo naudojamas įvairiems kainų nustatymo planams rodyti), formos patvirtinimą, palaikymą iš dešinės į kairę, reaguojančius įdėjimus ir dar daugiau. Norėčiau dar kartą pabrėžti, kad tai yra daugumos paprastų svetainių perteklius, tačiau didelėms svetainėms tai yra palaima, kurią patyrę kūrėjai atpažins..
  • Mokymai ir konsultacijos: Nors „Bootstrap“ sukūrė „Twitter“, tai yra šalutinis projektas ir labai nedidelė viso paveikslo dalis. Tačiau fondo įmonė (ZURB) yra įsipareigojusi jį naudoti, plėtoti ir skatinti. Stambiems klientams siūlomi mokymo kursai ir profesionalios konsultacijos, o tai puikiai tinka įmonėms, kurios orientuojasi į didelius projektus ir nori mokėti.

Fondo struktūros trūkumai

Vienos sistemos stipriosios pusės tampa jos silpnybėmis, žiūrint iš priešingo požiūrio taško. Štai kodėl fondas gali būti ne pats geriausias jūsų projekto pasirinkimas:

  • Maža (er) bendruomenė: Fondo bendruomenė yra daug mažesnė nei „Bootstrap“, o jei bandote ką nors egzotiško ir užstrigote, tikimybė rasti reikiamą pagalbą yra mažesnė. Tačiau norėčiau pridurti, kad visais praktiniais tikslais; ten yra pakankamai bendruomenės. Tiesiog tai yra keliais laipsniais mažesni nei „Bootstrap“, todėl galbūt nerasite sprendimų iškart.
  • Sudėtingumas: Jei esate įpratę prie „Bootstrap“ ar kažko paprasto ar, dar blogiau, prie vanilės CSS, fondas jausis kaip begalinis sudėtingumo sprogimas. Sluoksniai sluoksniuose, komponentai su komponentais, begalinės pritaikymo parinktys. . . Gana greitai pradėsite abejoti paties gyvenimo naudingumu! Bet vėlgi, fondo tikslas yra visai kitoks ir jo negalima dėl to kaltinti.
  • Per daug galimybių: Kartais norisi tiesiog pasidaryti šūdą ir vėliau susirūpinti dėl tobulumo. Tokiais laikais yra nelinksma pateikti per daug galimybių su nedideliais variacijomis. Pvz., Pagalvokite apie tai, jei turėsite užsakyti „Subway“ sumuštinį, kai tiek daug alkanas, kad galėtumėte valgyti purvą. Natūralu, kad Fondas nėra panašus.
  • Talentų prieinamumas: Kadangi fondas yra (daug) mažiau populiarus nei „Bootstrap“, turimų talentų yra daug mažiau. Paprastai apie bet kokį naują samdymą beveik tikėtina, kad jis žinos „Bootstrap“, tačiau neturės apie tai informacijos apie pagrindą. Mokytis reikia laiko, ir tai yra prabanga, kurią gali turėti ne visos komandos.

Bulma

Bulma yra palyginti naujas CSS struktūrų mūšio dalyvis ir per trumpą laiką paskelbė savo vardą. Jos patrauklumas slypi griežtoje, tik CSS strategijoje (nėra „JavaScript“ komponentų) ir elegantiškuose numatytuosiuose nustatymuose, kurie yra problema, su kuria susiduria daugelis kūrėjų, kurie turi gerą dizainą, dirbdami su „Bootstrap“..

Dauguma „Bulma“ impulsų kyla dėl aukšto įvaikinimo lygio su „Laravel“ (PHP žiniatinklio programa, jei dar nežinojote) bendruomenės, kuri, be abejo, yra būtent tai, kas padėjo „Vue.js“ pasiekti populiarumo viršūnę. tarp „JavaScript“ schemų.

Kodėl verta rinktis „Bulma CSS Framework“

Yra daugybė priežasčių, kodėl patinka „Bulma“ ir naudoti ją kitame projekte:

  • Gana populiarus: Gerai, kad jis nėra populiaresnis nei „Bootstrap“, tačiau jis yra populiaresnis nei „Foundation“. Pradėjus rašyti, „Bulma“ „Github“ turi 30 000 žvaigždžių, maždaug 3 000 + daugiau nei fondai. Žinoma, keletas „Github“ žvaigždžių nėra nuopelnas, tačiau sakoma, kad bendruomenė pritaria „Bulmai“..
  • Labai lengvai skaitomos pamokos: Man „Bulma“ yra skaitomiausios CSS klasės iš visų mano bandytų rėmų. Taip pat yra juokingai galinga ir paprasta sistema, skirta kurti metro stiliaus tinklelius, vadinamus plytelėmis (tiesiog pažiūrėkite į kodą ekrano kopijos antroje pusėje ir pasakykite, kad nesate sužavėtas!).

  • Plokšti mokymosi kreivė: „Bulma“ yra labai modulinė ir buvo sukurta praktinėms, kasdieninėms problemoms, su kuriomis susiduria mažesnės komandos ir atskiri kūrėjai, spręsti. Jūs pastebėsite, kad „Bulma“ yra labai lengva išmokti, nors aš manau, kad tinkamas CSS fonas visada yra geras, norint įsivaizduoti, kas gali būti po gaubtu. Tai padės jums, kai norite nepaisyti numatytojo elgesio.
  • Elegantiškas: Na, pažiūrėkite į žemiau pateiktą numatytąjį „Bulma“ herojaus skyrių. Pakankamai pasakė!

„Bulma“ turi nedidelę, tačiau nepaprastai aistringą bendruomenę, taigi, jei norite atsikratyti visų pūkų ir vis dėlto norite per rekordiškai trumpą laiką sugalvoti elegantiškos išvaizdos vartotojo sąsajas, „Bulma“ yra kelias. „Bootstrap“ kūrėjams „Bulma“ turi atskirą skyrių, kad įtikintų ir padėtų jiems pereiti.

UIkit

Dalykas, kuris ateina į galvą galvojant UIkit yra minimalizmas. Minimalizmas ne bruožuose (tiesą sakant, jis siūlo bene geriausias visų rėmų savybes), o dizaine. Jei jūsų dalykas yra labai švarus, elegantiškas, be tarpo, drovus tarpas, UIkit jus įtraukė.

Pavyzdžiui, pažvelkite į progreso juostos komponentą:

Arba vaizdo žymeklio komponentas (JS valdomas interaktyvus vaizdų žymeklis):

Arba net nuolanki HTML forma:

Jei tai neskleidžia elegancijos plaučių viršuje, aš nežinau, ką tai daro. Tiesiog eikite į UIkit svetainę ir patikrinkite visus neįtikėtinus komponentus, kuriuos ji siūlo. Jei jūsų projekto vadovas ar klientas nepriverčia jūsų apibūdinti tam tikros stiliaus kalbos, manau, kad „Uikit“ užima UI dizaino karūną ir yra keliomis myliomis priekyje „Google“ medžiagos dizaino.

Bet ar yra laimikis, jums įdomu. Taip, ten yra. Kaip ir „Bootstrap“, „UIkit“ veikia su „JavaScript“ ir nors jūs galite naudoti „jQuery“ DOM manipuliavimui, naudoti virtualią DOM sistemą, tokią kaip „React“, neįmanoma.

Be to, „Uikit“ yra autonominė sistema, ir jūs negalėsite jos modifikuoti ar išplėsti neįdėdami didelių pastangų.

Semantinė vartotojo sąsaja

Kitas varžovas varžybose yra Semantinė vartotojo sąsaja, kuris bando išsiskirti iš daugybės temų ir pritaikymo. Yra daugiau nei 3000 juos keičiančių kintamųjų, todėl gaunamas didžiulis plotis. Arba taip sako dokumentai.

„Bootstrap 4“ rūšis apima visa tai ir taip pat yra visiškai pritaikoma, tačiau vienas „Semantic“ vartotojo sąsajos pranašumas yra tas, kad pagal numatytuosius nustatymus gaunami gražūs maketai. Vis dėlto tai nėra pats geriausias vaizdas iš dėžutės, todėl vėliau įtraukiau į savo sąrašą.

Jis taip pat turi vieną iš griežčiausių mokymosi kreivių, o kodavimo taisyklės yra daug griežtesnės. Pabandyk tai; Aš sakyčiau ir pažiūrėčiau, ar tai atrodo kažkas, ko jums gali patikti.

Susy

Susy šiuo metu yra mažai žinoma sistema, tačiau tai žavi ir gaivi idėja. Kitas gryno išdėstymo pagrindas – „Susy“ atsisako visų iš anksto apibrėžtų plūdės, tinklelio, „Flexbox“, lentelių ar bet ko kito idėjų ir leidžia jums sudaryti norimą išdėstymą. „Rašyti“ yra raktinis žodis čia, nes „Susy“ yra skirta sukurti labai modulinius, stulbinančius išdėstymus su ypač sudėtingais, neįprastais ir tiksliais poreikiais..

Eksperto kūrėjo rankose Susy yra tarsi liepsnosvaidis, nei nupučia visa kita. Mažesniems mirtingiesiems, žinoma, pavyks sudeginti rankas.

Norėdami sužinoti apie Susy galią, imkite šį numatytąjį nustatymą (SASS):

// 4 simetriškos skystos kolonos
// latakai yra 1/4 kolonėlės dydžio
// elementai apima 1 mažiau latako nei stulpeliai
// konteineriai taip pat apima 1 mažiau latakų
$ susy: (
‘stulpeliai’: susy-pakartoti (4),
‘latakai’: 0,25,
‘skleisti’: ‘siauras’,
‘konteinerių paskirstymas’: ‘siauras’,
);

Manau, kad kodas yra gana savaime suprantamas dalykas, nors jis nėra skirtas skubantiems. �� Susy yra visiškai prasminga, jei esate pavargęs nuo visko, kurį jums reikalauja šiuolaikiniai rėmai, ir turite išdėstymo poreikių, kurie, jūsų supratimu, negali padėti..

Realizuokis

Jei esate įsimylėjęs „Google“ medžiagos dizainą, „Materialize“ yra: sistema jums patiks. Geriausia tai, kad joje yra tik keletas komponentų ir klasių, kurių reikia išmokti, ir jis yra skirtas kuo produktyvesniam jūsų produktyvumui. Tinkinimo parinkčių yra nedaug, ir „Materialize“ laikosi populiariojo „Bootstrap“ nustatyto 12 stulpelių tinklelio formato.

Jei jūs manęs paklaustumėte, a Medžiagos dizainas tampa tokia įprasta ir tokia yra. . . Pagal numatytuosius nustatymus, kad gana greitai mes tuo skundžiamės, kaip ir dėl „Bootstrap“ visų svetainių, panašių į tą pačią problemą. Vis dėlto tai yra gera pradžia.

Grynas

Ar „Yahoo“ mirė??

Ne, šis klausimas nėra nukreipimas, bet pabrėžia svarbų pastebėjimą: „Yahoo“ pastatė Gryna sistema ir išleistas pagal BSD licenciją.

Greitas žvilgsnis mane sužavėjo, ir man įdomu, kodėl šis pasiūlymas nežinomas daugiau žmonių. Šiaip ar taip, grynas grynas dalykas yra tai, kad tai yra gryna CSS sistema. �� Tiesą sakant, kūrėjai nuėjo dar vieną mylią ir padalijo ją į skirtingus CSS modulius, kuriuos galite importuoti pagal poreikį. Taigi, jei jums reikia tik tinklelio sistemos, nereikia importuoti visos CSS ir pridėti prie svetainės įkėlimo laiko..

„Pure“ tinklelis yra kelių skonių: 5 taškų, 2 taškų, 24 taškų ir tt, taigi, kurdami stulpelius, turite daug daugiau lankstumo. Gryna pagal nutylėjimą nėra geriausiai atrodanti CSS sistema, tačiau aš suprantu, kaip ji sukuria pridėtinę vertę tiems, kurie nori išspręsti mažą CSS problemą savo vartotojo sąsajoje ir susigūžti esant „naudingiems“ numatytiesiems nutylėjimams, kuriuos turi kitos sistemos..

Skeletas

Kaip matote ekrano kopijoje, Skeletas yra toks minimalus, kad net nevadina savęs CSS sistema, biblioteka ar net moduliu. Tai yra kaitlentė ir joje yra tik 400 šaltinio kodo eilučių! Neįtikėtina? Manau, kad taip, tačiau, norint pažvelgti į perspektyvą, „Skeleton“ buvo sukurtas mažiems ar mažiems projektams, kuriems reikia ne tik išdėstymo, bet ir išdėstymo..

Verta pažiūrėti; galų gale, kas žino, skeletas gali būti tai, ko jūs visą laiką ieškojote!

Miligramas

Paskutinis sąraše yra Miligramas, CSS sistema, sukurta greičiui ir produktyvumui. Kūrėjai išsaugojo jį iki 2 KB, o tai, pasak šių dienų standartų, reiškia daug.

Miligramas yra įdomus mažas CSS rinkinys, su kuriuo vertinsite darbą. Pratęsti ją lengva, o naudodamiesi keliomis pasirinktinio CSS eilutėmis, galite pakeisti jos išvaizdą taip, kaip norite.

Taigi, kuri CSS sistema yra geriausia?

Pripažink, jūs jau anksčiau uždavėte panašių klausimų ir gavote šį nuviliantį atsakymą: nė vieno. �� Karkaso (arba įrankio, ar net žmogaus, jūsų gyvenime) pasirinkimas šiuo klausimu priklauso nuo daugelio veiksnių. Jei norite mano patarimo, štai jis: Iškirpkite triukšmą. Tiesiog todėl, kad žmonės išprotėja dėl kažko naujo ir blizgaus, dar nereiškia, kad jūs turite to išmokti ar būsite paliktas. Išbandyti naujus dalykus yra puiku, tačiau važiuoti ratais ieškant tobulo įrankio yra veltui.

Taigi, kurias iš šių schemų jūs bandėte? O gal kažkas ten stebina, ko aš tiesiog praleidau? Prašau pranešti man komentaruose. Meilė, neapykanta, atsitiktiniai svečiai, visi laukiami!

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