Muuda oma CSS-i disainilahendusi brauseris CSS George'iga

Oled sa kunagi tahtnud teha otseseid muudatusi oma brauseris ilma CSS-faile tagasi lülitamata? Üks lahendus on Chrome'i arendustööriistad, kuid mõned arendajad eelistavad lihtsamat töövoogu.

Seal on CSS George See on tasuta brauseri redigeerimise tööriist töötab LESS peal ja see on algatatud a lihtne JavaScript-fail.

Enamik arendajaid eelistab brauseripõhine redaktor kuna kõik ei kasuta LESS eelkompilaatorit. Aga CSS George töötab LESS keskkonnas mida saab kiiresti paigaldada npm kaudu.

Kui teil on installitud npm, saate selle lihtsa koodi käivitada lisage lähtefailid teie praegusele projektile:

 npm installimine --save-dev css-george 

Või saate tõmmake George.js faili GitHubist, kus see asub kõigi teiste lähtefailide kõrval. Kogu projekt on vaba ja avatud lähtekoodiga, nii et saate seda teha lae alla täielik koopia GitHubist, kui te ei soovi npm-i kasutada.

Koos .js saidi päisesse lisatud fail, võite alustada täitma George'i funktsioone otse brauserist. Et avage redaktori aken, klõpsa tilde klahvile, mis on ligipääsetav enamiku klaviatuuride vasakus ülanurgas asuvast Shift +'st. A uus aken peaks ilmuma selline, mis näeb välja selline:

Sellelt ekraanilt saate muutke LESS muutujaid kasutatakse värvide ja fondi suuruste või fontide perekondade jaoks.

See on koht, kus LESS plugin muutub vajalikuks sest sa pead rääkima CSS George'ile millised muutujad lisada. Kui nad on loodud, saate lihtsalt avage CSS George brauseri redaktor ja mine linna.

Loodan, et see tööriist on ilmselge ei peaks olema lisatud käitusaja jooksul. Kui te ei soovi külastajaid konkreetselt lubada muutke lehekülje värvi ja stiili, mis üldiselt ei ole hea mõte. Aga selleks kohalikud testid, CSS George on haruldane tööriist, mis pakub kasulikkust kõigile frontendiarendajatele.

Sa saad vaata seda elavat CSS George demo lehel või lae alla täielik koopia npm või GitHub repo kaudu.