Ik werk met Bootstrap 2.0.3 met LESS. Ik wil het uitgebreid aanpassen, maar ik wil vermijden om waar mogelijk wijzigingen in de bron aan te brengen, aangezien wijzigingen in de bibliotheken vaak voorkomen. Ik ben nieuw bij LESS, dus ik weet niet hoe de compilatie volledig werkt. Wat zijn enkele best practices voor het werken met op LESS of LESS gebaseerde frameworks?
Antwoord 1, autoriteit 100%
Mijn oplossing is vergelijkbaar met die van jstam, maar ik vermijd waar mogelijk wijzigingen aan de bronbestanden aan te brengen. Aangezien de wijzigingen aan bootstrap frequent zullen zijn, wil ik de nieuwste bron kunnen downloaden en minimale wijzigingen kunnen aanbrengen door mijn wijzigingen in afzonderlijke bestanden te bewaren. Natuurlijk is het niet helemaal kogelvrij.
-
Kopieer de bootstrap.less en variables.less naar de bovenliggende directory. Hernoem bootstrap.less naar theme.less of wat je maar wilt. Uw directory-directorystructuur zou er als volgt uit moeten zien:
/Website theme.less variables.less /Bootstrap ... -
Werk alle verwijzingen in theme.less bij zodat ze naar de bootstrap-submap verwijzen. Zorg ervoor dat naar variabelen.less wordt verwezen vanuit de bovenliggende map en niet vanuit de bootstrap-directory, zoals:
... // CSS Reset @import "bootstrap/reset.less"; // Core variables and mixins @import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "bootstrap/mixins.less"; // Grid system and page structure @import "bootstrap/scaffolding.less"; @import "bootstrap/grid.less"; @import "bootstrap/layouts.less";…
-
Voeg uw CSS-overschrijvingen toe aan het bestand theme.less onmiddellijk nadat ze zijn opgenomen.
... // Components: Nav @import "bootstrap/navs.less"; @import "bootstrap/navbar.less"; // overrides .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { border-radius: 0 0 0 0; padding: 10px; } .nav-tabs, .nav-pills { text-transform: uppercase; } .navbar .nav > li > a { text-shadow: none; } ... -
Link naar theme.less in plaats van bootstrap.less op je HTML-pagina’s.
Als er een nieuwe versie uitkomt, moeten uw wijzigingen veilig zijn. Je moet ook een verschil maken tussen je aangepaste bootstrap-bestanden wanneer er een nieuwe versie uitkomt. Variabelen en importen kunnen veranderen.
Antwoord 2, autoriteit 20%
Hier heb ik ook mee geworsteld. Aan de ene kant wil ik het bestand variables.less sterk aanpassen met mijn eigen kleuren en instellingen. Aan de andere kant wil ik de Bootstrap-bestanden zo weinig mogelijk wijzigen om het upgradeproces te vergemakkelijken.
Mijn oplossing (voorlopig) is om een LESS-add-on-bestand te maken en dit in het bestand bootstrap.lessin te voegen nadat de variabelen en mixins zijn geïmporteerd. Dus zoiets als dit:
...
// CSS Reset
@import "reset.less";
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon
// Grid system and page structure
@import "scaffolding.less";
...
Op deze manier kan ik de Bootstrap-kleuren of lettertypen opnieuw instellen of extra mixins toevoegen. Mijn code is apart, maar wordt gecompileerd binnen de rest van de Bootstrap-import. Het is niet perfect, maar het is een noodoplossing die voor mij goed heeft gewerkt.
Antwoord 3, autoriteit 14%
Van mijn kant heb ik gewoon een bestand met de naam theme.lessmet een import van boostrap.lesserin, en net daaronder negeer ik (zelfs als het lijkt om slecht te zijn met MINDER, maar goed, het is gemakkelijker te handhaven) de variabelewaarde die ik niet wil bijwerken.
Dit werkt goed voor het hebben van aangepaste waarden voor variabelen in variables.less
Daarna compileer ik mijn theme.less-bestand in plaats van bootstrap.less
Voorbeeld theme.less:
@import "path/to/my/bootstrap.less";
@linkColor: #MyAwesomeColor;
Antwoord 4, Autoriteit 3%
Een veel betere (IMHO) -benadering is om Cue te nemen van de bootswatch GitHub-project genaamd SwatchMaker . Dit project is specifiek afgestemd op het bouwen en beheren van de tientallen bootstrap-thema’s op de website.
De MakefileIN Het project bouwt swatchmaker.less(u kunt het wijzigen op zoiets als customizations.less). Dit bestand bevat een stel import:
@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";
U kunt de swatchMap en bootswatch.lessbestanden naar alles vinden.
Dit is logisch omdat u bootstrap kunt upgraden zonder uw eigen bestanden te beïnvloeden. In feite bevat de Makefileook opdrachten om de nieuwste versie van bootstrap te halen. Zie de README op de projectpagina voor meer.
Als een bonus suggereert de README ook dat u de watchrGem automatisch installeert, die het project automatisch zal bouwen wanneer een .lessbestandswijzigingen.
Antwoord 5, Autoriteit 2%
Als (en alleen als) je de tijd hebt die je het kunt doen als ik. Ik bewaar mijn eigen gewijzigde versie van het raamwerk (en) en bij elke update van het raamwerk heb ik de Documenten gelezen en controleer de bron voor wijzigingen.
Deze oplossing klinkt misschien minder ideaal op de eerste uitstraling, maar ik heb mijn redenen om dit te doen. Ik werk niet met één maar een amalgaam van veel kaders, best practices, reset / normalisatie-stijlbladen enz. En ik weet altijd zeker of er geen update bestaande projecten op enige manier zal veranderen.
Ik werk aan en met mijn eigen aangepaste raamwerk om de volgende redenen.
- Ik strip elk klein beetje uit dat ik niet hoef dingen modulair en klein te houden
- Ik gebruik mijn raamwerk voor klantenbanen en wil a) Weet wat ik precies werk met terwijl b) alles bezitten wat ik aan de klant verkoop. Ik kopieer en gebruik niet gewoon kaders, maar probeer ze te begrijpen en opnieuw te maken
- Ik gebruik mijn raamwerk in combinatie met een CMS en kan niet gewoon vallen en vergeten een raamwerk in een project / start helemaal opnieuw
Antwoord 6, Autoriteit 2%
Ik kwam naar dezelfde oplossing als Joel:
Custom Minder bestanden
Zoals hierboven beschreven: ik maak lokale kopieën voor alle minder bestanden die ik aanmaak: zoals: “Variabelen-Custom.less”, “Alerts-Custom.Less”, “Buttons-Custom.Less”. Dus ik kan enkele normen gebruiken en mijn eigen toevoegingen hebben. Het nadeel is: wanneer Bootstrap wordt bijgewerkt, is het echt moeilijk om te migreren.
Maar er is iets anders:
Overschrijdingsstijlen
Als u rondkijkt voor werkstromen, zie ik vaak dat mensen suggereren om eenvoudig stijlen te negeren. U importeert dus eerst de standaard minder bestanden en voeg vervolgens uw aangepaste aangiften aan de onderkant toe. Het ondersteboven is hier: het is gemakkelijker om bij te werken naar een nieuwere versie. Het nadeel is: het gecompileerde CSS-bestand omvat alle overrides. Sommige CSS-selectors worden twee keer gedefinieerd. Dus de browser moet wat tillen doen om erachter te komen wat je eigenlijk moet toepassen. Dat is niet echt schoon.
Ik vraag me af waarom preprocessors niet slim genoeg zijn om dergelijke dubbele verklaringen op te lossen? Is er een betere werkstroom die ik hier mis?
Antwoord 7
Voeg gewoon @import "../../styles.less";(of waar uw stylesheet is) naar bootstrap.Less aan de onderkant. Hiermee kunt u Bootstrap Mixins gebruiken zoals .gradientof .border-radiusIN UW EIGEN STIJLEN.Less.