diff --git a/Gruntfile.js b/Gruntfile.js index b7a6261..951de20 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -8,53 +8,100 @@ // templateFramework: 'lodash' module.exports = function (grunt) { + // show elapsed time at the end require('time-grunt')(grunt); + // load all grunt tasks require('load-grunt-tasks')(grunt); // configurable paths var appConfig = { src: 'src', - components: 'bower_components', - dist: 'dist' + dist: 'dist', + lib: 'bower_components' }; + // configure tasks grunt.initConfig({ + + pkg: grunt.file.readJSON('package.json'), app: appConfig, + watch: { options: { nospawn: false }, - less: { - files: ['<%= app.src %>/less/{,*/}*.less'], - tasks: ['less'] + files: { + files: [ + 'src/*.html', + 'src/less/{,*/}*.less' + ], + tasks: ['build'] } }, + clean: { dist: ['.tmp', '<%= app.dist %>/*'], less: ['<%= app.src %>/less/{,*/}*.css'] }, + jshint: { options: { jshintrc: '.jshintrc' }, all: [ 'Gruntfile.js', - '<%= app.src %>/js/{,*/}*.js', - '!<%= app.src %>/js/vendor/*' + '<%= app.src %>/js/{,*/}*.js' ] }, + + uglify: { + options: { + banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n', + preserveComments: 'some' // none, some, all + // beautify: true, + // mangle: false, + // compress: false + }, + plugins: { + src: [ + '<%= app.lib %>/jquery/jquery.js', + '<%= app.lib %>/bootstrap/js/transition.js', + // '<%= app.lib %>/bootstrap/js/alert.js', + '<%= app.lib %>/bootstrap/js/button.js', + // '<%= app.lib %>/bootstrap/js/carousel.js', + // '<%= app.lib %>/bootstrap/js/collapse.js', + // '<%= app.lib %>/bootstrap/js/dropdown.js', + // '<%= app.lib %>/bootstrap/js/modal.js', + // '<%= app.lib %>/bootstrap/js/tooltip.js', + // '<%= app.lib %>/bootstrap/js/popover.js', + // '<%= app.lib %>/bootstrap/js/scrollspy.js', + '<%= app.lib %>/bootstrap/js/tab.js', + // '<%= app.lib %>/bootstrap/js/affix.js', + ], + dest: '<%= app.dist %>/js/plugins.js' + }, + main: { + src: ['<%= app.src %>/js/main.js'], + dest: '<%= app.dist %>/js/main.js' + }, + modernizr: { + src: [ + '<%= app.lib %>/modernizr/modernizr.js' + ], + dest: '<%= app.dist %>/js/modernizr.js' + } + }, + less: { development: { options: { paths: [ '<%= app.src %>/less', - '<%= app.components %>/lesshat', - '<%= app.components %>/semantic-grid/stylesheets/less', - '<%= app.components %>/font-awesome/less', - '<%= app.components %>/flexslider-less', - '<%= app.components %>/jquery-popover' + '<%= app.lib %>/flexslider-less', + '<%= app.lib %>/font-awesome/less', + '<%= app.lib %>/bootstrap/less' ] }, files: { @@ -62,12 +109,14 @@ module.exports = function (grunt) { } } }, + useminPrepare: { html: '<%= app.src %>/index.html', options: { dest: '<%= app.dist %>' } }, + usemin: { html: ['<%= app.dist %>/{,*/}*.html'], css: ['<%= app.dist %>/css/{,*/}*.css'], @@ -75,6 +124,7 @@ module.exports = function (grunt) { dirs: ['<%= app.dist %>'] } }, + cssmin: { dist: { files: { @@ -85,6 +135,7 @@ module.exports = function (grunt) { } } }, + imagemin: { dist: { files: [{ @@ -95,6 +146,7 @@ module.exports = function (grunt) { }] } }, + htmlmin: { dist: { options: { @@ -116,6 +168,7 @@ module.exports = function (grunt) { }] } }, + copy: { dist: { files: [{ @@ -132,6 +185,7 @@ module.exports = function (grunt) { }] } }, + rev: { dist: { files: { @@ -149,6 +203,7 @@ module.exports = function (grunt) { grunt.registerTask('build', [ 'clean:dist', 'less', + 'uglify', 'useminPrepare', 'imagemin', 'htmlmin', diff --git a/bower.json b/bower.json index dff5a16..f5c48b8 100644 --- a/bower.json +++ b/bower.json @@ -19,15 +19,12 @@ "test", "tests" ], - "dependencies": { - "lesshat": "*", + "devDependencies": { + "bootstrap": "~3.0.2", "modernizr": "~2.6.2", "font-awesome": "~3.0.2", - "flexslider-less": "latest", "jquery": "~1.9.1", - "semantic-grid": "latest", "raphael": "~2.1.0", - "jquery-popover": "~1.1.2", "scaleraphael": "*" } } diff --git a/src/index.html b/src/index.html index bfda997..cb76d0c 100644 --- a/src/index.html +++ b/src/index.html @@ -3,714 +3,259 @@ - - - - Platsbyggd bokhylla - - - - - - - - - - - + +
+
+
+
+

+ Rita och beställ din bokhylla direkt här på webbplatsen. + Vi kör hem och platsbygger den åt dig. +

- - -
- -
-
-
- -
-
-
- -
-
-

Rita och beställ din bokhylla direkt här på webbplatsen.
Vi kör hem och platsbygger den åt dig. Så här funkar det:

-

-

Börja rita din bokhylla

-

Vi levererar både i Sverige och Danmark.

