Bootstrap 3 verschillende kleur thema's

donderdag 14 november 2013 20:38

Acties:

0 Henk 'm!

Topicstarter

Ik heb een website die bestaat uit verschillende secties. Als voorbeeld: een sectie tennis en een sectie voetbal. Nu wil ik wanneer mensen op /tennis komen de kleuren van bootstrap veranderen naar bijvoorbeeld oranje zoals het gravel en de sectie voetbal groen zoals het gras.

In variables.less staat de variabel @brand-primary: #428bca; dit is eigenlijk de enige kleur die moet veranderen. Echter worden nagenoeg alle kleuren opgebouwd uit deze kleur. Dus om het werkend te krijgen zou ik 2 volledige bootstraps moeten compilen naar css en de juiste css laden bij /tennis of /voetbal.

Vanuit mijn oogpunt is dat omslachtig aangezien het maar 1 kleurcode is. Mensen moeten dan 2x de bootstrap css laden voor enkel 1 variabelen kleur die anders is. Mijn vraag is dan ook, zie ik iets over het hoofd? Is er een betere oplossing?

donderdag 14 november 2013 21:47

Acties:

0 Henk 'm!

klepje

Kun je op de verschillende pagina's niet gewoon een extra class toevoegen? Als je die class dan in je CSS (less) opneemt met de andere kleuren, dat je die override?

Oftewel, je voegt per pagina een class toe, bijvoorbeeld in de body van de voetbalpagina:

HTML:

1	<body class="voetbal">

en dan gewoon in de css vanuit daar redeneren, dus:

Cascading Stylesheet:

1
2
3

body.voetbal {
    background-color: #00FF00;
}

[Edit:]
Je kunt ook gewoon de variabelen veranderen door middel van modifyVars

modifyVars enables modification of LESS variables in run-time. When called with new values, the LESS file is recompiled without reloading. Simple basic usage:
JavaScript:
1
2
3
4
less.modifyVars({
    '@buttonFace': '#5B83AD',
    '@buttonText': '#D9EEF2'
});

[ Voor 33% gewijzigd door klepje op 14-11-2013 21:58 . Reden: modifyVars toegevoegd ]

donderdag 14 november 2013 22:11

Acties:

0 Henk 'm!

jostefa

Topicstarter

Het eerste wat je voorstelt heb ik al geprobeerd maar omdat de kleur weer afsplitst in verschillende andere kleuren moet je nagenoeg alles gaan overridden.

De 2e oplossing ziet er goed uit, dit ben ik nog niet tegen gekomen. Ik ga even uitzoeken hoe dat werkt bedankt!

edit: Op dit moment compile ik de less naar css voor de browser. Dus ik kan niet de less refreshen met javascript oid.

[ Voor 18% gewijzigd door jostefa op 14-11-2013 22:30 ]

vrijdag 15 november 2013 10:09

Acties:

0 Henk 'm!

TheNephilim

Wtfuzzle

Het mooiste is inderdaad om body.voetbal { color: #999; } te kunnen gebruiken in je stylesheets. Echter als je less compiled kun je beter gewoon 3 stylesheets maken, want bepaalde kleuren zitten er dan helemaal in verweven.

[ Voor 18% gewijzigd door TheNephilim op 15-11-2013 11:34 ]

vrijdag 15 november 2013 10:26

Acties:

0 Henk 'm!

jostefa

Topicstarter

Ja afhankelijk van de body class de variabelen varanderen, echter zoals je zegt zit die kleur zo erg verweven in het framework dat je elke file moet gaan nalopen en aanpassen. Echter is dat wel de beste manier om een eigen theme.less te maken. Op deze manier wordt de css ook gecached client side en hoef je niet het hele framework steeds te versturen bij elke thema.

vrijdag 15 november 2013 14:56

Acties:

0 Henk 'm!

klepje

jostefa schreef op donderdag 14 november 2013 @ 22:11:
edit: Op dit moment compile ik de less naar css voor de browser. Dus ik kan niet de less refreshen met javascript oid.

Compile je de less serverside of clientside (dmv less.js)?
Als je het namelijk clientside compiled dan zou je het gewoon met javascript aan moeten kunnen passen. Hij gaat dan namelijk, zoals in de gequote tekst staat, het less bestand recompilen.

Ik heb het net zelf even geprobeerd, een html bestand aangemaakt met daarin een less stylesheet en het less javascript bestand. Daaronder heb ik een functie gemaakt die wordt aangeroepen 3 seconden na het klikken op een button:

JavaScript:

function myFunction() {
    setInterval(function(){
        less.modifyVars({
            '@base': '#00ff00'
        });
    },3000);
}

De @base heb ik als kleur van de body ingesteld, en deze wordt na 3 seconden na het klikken op de button, gewijzigd naar de kleur #00ff00. Ik krijg dit niet in een jsfiddle, daarom heb ik maar even een pastebin gemaakt:

html: http://pastebin.com/D6F1a7Ti

LessCss:

@base: #000;

body {
    background-color: @base;
}

Note: lokaal werkt dit niet in Chrome, wel in Firefox. Dit komt omdat Chrome lokale bestanden geen externe bestanden laat inladen.

vrijdag 15 november 2013 19:58

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

klepje schreef op vrijdag 15 november 2013 @ 14:56:
Compile je de less serverside of clientside (dmv less.js)?

jostefa schreef op donderdag 14 november 2013 @ 22:11:
edit: Op dit moment compile ik de less naar css voor de browser. Dus ik kan niet de less refreshen met javascript oid.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

zaterdag 16 november 2013 04:23

Acties:

0 Henk 'm!

m4ikel

Waarom niet een los stylesheet die niets anders doet als de color styles? Dan is het enkel een kwestie van het juiste sheet bij de gewenste sectie laden?

zaterdag 16 november 2013 15:14

Acties:

0 Henk 'm!

incaz

M4ikel: als je een eenvoudige manier weet om dat te genereren, zo'n bestand met alleen kleuren, dan denk ik dat het van harte welkom is. Maar vanuit less is die optie er vziw niet als je de structuur niet op die manier hebt ingedeeld. (En meestal is dat niet handig, om de kleuren helemaal separate te houden want dat maakt de chaos bepaald niet minder.)

Het dichtst in de buurt zou je komen door 2 files te genereren met less, en dan een aangepaste diff te runnen op alle regels die alle gelijke regels beginnend met een tab eruit haalt. Hou je vermoedelijk alleen nog een zut lege selectors over. En risico op overervingsproblemen omdat je de volgorde verandert.
Het berekenen van een specifieke css-diff-file of splittool met de juiste selectors en dergelijke is best leuk als je verlegen zit om een projectje, maar voor de praktijk zou ik zeggen: probably not worth it. Gzip en cache doen ook een boel...

Never explain with stupidity where malice is a better explanation

Onderwerpen