-
-
- -
-
- - - -
    -

  • Välj en modell för att läsa mer

    • - -
  • -

    Bokhyllan Ribersborg

    -
    - Ribersborg -

    Börja rita Ribersborg

    -
    -
    -

    Med känslan av de klassiska funkishusen längs med Ribersborg i Malmö har vi tagit fram denna funktionella och tidlösa bokhylla som låter böckerna ta sin plats. De rena linjerna gör att modellen lätt kan anpassas efter era önskemål.

    -

    Hyllan tillverkas i 22mm mdf i vår snickeriverkstad efter de exakta måtten som behövs för att bokhyllan ska passa hos er. Vi använder oss inte av några moduler utan allt är sågat, fräst och slipat helt skräddarsytt för er vägg. Bokhyllan sprutlackeras sedan av skickliga målare i valfri färg. Allt vi behöver av er är en NCS-kulör(färgkod).

    -

    Bokhyllan kan även beställas omålad och målas då på plats av er egen målare.

    -

    Alla infästningar i hyllan är dolda. Toppen, botten och ett hyllplan i mitten av bokhyllan är fastlåsta med Lamello-lås. Resterande hyllplan kan flyttas fritt i hyllan i de borrade hålraderna och skjuts över hyllbäraren för en helt dold infästning fritt från synliga metall eller plastpluppar. När vi är klara med tillverkningen och målning kommer vi ut till er och platsbygger hyllan. Vi avslutar med att sätta lister för att dölja sneda väggar, lutande tak och golv.

    -

    Har ni några önskemål som inte ryms inom ritverktygets funktioner så hör av er till oss så löser vi det ändå.

    -
    -
    -
    -
    Hyllplan
    -
    22 mm MDF, 293 mm djupa (278 mm med bakstycke)
    -
    Gavlar
    -
    22 mm MDF, 295 mm djupa
    -
    Bakstycke
    -
    4 mm HDF
    -
    -
    -
    • - -
  • -

    Bokhyllan Davidhall

    -
    - Davidhall -

    Börja rita Davidhall

    -
    -
    -

    Bokhyllan Davidhall har vi tagit fram med inspiration från sekelskiftesvåningarna runt Davidhallstorg i Malmö. Med frästa profiler på gavlar, bänkskivor och dörrar ger denna bokhylla en klassisk stil för ett modernt hem.

    -

    Hyllan tillverkas av skickliga möbelsnickare i vårt snickeri i Malmö. Gavlar och bänkskiva i 32mm mdf profilfräser vi i sekelskiftesstil. Skåpsdörrarna är profilfrästa i mdf för stabilitet och god målningsyta. Dörrarna kommer med självstängande gångjärn och pop-out funktion. Föredrar ni handtag kan vi komma med några förslag som vi tycker passar till bokhyllan. Hyllplanen tillverkar vi i 22mm mdf med rundade kanter.

    -

    Vi använder oss inte av några moduler utan allt är sågat, fräst och slipat helt skräddarsytt för er vägg. Bokhyllan sprutlackeras sedan av skickliga målare i valfri färg.

    -

    Bokhyllan kan även beställas omålad och målas då på plats av er egen målare.

    -

    Alla infästningar i hyllan är dolda. Toppen och ett hyllplan i mitten av bokhyllan är fastlåsta med Lamello-lås. Resterande hyllplan kan flyttas fritt i hyllan i de borrade hålraderna och skjuts över hyllbäraren för en helt dold infästning fritt från synliga metall eller plastpluppar. När vi är klara med tillverkningen och målning kommer vi ut till er och platsbygger hyllan. Vi avslutar med att sätta lister för att dölja sneda väggar, lutande tak och golv. Om bokhyllan inte går ända upp till tak tillverkar vi även en passande kröningslist som avslutning upptill.

    -

    Har ni några önskemål som inte ryms inom ritverktygets funktioner så hör av er till oss så löser vi det ändå.

    -
    -
    -
    -
    Gavlar
    -
    32 mm MDF, 295 mm djupa
    -
    Hyllplan
    -
    22 mm MDF, 297 mm djupa (278 mm med bakstycke)
    -
    Bänkskiva
    -
    32 mm MDF, 400 mm djup
    -
    Skåpsdjup
    -
    380 mm (invändigt djup 340 mm)
    -
    Skåpshöjd
    -
    782 mm (bänkskiva inräknad)
    -
    Dörrar
    -
    20 mm MDF
    -
    -
    -
    • - -
  • -

    Bokhyllan Sofielund

    -
    - Davidhall -

    Börja rita Sofielund

    -
    -
    -

    Denna funkisbokhylla med skjutdörrar och ett stilrent uttryck passar er som vill ha en modern bokhylla med inspiration från 50-talets nyskapande formspråk.

    -

    Hyllan tillverkas av våra skickliga möbelsnickare i vårt snickeri i Malmö. Skåpen, gavlar och hyllplan är tillverkade i 22mm mdf. Skåpsdörrarna är gjorda i 5mm Hdf. Till skåpen kan ni sedan välja mellan våra trähandtag i ask eller så fräser vi ut en rundning i dörren som fungerar som handtag. Har ni några andra önskemål så kan vi ordna det istället.

    -

    Vi använder oss inte av några moduler utan allt är sågat, fräst och slipat helt skräddarsytt för er vägg. Bokhyllan sprutlackeras sedan av skickliga målare i valfri färg.

    -

    Bokhyllan kan även beställas omålad och målas då på plats av er egen målare.

    -

    Alla infästningar i hyllan är dolda. Toppen och ett hyllplan i mitten av bokhyllan är fastlåsta med Lamello-lås. Resterande hyllplan kan flyttas fritt i hyllan i de borrade hålraderna och skjuts över hyllbäraren för en helt dold infästning fritt från synliga metall eller plastpluppar. När vi är klara med tillverkningen och målning kommer vi ut till er och platsbygger hyllan. Vi avslutar med att sätta lister för att dölja sneda väggar, lutande tak och golv.

    -

    Har ni några önskemål som inte ryms inom ritverktygets funktioner så hör av er till oss så löser vi det ändå.

    -
    -
    -
    -
    Gavlar
    -
    22 mm MDF, 295 mm djupa
    -
    Hyllplan
    -
    22 mm MDF, 293 mm djupa (278 mm med bakstycke)
    -
    Skåpstomme
    -
    22 mm MDF
    -
    Skåpsdjup
    -
    400 mm (invändigt djup 340 mm)
    -
    Skåpshöjd
    -
    600 mm
    -
    Dörrar
    -
    5 mm HDF
    -
    -
    -
    • - -
  • -

    Specialbyggd bokhylla

    -
    -

    Förutom våra tre bokhyllemodeller gör vi speciallösningar helt utifrån era egna önskemål. Under de år vi byggt platsbyggda bokhyllor har vi stött på de flesta tänkbara idéer om bokhyllors utformning. Det vi kommit fram till är att allt går att lösa.

    -

    Om ni har en idé om en bokhylla eller annan inredning som ni vill få byggt så hör av er till oss så diskuterar vi fram en lösning och ett pris.

    -

    Ring 040–493 100 så sätter vi igång.

    -
    -
    • - -
+
+
+
+ +
+
+
+
+ Börja rita din bokhylla +

+ Vi levererar både i Sverige och Danmark. +

+
+
+
+
+ +
+
+
+

Våra modeller

+ + + + +
+
+ +
+
+

Bokhyllan Ribersborg

+
+ Ribersborg +
+ Börja rita Ribersborg +
+
-
- -
-
- -
-

Betalningsvillkor

-

Betalning av material och arbete delas upp i två lika stora delar. Vid godkännade av offert skickar vi den första fakturan. Den dag betalningen är oss tillhanda räknas som beställningsdatum.

-

Resterande belopp faktureras efter montering. Betalning skall ske 20 dagar därefter. Vi förbehåller oss rätten att ta en kreditupplysning på den person fakturan är utställd på.

+
+
+

Med känslan av de klassiska funkishusen längs med Ribersborg i Malmö har vi tagit fram denna funktionella och tidlösa bokhylla som låter böckerna ta sin plats. De rena linjerna gör att modellen lätt kan anpassas efter era önskemål.

+

Hyllan tillverkas i 22mm mdf i vår snickeriverkstad efter de exakta måtten som behövs för att bokhyllan ska passa hos er. Vi använder oss inte av några moduler utan allt är sågat, fräst och slipat helt skräddarsytt för er vägg. Bokhyllan sprutlackeras sedan av skickliga målare i valfri färg. Allt vi behöver av er är en NCS-kulör(färgkod).

+

Bokhyllan kan även beställas omålad och målas då på plats av er egen målare.

+

Alla infästningar i hyllan är dolda. Toppen, botten och ett hyllplan i mitten av bokhyllan är fastlåsta med Lamello-lås. Resterande hyllplan kan flyttas fritt i hyllan i de borrade hålraderna och skjuts över hyllbäraren för en helt dold infästning fritt från synliga metall eller plastpluppar. När vi är klara med tillverkningen och målning kommer vi ut till er och platsbygger hyllan. Vi avslutar med att sätta lister för att dölja sneda väggar, lutande tak och golv.

+

Har ni några önskemål som inte ryms inom ritverktygets funktioner så hör av er till oss så löser vi det ändå.

- -
-

Delbetalning

-

Genom Resurs Bank kan vi erbjuda möjligheten att delbetala er bokhylla. Vi förklarar gärna hur. Kontakta oss för mer information.

-

ROT-avdrag

-

Den del av beloppet som utgör arbetskostnad för platsbyggnation ger rätt till ROT-avdrag.

+
+
+
Hyllplan
+
22 mm MDF, 293 mm djupa (278 mm med bakstycke)
+
Gavlar
+
22 mm MDF, 295 mm djupa
+
Bakstycke
+
4 mm HDF
+
-
-
- - + -
-
-
-

Din ritning är sparad

-

Bokmärk denna sidan eller spara följande unika nummer för att öppna ritningen vid ett senare tillfälle.

-

Ritningsnummer:drawingID

-

- Du kan även dela med dig av din ritning till vänner och familj genom att skicka följande adress: - -

-

- Du kan också dela med dig av ritning direkt till facebook. - Dela på facebok -

+
+
+

Bokhyllan Davidhall

+
+ Davidhall +
+ Börja rita Davidhall +
+
-
-
- Tillbaka till ritverktyget -
+
+
+

Bokhyllan Davidhall har vi tagit fram med inspiration från sekelskiftesvåningarna runt Davidhallstorg i Malmö. Med frästa profiler på gavlar, bänkskivor och dörrar ger denna bokhylla en klassisk stil för ett modernt hem.

+

Hyllan tillverkas av skickliga möbelsnickare i vårt snickeri i Malmö. Gavlar och bänkskiva i 32mm mdf profilfräser vi i sekelskiftesstil. Skåpsdörrarna är profilfrästa i mdf för stabilitet och god målningsyta. Dörrarna kommer med självstängande gångjärn och pop-out funktion. Föredrar ni handtag kan vi komma med några förslag som vi tycker passar till bokhyllan. Hyllplanen tillverkar vi i 22mm mdf med rundade kanter.

+

Vi använder oss inte av några moduler utan allt är sågat, fräst och slipat helt skräddarsytt för er vägg. Bokhyllan sprutlackeras sedan av skickliga målare i valfri färg.

+

Bokhyllan kan även beställas omålad och målas då på plats av er egen målare.

+

Alla infästningar i hyllan är dolda. Toppen och ett hyllplan i mitten av bokhyllan är fastlåsta med Lamello-lås. Resterande hyllplan kan flyttas fritt i hyllan i de borrade hålraderna och skjuts över hyllbäraren för en helt dold infästning fritt från synliga metall eller plastpluppar. När vi är klara med tillverkningen och målning kommer vi ut till er och platsbygger hyllan. Vi avslutar med att sätta lister för att dölja sneda väggar, lutande tak och golv. Om bokhyllan inte går ända upp till tak tillverkar vi även en passande kröningslist som avslutning upptill.

+

Har ni några önskemål som inte ryms inom ritverktygets funktioner så hör av er till oss så löser vi det ändå.

+
+
+
+
Gavlar
+
32 mm MDF, 295 mm djupa
+
Hyllplan
+
22 mm MDF, 297 mm djupa (278 mm med bakstycke)
+
Bänkskiva
+
32 mm MDF, 400 mm djup
+
Skåpsdjup
+
380 mm (invändigt djup 340 mm)
+
Skåpshöjd
+
782 mm (bänkskiva inräknad)
+
Dörrar
+
20 mm MDF
+
-
-
-
-
-
-

Vi vill alltid göra saker bättre här på Jerker Inredning & Form och behöver därför din hjälp. Om du hjälper oss med att svara på fem snabba frågor så ger vi dig ett rabattkod på 1000kr du kan använda dig av när du skickar din offertförfrågan eller så kan du ge bort den till en vän som vill beställa en bokhylla från oss. Rabattkoden gäller i 30dagar och du kan bara använda dig av en per order.

+
+
+

Bokhyllan Sofielund

+
+ Sofielund +
+ Börja rita Sofielund +
+
+
+
+
+

Denna funkisbokhylla med skjutdörrar och ett stilrent uttryck passar er som vill ha en modern bokhylla med inspiration från 50-talets nyskapande formspråk.

+

Hyllan tillverkas av våra skickliga möbelsnickare i vårt snickeri i Malmö. Skåpen, gavlar och hyllplan är tillverkade i 22mm mdf. Skåpsdörrarna är gjorda i 5mm Hdf. Till skåpen kan ni sedan välja mellan våra trähandtag i ask eller så fräser vi ut en rundning i dörren som fungerar som handtag. Har ni några andra önskemål så kan vi ordna det istället.

+

Vi använder oss inte av några moduler utan allt är sågat, fräst och slipat helt skräddarsytt för er vägg. Bokhyllan sprutlackeras sedan av skickliga målare i valfri färg.

+

Bokhyllan kan även beställas omålad och målas då på plats av er egen målare.

+

Alla infästningar i hyllan är dolda. Toppen och ett hyllplan i mitten av bokhyllan är fastlåsta med Lamello-lås. Resterande hyllplan kan flyttas fritt i hyllan i de borrade hålraderna och skjuts över hyllbäraren för en helt dold infästning fritt från synliga metall eller plastpluppar. När vi är klara med tillverkningen och målning kommer vi ut till er och platsbygger hyllan. Vi avslutar med att sätta lister för att dölja sneda väggar, lutande tak och golv.

+

Har ni några önskemål som inte ryms inom ritverktygets funktioner så hör av er till oss så löser vi det ändå.

-
-
-
-
-
-

- Vad tycker du om hemsidans layout/utseende? -

- - - - - - - - - - -
-
-
-

- Vad tycker du om ritverktygets layout/utseende? -

- - - - - - - - - - -
-
-
-

- Vad tycker du om hemsidans funktionalitet? - Dvs var det lätt att hitta den information du sökte och navigera dig på hemsidan? -

- - - - - - - - - - - -
-
-
-

- Vad tycker du om ritverktygets funktionalitet? - Dvs lätt att arbeta med, navigera dig bland funktionerna och tydligheten i ritverktyget. -

- - - - - - - - - - - -
-
-
-

- Kan du tänka dig att rekommendera oss till andra? -

- - - - -

-
-
-
-
-
-
-
- - -
-
- Spara och svara. - Nej tack, jag vill enbart spara ritningen. -
-
-
- -
+
+
+
Gavlar
+
22 mm MDF, 295 mm djupa
+
Hyllplan
+
22 mm MDF, 293 mm djupa (278 mm med bakstycke)
+
Skåpstomme
+
22 mm MDF
+
Skåpsdjup
+
400 mm (invändigt djup 340 mm)
+
Skåpshöjd
+
600 mm
+
Dörrar
+
5 mm HDF
+
+
-
-
-
-

Tack för din intresseförfrågan

-

Vi kommer att titta igenom din ritning och återkomma med en offert.

-

Bokmärk denna sidan eller spara följande unika nummer för att öppna ritningen vid ett senare tillfälle.

-

Ritningsnummer:drawingID

-

- Du kan även dela med dig av din ritning till vänner och familj genom att skicka följande adress: - -

-

- Du kan också dela med dig av ritning direkt till facebook. - Dela på facebok -

-
-
-
- Tillbaka till ritverktyget -
-
-
-
+
+
+

Specialbyggd bokhylla

- -
-
-
-

Skicka intresseförfrågan

-
-
-
-
-
- -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- -
- - -
-
- - -
-
- -
-
-
- Skicka offertförfrågan - Tillbaka till ritverktyget -
-
-
-
-
+
+
+

Förutom våra tre bokhyllemodeller gör vi speciallösningar helt utifrån era egna önskemål. Under de år vi byggt platsbyggda bokhyllor har vi stött på de flesta tänkbara idéer om bokhyllors utformning. Det vi kommit fram till är att allt går att lösa.

+

Om ni har en idé om en bokhylla eller annan inredning som ni vill få byggt så hör av er till oss så diskuterar vi fram en lösning och ett pris.

+

Ring 040–493 100 så sätter vi igång.

+
+
+
+ -
-
- -
-
- Platsbygger din bokhylla... -
-
- Laddar din bokhylla... -
-
- -
-
-
-
-
- -
- - -
-
- -
- -
- - - - - - - - - - -
-
- -
- - Prisindikation / omålat -
- 0:- / - 0:- -
- Mät & monteringskostnad - 0: - Månadskostnad 12mån (295:- Uppl.avg) - 0: - Månadskostnad 24mån (395:- Uppl.avg) - 0:- - Alla priser ink. moms. Frakt ingår. - - Spara - Skicka offertförfrågan -
-
-
- - -
-
-
-

Frågor? Ring 040–493 100 eller skicka e-post till post@jerker.eu så får du hjälp.

- -
-
-

Jerker Inredning & Form är ett ungt företag med känsla för form, stil och kvalitet. Vi jobbar med design och byggnation av inredningar. Måttanpassade och platsbyggda bokhyllor utformade för att passa er stil och era behov är vårt signum.

-

Vi är baserade i Malmö där all vår tillverkning och målning utförs av skickliga hantverkare. Efter flera års erfarenhet av platsbyggnationer har vi tagit fram tre bokhyllemodeller: Ribersborg, Davidhall och Sofielund. Utifrån dessa modeller kan vi sedan, tillsammans med er, skräddarsy en bokhylla som passar just ditt rum.

-

Besök Jerker.eu för att läsa mer om Jerker Inredning & Form.

-
+
+
+
+
+

Betalningsvillkor

+

Betalning av material och arbete delas upp i två lika stora delar. Vid godkännade av offert skickar vi den första fakturan. Den dag betalningen är oss tillhanda räknas som beställningsdatum.

+

Resterande belopp faktureras efter montering. Betalning skall ske 20 dagar därefter. Vi förbehåller oss rätten att ta en kreditupplysning på den person fakturan är utställd på.

-
- -
- - +
+

Delbetalning

+

Genom Resurs Bank kan vi erbjuda möjligheten att delbetala er bokhylla. Vi förklarar gärna hur. Kontakta oss för mer information.

+

ROT-avdrag

+

Den del av beloppet som utgör arbetskostnad för platsbyggnation ger rätt till ROT-avdrag.

+
+
+
+ + +
+
+
+
+

Frågor? Ring 040–493 100 eller skicka e-post till post@jerker.eu så får du hjälp.

+ +
+
+

Jerker Inredning & Form är ett ungt företag med känsla för form, stil och kvalitet. Vi jobbar med design och byggnation av inredningar. Måttanpassade och platsbyggda bokhyllor utformade för att passa er stil och era behov är vårt signum.

+

Vi är baserade i Malmö där all vår tillverkning och målning utförs av skickliga hantverkare. Efter flera års erfarenhet av platsbyggnationer har vi tagit fram tre bokhyllemodeller: Ribersborg, Davidhall och Sofielund. Utifrån dessa modeller kan vi sedan, tillsammans med er, skräddarsy en bokhylla som passar just ditt rum.

+

Besök Jerker.eu för att läsa mer om Jerker Inredning & Form.

+
+
+
+
+ + - + diff --git a/src/js/_main.js b/src/js/main.js similarity index 100% rename from src/js/_main.js rename to src/js/main.js diff --git a/src/less/fonts.less b/src/less/fonts.less index 71bfc87..8952849 100644 --- a/src/less/fonts.less +++ b/src/less/fonts.less @@ -22,12 +22,12 @@ /* Univers Pro 57 Condensed */ @import url("http://hello.myfonts.net/count/271788"); -@font-face {font-family: 'Univers';font-weight: normal;font-style: normal;src: url('@{fontPath}/27177F_0_0.eot');src: url('@{fontPath}/27177F_0_0.eot?#iefix') format('embedded-opentype'),url('@{fontPath}/27177F_0_0.woff') format('woff'),url('@{fontPath}/27177F_0_0.ttf') format('truetype'),url('@{fontPath}/27177F_0_0.svg#wf') format('svg');} +@font-face {font-family: 'Univers';font-weight: normal;font-style: normal;src: url('@{font-path}/27177F_0_0.eot');src: url('@{font-path}/27177F_0_0.eot?#iefix') format('embedded-opentype'),url('@{font-path}/27177F_0_0.woff') format('woff'),url('@{font-path}/27177F_0_0.ttf') format('truetype'),url('@{font-path}/27177F_0_0.svg#wf') format('svg');} /* Linotype Didot Pro Headline Roman */ @import url("http://hello.myfonts.net/count/27177e"); -@font-face {font-family: 'LinotypeDidot';font-weight: normal;font-style: normal;src: url('@{fontPath}/27177E_0_0.eot');src: url('@{fontPath}/27177E_0_0.eot?#iefix') format('embedded-opentype'),url('@{fontPath}/27177E_0_0.woff') format('woff'),url('@{fontPath}/27177E_0_0.ttf') format('truetype'),url('@{fontPath}/27177E_0_0.svg#wf') format('svg');} +@font-face {font-family: 'LinotypeDidot';font-weight: normal;font-style: normal;src: url('@{font-path}/27177E_0_0.eot');src: url('@{font-path}/27177E_0_0.eot?#iefix') format('embedded-opentype'),url('@{font-path}/27177E_0_0.woff') format('woff'),url('@{font-path}/27177E_0_0.ttf') format('truetype'),url('@{font-path}/27177E_0_0.svg#wf') format('svg');} /* Linotype Didot Italic */ @import url("http://hello.myfonts.net/count/27177f"); -@font-face {font-family: 'LinotypeDidot';font-weight: normal;font-style: italic;src: url('@{fontPath}/271788_0_0.eot');src: url('@{fontPath}/271788_0_0.eot?#iefix') format('embedded-opentype'),url('@{fontPath}/271788_0_0.woff') format('woff'),url('@{fontPath}/271788_0_0.ttf') format('truetype'),url('@{fontPath}/271788_0_0.svg#wf') format('svg');} +@font-face {font-family: 'LinotypeDidot';font-weight: normal;font-style: italic;src: url('@{font-path}/271788_0_0.eot');src: url('@{font-path}/271788_0_0.eot?#iefix') format('embedded-opentype'),url('@{font-path}/271788_0_0.woff') format('woff'),url('@{font-path}/271788_0_0.ttf') format('truetype'),url('@{font-path}/271788_0_0.svg#wf') format('svg');} diff --git a/src/less/main.less b/src/less/main.less index 0bb5c8f..2d614bf 100644 --- a/src/less/main.less +++ b/src/less/main.less @@ -1,608 +1,140 @@ +// Frameworks +// ------------------------- + +@import "bootstrap"; + + // Variables // ------------------------- + @import "variables"; + // Fonts // ------------------------- + @import "fonts"; + // Components // ------------------------- -@import "lesshat"; -@import "grid"; -@import "font-awesome"; + @import (less) "flexslider.css"; + // Partials // ------------------------- + @import "mixins"; -@import "normalize"; @import "utils"; -@import (less) "popover.css"; @import "planner"; // Main styles // ------------------------- -/* - * Use border-box for everything - */ +// Animated links +// -* { - box-sizing: border-box; +a { + .transition(~"color 120ms linear"); } -/* - * Base typography - */ +// Default section margins +// -body { - background-color: @backgroundColor; - color: @textColor; - - .baseFontFamily(); - line-height: 2 * @rhythmUnit; +body > header, +body > section { + padding-top: @line-height-computed; + padding-bottom: @line-height-computed; } -/* - * Biggest headers get the alt font family - */ - -h1 { - .altFontFamily(); - - &.callout { - color: @muteColor; - - font-size: @xxLargeFont; - font-style: italic; - line-height: (4 * @rhythmUnit); - letter-spacing: -.1rem; +// Alternate sections +// - /* Line up with vertical rhythm */ - padding: (.7 * @rhythmUnit) 0 (.9 * @rhythmUnit); - margin: @rhythmUnit 0; - } +section.alternate { + background-color: white; + padding-top: @line-height-computed; + padding-bottom: @line-height-computed; } -/* - * Headers - */ - -h1, h2, h3, h4, h5, h6 { - color: @strongColor; - font-weight: normal; +// Alternate rows +.row.alternate { + #gradient > .horizontal-three-colors(white, @near-white, 50%, white); + border: 1px solid @hr-border; + border-width: 1px 0; } -/* - * Grouped headers - */ -hgroup { - /* Place inline */ - h1, h2, h3, h4, h5, h6 { - display: inline-block; - } - - /* Remove margin between headers */ - h1 + h2, - h2 + h3, - h3 + h4, - h4 + h5, - h5 + h6 { - margin-top: -@rhythmUnit; - color: @muteColor; - } +// Site title +// +body > header h1 { + font-family: @font-family-base; + font-size: @font-size-h3; } -/* - * Paragraph styles - */ +// Header nav +// -p { - /* Line up with vertical rhythm */ - padding: (.5 * @rhythmUnit) 0 (.5 * @rhythmUnit); - margin: 0; +body > header nav { + margin-top: @line-height-computed; } -/* - * Links - */ +// Process illustration +// -a { - color: @linkColor; - text-decoration: none; +#about figure { + figcaption { + border: 1px solid @hr-border; + border-width: 1px 0; - // Quick fade color - .transition(~"color 150ms linear"); + padding-top: @line-height-computed; + padding-bottom: @line-height-computed; - &:active, - &:focus, - &:hover { - color: @activeColor; + font-size: @font-size-large; } } -/* - * Buttons - */ -.button { - background-color: lighten(@lineColor, 5%); - color: @textColor; - border: 1px solid @lineColor; - border-bottom-color: darken(@lineColor, 5%); - .border-radius(@borderRadius); - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); - - display: inline-block; - padding: (.5 * @rhythmUnit) @rhythmUnit; - margin-bottom: 0; - - cursor: pointer; - font-size: 1rem; - line-height: (2 * @rhythmUnit); - vertical-align: middle; - text-align: center; - - .transition(~"color 100ms linear, background-color 200ms linear"); - - // Re-declare hidden state - &.hide { - display: none; - } +// Product tabs +// - // Hover/focus state +#products a[data-toggle="tab"] { + img { + .scale(.96); + .transition(~"all 120ms ease-in-out"); + } &:hover, &:focus { - background-color: @activeColor; - color: @activeContrastColor; - border-color: darken(@activeColor, 5%); - border-bottom-color: darken(@activeColor, 10%); + color: @gray-darker; text-decoration: none; - } - - // Active state - &.active, - &:active { - outline: 0; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); - } - - // Disabled state - &.disabled, - &[disabled] { - cursor: default; - .opacity(50); - .box-shadow(none); - } - - // Large button - &.large { - font-size: @largeFont; - padding: @rhythmUnit (1.5 * @rhythmUnit); - .border-radius((@borderRadius * 1.5)); - } - - // Primary button - &.primary, - &[href*="#plan"] { - background-color: @decorColor; - color: @decorContrastColor; - border: 1px solid darken(@decorColor, 5%); - - &:hover, - &:focus { - background-color: @activeColor; - color: @activeContrastColor; - border-color: darken(@activeColor, 5%); - border-bottom-color: darken(@activeColor, 10%); + img { + .scale(1); } } } -/* - * Text inputs - */ -input[type="text"], -input[type="email"] { - display: inline-block; - padding: (.25 * @rhythmUnit) (.5 * @rhythmUnit); - font-size: 1rem; - line-height: (3 * @rhythmUnit); - color: @textColor; - vertical-align: middle; - background-color: @backgroundColor; - border: 1px solid @lineColor; - border-radius: @borderRadius; - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); - - &:focus { - border-color: rgba(82,168,236,.8); - outline: 0; - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - } -} - -/* - * Images are never bigger than containers - */ -img { - max-width: 100%; - height: auto; -} - -/* - * Images have rounded borders by default - */ -img { - .border-radius(@borderRadius); -} - - -/* - * Main page container(s) - */ - -.wrapper { - padding: 0 @rhythmUnit; - margin-right: auto; - margin-left: auto; - min-width: @minWidth; - max-width: @maxWidth; -} - -/* - * Clear floating grid units in sectioning elements - */ - -header, -section, -footer, -aside { - .clearfix(); - margin-top: @rhythmUnit; - margin-bottom: @rhythmUnit; -} - -/* - * Languages bar - */ - -#languages { - - /* Typography */ - .mute(); - font-size: @smallFont; - - ul { - .inline-list(); - - /* Line up with vertical rhythm */ - padding-bottom: .4 * @rhythmUnit; - padding-top: .6 * @rhythmUnit; - } -} - -/* - * Header - */ - -#header { - - /* Float elements */ - hgroup { float: left; } - nav { float: right; } - .clearfix(); - - /* Reset H1 to base font family */ - h1 { - .baseFontFamily(); - - /* Line up with vertical rhythm */ - padding: (.3 * @rhythmUnit) 0 (.7 * @rhythmUnit); - } -} +// Responsive product tab panes +// -/* - * Hero section - */ - -#hero { - - margin-bottom: (2 * @rhythmUnit); - - /* FlexSlider */ - .flexslider { - - /* Reset default styles */ - margin-bottom: @rhythmUnit; - .flex-next, - .flex-prev { - opacity: 0.8; - } - .flex-next { - right: -36px; - } - .flex-prev { - left: -36px; - } - - /* Slide margins */ - li { - margin-left: 2px; - margin-right: 2px; - } - - /* Figcaptions */ - figure { - position: relative; - - figcaption { - position: absolute; - bottom: (2 * @rhythmUnit); - left: (16 * @rhythmUnit); - - .opacity(0); - - .transition(~"left 400ms ease-out 30ms, opacity 300ms linear 30ms"); - - h1 { - color: white; - font-weight: bold; - text-shadow: 0 1px 1px rgba(0,0,0,.8), 0 0 5px rgba(0,0,0,.4), 0 0 10px rgba(0,0,0,.4), 0 0 15px rgba(0,0,0,.4); - - margin: 0; - } - p { - color: white; - font-size: @largeFont; - font-weight: bold; - text-shadow: 0 1px 1px rgba(0,0,0,.8), 0 0 5px rgba(0,0,0,.4), 0 0 10px rgba(0,0,0,.4), 0 0 15px rgba(0,0,0,.4); - - margin: 0; - } - - .price { - font-size: @xxLargeFont; - font-family: @altFontFamily; - font-weight: bold; - line-height: (3 * @rhythmUnit); - - /* Line up with vertical rhythm */ - padding: (.181818 * @rhythmUnit) 0 (.363636 * @rhythmUnit); - margin: 0; - } - - .button { - .box-shadow(~"0 1px 2px rgba(0,0,0,.6)"); - margin-top: @rhythmUnit; - } - } - } - - /* Animation */ - li { - &.animating-to { - } - &.current { - figure figcaption { - left: (2 * @rhythmUnit); - .opacity(100); - } - } - } - - /* Grayscale effect on non-current images */ - li img { - -webkit-filter: grayscale(0%); - .transition(-webkit-filter 900ms linear 600ms); - } - li:not(.current) img { - -webkit-filter: grayscale(100%); - } - } - -} - -/* - * About section - */ - -#about { - - margin-bottom: (6 * @rhythmUnit); - - text-align: center; - - img { +@media (max-width: @grid-float-breakpoint) { + #products .tab-content > .tab-pane { display: block; - margin: @rhythmUnit auto (4 * @rhythmUnit); - } -} - -/* - * Products section - */ - -#products { - background-color: white; - border-top: 1px solid @lineColor; - - margin-bottom: 0; - padding-bottom: (3 * @rhythmUnit); - padding-top: (3 * @rhythmUnit); - - .caption { - color: @muteColor; - margin-bottom: (3 * @rhythmUnit); - - text-align: center; - text-transform: uppercase; - text-decoration: underline; - letter-spacing: 1px; - } - .tabs { - clear: both; - .clearfix(); - .unstyled-list(); - - // a { - // color: @textColor; - // } - - li { - .column(3); - text-align: center; - } - - p { - font-size: @smallFont; - } - } - .tab-panes { - .clearfix(); - .unstyled-list(); - - /* Colors and borders */ - .gradient(~"linear-gradient(90deg, white 0%, rgb(250,250,250) 50%, white 100%)"); - border-bottom: 3px double @lineColor; - border-top: 3px double @lineColor; - - /* Make space for borders */ - margin-bottom: (2 * @rhythmUnit); - margin-top: (2 * @rhythmUnit); - padding-bottom: @rhythmUnit; - padding-top: @rhythmUnit; - - /* Teaser text when no tabs are selected */ - li.teaser { - text-align: center; - h3 { - position: relative; - - text-transform: uppercase; - letter-spacing: 1px; - - i { - background-color: white; - .border-radius(50%); - - position: absolute; - top: (-1.2 * @xxLargeFont); - left: 50%; - margin-left: (-.5 * @xxLargeFont); - - font-size: @xxLargeFont; - } - } + &.fade { + opacity: 1; } - - /* Tab pane content */ - li.pane { - .callout { - text-align: center; - } - .hero { - .column(10); - .push(1); - .pull(1); - - text-align: center; - - margin-bottom: (2 * @rhythmUnit); - - img { - display: block; - margin: @rhythmUnit auto; - } - } - .description { - .column(5); - .push(1); - - &.nospec { - .column(6); - .push(3); - } - } - .spec { - .column(4); - .push(1); - // .pull(1); - - border: 3px double @lineColor; - - font-size: @smallFont; - } - } - } -} - -/* - * Financing info - */ - -#financing { - background-color: white; - border-bottom: 1px solid @lineColor; - - margin-top: 0; - padding-bottom: (3 * @rhythmUnit); - padding-top: (3 * @rhythmUnit); - - text-align: left; - - .terms { - .column(5); - } - .more { - .column(6); - .push(1); } } -/* - * Footer - */ - -#footer { - - .contact, - .about { - .column(6, 12); - } - - padding-top: (4 * @rhythmUnit); - padding-bottom: 12 * @rhythmUnit; +// Footer +// +footer { .support { - display: block; - - font-size: @xLargeFont; - line-height: (3 * @rhythmUnit); - - /* Line up with vertical rhythm */ - padding: (.4 * @rhythmUnit) 0 (.6 * @rhythmUnit); - margin: @rhythmUnit 0; + font-size: @font-size-h3; } - - /* Social links */ .social { - font-size: @largeFont; - - /* Fill out hit area */ - a { - display: inline-block; - } - - /* Icon layout */ - .icon { - vertical-align: middle; - margin-right: .1em; - } + font-size: @font-size-large; } } diff --git a/src/less/mixins.less b/src/less/mixins.less index 4a7bf53..24c106e 100644 --- a/src/less/mixins.less +++ b/src/less/mixins.less @@ -21,31 +21,12 @@ } } -/* - * Text overflow - * Requires inline-block or block for proper styling - */ -.text-overflow() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* - * Unstyled list - */ -.unstyled-list() { - padding: 0; - margin: 0; - list-style: none; -} - /* * Inline list */ -.inline-list(@margin: .5em, @separator: ~'1px solid rgba(0,0,0,.2)') { - .unstyled-list(); +.list-inline(@margin: .5em, @separator: ~'1px solid rgba(0,0,0,.2)') { + .list-unstyled; li { border-left: @separator; @@ -73,68 +54,6 @@ -o-column-span: @span; } -/* - * Muted text and links - */ -.mute() { - color: @muteColor; - - a:link, - a:visited { - color: @muteColor; - - // Keep original active color - &:active, - &:focus, - &:hover { - color: @activeColor; - } - } -} - -/* CSS image replacement - * Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 - */ -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} - -/* - * Hide from both screenreaders and browsers: h5bp.com/u - */ - -.hidden() { - display: none !important; - visibility: hidden; -} - -/* - * Hide only visually, but have it available for screenreaders: h5bp.com/v - */ - -.visuallyhidden() { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -/* - * Hide visually and from screenreaders, but maintain layout - */ - -.invisible() { - visibility: hidden; -} - /* * Fixes transition flicker on items using CSS transitions */ @@ -146,27 +65,3 @@ // -webkit-perspective: 1000; // Appears to add another kind of flicker when hovered // -webkit-backface-visibility: hidden; } - -/* - * Clearfix: contain floats - * - * For modern browsers - * 1. The space content is one way to avoid an Opera bug when the - * `contenteditable` attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements - * that receive the `clearfix` class. - * 2. The use of `table` rather than `block` is only necessary if using - * `:before` to contain the top-margins of child elements. - */ - -// .clearfix() { -// &:before, -// &:after { -// content: " "; /* 1 */ -// display: table; /* 2 */ -// } - -// &:after { -// clear: both; -// } -// } diff --git a/src/less/normalize.less b/src/less/normalize.less deleted file mode 100644 index b269bf7..0000000 --- a/src/less/normalize.less +++ /dev/null @@ -1,526 +0,0 @@ -/*! normalize.css v1.1.0 | MIT License | git.io/normalize */ - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -/** - * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. - */ - -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. - * Known issue: no IE 6 support. - */ - -[hidden] { - display: none; -} - -/* ========================================================================== - Base - ========================================================================== */ - -/** - * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using - * `em` units. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-size: @rootEm; /* 1 */ - -webkit-text-size-adjust: @rootEm; /* 2 */ - -ms-text-size-adjust: @rootEm; /* 2 */ -} - -/** - * Address `font-family` inconsistency between `textarea` and other form - * elements. - */ - -html, -button, -input, -select, -textarea { - font-family: sans-serif; -} - -/** - * Address margins handled incorrectly in IE 6/7. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links - ========================================================================== */ - -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* ========================================================================== - Typography - ========================================================================== */ - -/** - * Address font sizes and margins set differently in IE 6/7. - * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, - * and Chrome. - */ - -h1 { - font-size: @xLargeFont; - - /* Line up with vertical rhythm */ - padding: (.4 * @rhythmUnit) 0 (.6 * @rhythmUnit); - margin: @rhythmUnit 0; -} - -h2 { - font-size: @largeFont; - - /* Line up with vertical rhythm */ - padding: (.5 * @rhythmUnit) 0 0; - margin: (1.5 * @rhythmUnit) 0 @rhythmUnit; -} - -h3, -h4, -h5, -h6 { - /* We don't use these, so reset to body text */ - font-size: 1rem; - - /* Line up with vertical rhythm */ - padding: (.5 * @rhythmUnit) 0 (.5 * @rhythmUnit); - margin: @rhythmUnit 0; -} - -/** - * Address styling not present in IE 7/8/9, Safari 5, and Chrome. - */ - -abbr[title] { - // border-bottom: 1px dotted; - font-size: 85%; -} - -/** - * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -blockquote { - margin: 1em 40px; -} - -/** - * Address styling not present in Safari 5 and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address differences between Firefox and other browsers. - * Known issue: no IE 6/7 normalization. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Address styling not present in IE 6/7/8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address margins set differently in IE 6/7. - */ - -p, -pre { - margin: 1em 0; -} - -/** - * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; -} - -/** - * Improve readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -/** - * Address CSS quotes not supported in IE 6/7. - */ - -q { - quotes: none; -} - -/** - * Address `quotes` property not supported in Safari 4. - */ - -q:before, -q:after { - content: ''; - content: none; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* ========================================================================== - Lists - ========================================================================== */ - -/** - * Address margins set differently in IE 6/7. - */ - -dl, -menu, -ol, -ul { - margin: 1em 0; -} - -dd { - margin: 0 0 0 40px; -} - -/** - * Address paddings set differently in IE 6/7. - */ - -menu, -ol, -ul { - padding: 0 0 0 40px; -} - -/** - * Correct list images handled incorrectly in IE 7. - */ - -nav ul, -nav ol { - list-style: none; - list-style-image: none; -} - -/* ========================================================================== - Embedded content - ========================================================================== */ - -/** - * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. - * 2. Improve image quality when scaled in IE 7. - */ - -img { - border: 0; /* 1 */ - -ms-interpolation-mode: bicubic; /* 2 */ -} - -/** - * Correct overflow displayed oddly in IE 9. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* ========================================================================== - Figures - ========================================================================== */ - -/** - * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. - */ - -figure { - margin: 0; -} - -/* ========================================================================== - Forms - ========================================================================== */ - -/** - * Correct margin displayed oddly in IE 6/7. - */ - -form { - margin: 0; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct color not being inherited in IE 6/7/8/9. - * 2. Correct text not wrapping in Firefox 3. - * 3. Correct alignment displayed oddly in IE 6/7. - */ - -legend { - border: 0; /* 1 */ - padding: 0; - white-space: normal; /* 2 */ - *margin-left: -7px; /* 3 */ -} - -/** - * 1. Correct font size not being inherited in all browsers. - * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, - * and Chrome. - * 3. Improve appearance and consistency in all browsers. - */ - -button, -input, -select, -textarea { - font-size: 100%; /* 1 */ - margin: 0; /* 2 */ - vertical-align: baseline; /* 3 */ - *vertical-align: middle; /* 3 */ -} - -/** - * Address Firefox 3+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -button, -input { - line-height: normal; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. - * Correct `select` style inheritance in Firefox 4+ and Opera. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - * 4. Remove inner spacing in IE 7 without affecting normal text inputs. - * Known issue: inner spacing remains in IE 6. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ - *overflow: visible; /* 4 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * 1. Address box sizing set to content-box in IE 8/9. - * 2. Remove excess padding in IE 8/9. - * 3. Remove excess padding in IE 7. - * Known issue: excess padding remains in IE 6. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ - *height: 13px; /* 3 */ - *width: 13px; /* 3 */ -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Remove inner padding and border in Firefox 3+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * 1. Remove default vertical scrollbar in IE 6/7/8/9. - * 2. Improve readability and alignment in all browsers. - */ - -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ -} - -/* ========================================================================== - Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} diff --git a/src/less/planner.less b/src/less/planner.less index 2ffa914..8668251 100644 --- a/src/less/planner.less +++ b/src/less/planner.less @@ -5,30 +5,14 @@ #planner { /* Colors */ - background-color: darken(@backgroundColor, 4%); - border-top: 1px solid darken(@backgroundColor, 8%); - border-bottom: 1px solid darken(@backgroundColor, 12%); - - /* Grid */ - .clearfix(); - .options, - .order { - .column(3); - } - .order { - float: right; - } - .canvas { - .column(9); - } - .legend { - .column(9); - } + background-color: darken(@body-bg, 4%); + border-top: 1px solid darken(@body-bg, 8%); + border-bottom: 1px solid darken(@body-bg, 12%); } /* Min height */ #stage { - margin-top: @rhythmUnit; + margin-top: @line-height-computed; min-height: 550px; } @@ -42,7 +26,7 @@ position: absolute; top: 50%; left: 50%; - margin-top: -(@rhythmUnit); + margin-top: -(@line-height-computed); margin-left: -100px; } } @@ -53,23 +37,23 @@ #planner .options { /* Box */ - border: 3px double @lineColor; - padding: @rhythmUnit; - margin-top: @rhythmUnit; + border: 3px double @hr-border; + padding: @line-height-computed; + margin-top: @line-height-computed; /* Smaller font */ - font-size: @smallFont; + font-size: @font-size-small; /* Line up elems */ > label { display: block; - margin-bottom: (.5 * @rhythmUnit); + margin-bottom: (.5 * @line-height-computed); } > fieldset { border: none; padding: 0; - margin: (.5 * @rhythmUnit) 0; + margin: (.5 * @line-height-computed) 0; &.horizontal { .clearfix(); @@ -80,9 +64,9 @@ float: left; clear: right; width: 55%; - padding: (.25 * @rhythmUnit) 0 (.25 * @rhythmUnit); + padding: (.25 * @line-height-computed) 0 (.25 * @line-height-computed); - line-height: (3 * @rhythmUnit); + line-height: (3 * @line-height-computed); vertical-align: middle; .text-overflow(); @@ -100,9 +84,9 @@ /* Style inputs */ input[type='text'] { - background-color: @backgroundColor; - border: 1px solid darken(@backgroundColor, 16%); - .border-radius((2 * @borderRadius)); + background-color: @body-bg; + border: 1px solid darken(@body-bg, 16%); + border-radius: (2 * @border-radius-base); } } @@ -110,12 +94,12 @@ * Legend */ #planner .legend { - border-top: 1px solid darken(@backgroundColor, 16%); - padding-top: @rhythmUnit; - margin-top: @rhythmUnit; - margin-bottom: @rhythmUnit; + border-top: 1px solid darken(@body-bg, 16%); + padding-top: @line-height-computed; + margin-top: @line-height-computed; + margin-bottom: @line-height-computed; - font-size: @smallFont; + font-size: @font-size-small; strong, label { @@ -128,309 +112,12 @@ */ #planner .order { - margin-top: @rhythmUnit; + margin-top: @line-height-computed; #total-estimate { - .altFontFamily(); - font-size: @xLargeFont; } h2 { - .baseFontFamily(); - font-size: @largeFont; margin-bottom: 0; } } - - -// #plan { -// .clearfix(); -// #canvas { -// height:550px; -// position: relative; -// #stage { -// position: absolute; -// top:0px; -// left:0px; -// right:0px; -// bottom:0px; -// #stageinner { -// z-index:22; -// } -// } -// } - -// section { -// .column(12); -// } -// } -// .drawingID { -// display: block; -// width:100%; -// } -// #sektionform { -// .sektion { -// display:none; -// &.activated { -// display:block; -// } -// .item { -// padding-bottom:4px; -// padding-top:4px; -// border-bottom: 1px solid @lineColor; -// label { -// display: inline-block; -// margin-right: .5em; -// width: 40%; -// } -// input[type=text], input[type=email] { -// display: inline-block; -// width: 25%; -// } -// &.error { -// label { -// color: #F00; -// } -// input { -// color: #F00; -// } -// } - -// .minmax { -// color: #333; -// font-size: 11px; -// font-weight: normal; - -// &:before { -// content: ' (' -// } -// &:after { -// content: ')' -// } - -// .minval { -// &:after { -// content: '–'; -// } -// } -// } - -// } -// } -// } -// .inputgroup { -// display: block; -// padding-bottom:4px; -// padding-top:4px; -// border-bottom: 1px solid @lineColor; -// } - -// #options { -// .option { -// margin-top: @rhythmUnit; -// float:left; -// width:60%; -// } -// .generalSektions { -// margin-top: @rhythmUnit; -// .generalSektion { -// width:25%; -// float:left; -// text-align: center; -// } -// } -// clear:both; -// } - -// #price { -// border: 3px double @lineColor; -// float:right !important; -// padding:@rhythmUnit; -// text-align: right; -// width:35% !important; -// .label, .note { -// display: block; -// } -// .value { -// display: block; -// font-size: 18px; -// font-weight: bold; -// } -// .note { -// color: #666; -// font-size: 13px; -// } -// } -// #sektionlist { -// position: absolute; -// bottom:30px; -// left:0px; -// z-index:23; -// .controlLink { -// position: absolute; -// display: block; -// top:0px; -// width:20px; -// height:20px; -// color: @textColor; -// overflow: hidden; -// text-align: center; -// .icon, .name { -// line-height: 20px; -// font-size: 11px; -// font-weight: bold; - -// } -// .icon { -// display: block; -// } -// .name { -// display: none; -// } -// &:hover { -// width:100px; -// margin-left:-40px; -// .icon { -// display:none; -// } -// .name { -// display:block; -// } -// } -// } -// } -// #floor { -// background: url('../img/woodfloor.jpg') repeat-x top center; -// @include background-size(cover); -// border-top: 1px solid #f6e1cb; -// position: absolute; -// bottom: 0px; -// left: 0px; -// right: 0px; -// height: 100px; -// z-index: 20; -// } - -// .popover { -// position: absolute; -// top: 0; left: 0; -// max-height: 240px; -// width: 220px; -// display: none; -// .wrap { -// background-color: lighten(@lineColor, 20%); -// .border-radius(@borderRadius); -// .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); -// } - -// } -// .popover .title { -// background-color: lighten(@lineColor, 5%); -// color: @textColor; -// border: 1px solid @lineColor; -// border-bottom-color: darken(@lineColor, 5%); -// padding: 8px 8px; -// height: 27px; -// } - -// #ritar { -// z-index:299; -// top:0px; -// bottom:0px; -// left:0px; -// right:0px; -// background-color:#eee; -// line-height:400px; -// text-align:center; -// position:absolute; -// font-size:30px; -// opacity:0; -// -webkit-transition:opacity 0.3s ease-in-out; -// &.show { -// opacity:1; -// } -// } - -// .saveDialogs { -// background: red; -// padding: 0 @rhythmUnit; -// .content { -// .column(12, 12); -// min-height: 550px; -// .offertform { -// .item { -// padding-bottom:4px; -// padding-top:4px; -// border-bottom: 1px solid @lineColor; -// label { -// display: inline-block; -// margin-right: .5em; -// width: 40%; -// } -// input[type=text], input[type=email] { -// display: inline-block; -// width: 25%; -// } -// &.error { -// label { -// color: #F00; -// } -// input { -// color: #F00; -// } -// } -// &.radio { -// label, input { -// float:left; -// } -// label { -// width:10%; -// margin-right:0px; -// } -// input { -// margin-left:0px; -// width:20px; -// height:20px; -// } -// p { -// font-weight:bold; -// span { -// font-weight:normal; -// display:block; -// } -// } -// } -// &.buttons { -// .button { -// float:right; -// } -// } - -// .clearLeft { -// clear:left; -// } -// .clearRight { -// clear:right; -// } - -// .minmax { -// color: #333; -// font-size: 11px; -// font-weight: normal; - -// &:before { -// content: ' (' -// } -// &:after { -// content: ')' -// } -// .minval { -// &:after { -// content: '–'; -// } -// } -// } -// } -// } -// } -// } diff --git a/src/less/utils.less b/src/less/utils.less index 9280847..ef4d3db 100644 --- a/src/less/utils.less +++ b/src/less/utils.less @@ -1,42 +1,42 @@ -/* - * Horizontal description lists - */ -dl.horizontal { - dt { - .text-overflow(); - font-weight: bold; - text-align: right; +// Vertical rhythm helpers +// - clear: left; - float: left; - width: 8em; - } - dd { - margin-left: 9em; - } +.row-before-1 { + margin-top: @line-height-computed; } - -/* - * Quick hide class - */ -.hide { - display: none; +.row-before-2 { + margin-top: (2 * @line-height-computed); +} +.row-before-3 { + margin-top: (3 * @line-height-computed); +} +.row-before-4 { + margin-top: (4 * @line-height-computed); } -/* - * Quick classes for giving elements space - */ -.space-above { - margin-top: (2 * @rhythmUnit); +.row-after-1 { + margin-bottom: @line-height-computed; } -.space-below { - margin-bottom: (2 * @rhythmUnit); +.row-after-2 { + margin-bottom: (2 * @line-height-computed); } +.row-after-3 { + margin-bottom: (3 * @line-height-computed); +} +.row-after-4 { + margin-bottom: (4 * @line-height-computed); +} + +// Emphasized text +// +.emphasize { + font-style: italic; +} + +// Radio inputs replaced by images +// -/* - * Radio inputs replaced by images - */ .input-radio-image { // Enable absolutely positioned input diff --git a/src/less/variables.less b/src/less/variables.less index c8d885a..fb6696a 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -1,40 +1,44 @@ -// Semantic.gs -@total-width: 100%; - -// Page dimensions -@minWidth: 768px; -@maxWidth: 1280px; - -// Font paths -@fontPath: "../fonts"; -@FontAwesomePath: @fontPath; - -// Font families -@baseFontFamily: "Univers", "Helvetica Neue", Helvetica, Arial, sans-serif; -@altFontFamily: "LinotypeDidot", Georgia, "Times New Roman", Times, serif; - -// Typographic rhythm -@rhythmUnit: .73339rem; // 11px -@rootEm: 100%; // 16px -@smallFont: .875rem; // 14px -@largeFont: 1.25rem; // 20px -@xLargeFont: 1.8125rem; // 29px -@xxLargeFont: 2.375rem; // 38px - -@borderRadius: .125rem; // 3px - -// Colors -@backgroundColor: rgb(250,250,250); -@textColor: rgb(60,60,60); - -@strongColor: rgb(30,30,30); -@muteColor: rgb(150,150,150); -@lineColor: rgb(210,210,210); - -@linkColor: rgb(59,89,152); -@linkContrastColor: rgb(255,255,255); -@decorColor: rgb(153, 204, 114); -@decorContrastColor: rgb(54,67,40); - -@activeColor: saturate(mix(@linkColor, @decorColor, 40%), 20%); -@activeContrastColor: rgb(255,255,255); +// +// Variables +// -------------------------------------------------- + +// Font Awesome +// -------------------------------------------------- + +@FontAwesomePath: @font-path; +@borderColor: @gray-lighter; +@iconMuted: @gray-lighter; + +// Global values +// -------------------------------------------------- + +// Grays +// ------------------------- + +@near-black: lighten(#000, 4%); +@gray-darker: lighten(#000, 16%); +@gray-dark: lighten(#000, 36%); +@gray: lighten(#000, 50%); +@gray-light: lighten(#000, 64%); +@gray-lighter: lighten(#000, 84%); +@near-white: lighten(#000, 96%); + +// Brand colors +// ------------------------- + +@brand-primary: #3b5998; +@brand-info: #99cc72; + +// Scaffolding +// ------------------------- + +@body-bg: @near-white; + +// Typography +// ------------------------- + +@font-path: "../fonts"; +@font-family-sans-serif: "Univers", "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-serif: "LinotypeDidot", Georgia, "Times New Roman", Times, serif; + +@headings-font-family: @font-family-serif;