ResponseEve HTML Template

Responsive HTML template DemoDownload

Ich habe mich in letzter Zeit intensiv mit responsive Webdesign befasst und unter anderem auch ein paar entsprechende CSS-Frameworks getestet (von denen es inzwischen einige gibt), auf deren Basis man solche Layouts aufbauen kann. Unter anderem bin ich auf Inuit gestoßen und die Idee des Autors Harry Roberts, das Basis-Framework mit Plugins, sogenannten "igloos", erweitern zu können, hat mir gut gefallen. Außerdem gibt es auf seiner Webseite einen Grid-Generator, mit dessen Hilfe 12- oder 16-spaltige Grids mit beliebiger Breite erstellt werden können.

Hier das Ergebnis, und dieses möchte ich heute der Community zur Verfügung stellen!

Features, Credits, Lizenzen

  • HTML-Template mit zwei Unterseiten (Playground und Kontakt), responsive - verändern Sie die Größe Ihres Browserfensters!
  • Inuit-CSS-Framework mit 16-spaltigem Grid und maximaler Breite von 1120 Pixel.
  • 3 getrennte CSS-Dateien (inuit, grids und eve-styles.css), sodass inuit und grids bei Bedarf leicht ausgetauscht werden können und eigene Styles getrennt entwickelt werden können.
  • FlexSlider von Tyler Smith auf der Startseite (gleichzeitig auch als Ticker eingesetzt) - dieser Slider ist ebenfalls responsive und bietet einige Features. Besuchen Sie die FlexSlider-Webseite, um mehr zu erfahren!
  • Kontaktformular mit Formalize - dieses JQuery-Plugin von Nathan Smith sorgt dafür, dass die Darstellung von Formularen in allen Browsern möglichst konsistent ist.
  • Icons von Alex Peattie, die nach Wunsch auch als Webfont verwendet werden können
  • Das Script respond.js von Scott Jehl ermöglicht die Darstellung von media queries in älteren Browsern (IE7 + 8 zum Beispiel).
  • Schriftart "Oswald" von Vernon Adams, eingebunden durch @font-face
  • Übersichtlicher, kommentierter, standardkonformer Code
  • Zu diesem Template wird KEIN psd zur Verfügung gestellt - es ist reines CSS. Logo und Bilder sollten durch andere ersetzt werden.
  • HTML template with two subpages (playground and contact), responsive - resize your window to test it!
  • Inuit-CSS-Framework with 16 columns grid and max-width of 1120 pixels.
  • 3 separated CSS files (inuit, grids and eve-styles.css), so you can easily update inuit and grids and work out your own styles without messing up the basics.
  • FlexSlider by Tyler Smith on the homepage (also running the news-ticker) - this slider is responsive and has some nice features. Visit the FlexSlider website to find out more!
  • Contact page with Formalize - this JQuery-plugin, made by Nathan Smith, gives you CSS endeavors to bring sanity to form styling in all browsers. This is a styled form but it won´t submit anything unless you include a fitting script.
  • Icons made by Alex Peattie, you can download the whole set and even use them as a webfont!
  • Includes respond.js from Scott Jehl to enable responsive web designs in browsers that don't support CSS3 Media Queries (IE 8 and under for example).
  • Font "Oswald", made by Vernon Adams, is embedded with @font-face.
  • Clean, commented, valid code with some nice CSS3 features
  • ResponsEve comes free, so please understand that no guarantee or service is provided - sorry.
  • There is NO psd for this template provided - it is pure CSS and logo and pics are meant to be replaced.

ResponseEve basiert auf HTML5 und CSS3 und ist daher für moderne Browser konzipiert, es funktioniert in älteren Browsern nur eingeschränkt. Da ich es gratis zur Verfügung stelle, gibt es weder Service noch irgendeine Garantie, ich bitte um Verständnis. Grundkenntnisse in HTML und CSS sind notwendig, um mit dem Template zu arbeiten und es entsprechend anzupassen. Die in den Dateien verwendete (internationale) Sprache ist Englisch. Das Kontaktformular ist NICHT funktionsfähig, es stellt lediglich die nötigen HTML- und CSS-Elemente zur Verfügung.

ResponseEve is, due to it´s functions, only working in modern browsers. The contanctform isn´t a working one, but the styles are in place. As the template is free, no service or guarranties are provided - please understand. However, I´m available to make payed customization work. ;)

Inuit CSS-Framework: Apache Licence, Version 2.

FlexSlider: MIT-Lizenz

Formalize: GPL und MIT

respond.js: GPL und MIT

Icons von Alex Peattie: Free-Art-Licence

Schriftart "Oswald" von Vernon Adams: SIL 1.1-Lizenz

eve-styles.css steht unter MIT (X11) Lizenz. Hier die deutsche Erklärung und Übersetzung.

Sie verwenden Eve und haben Möglichkeiten gefunden, es zu verbessern? Teilen Sie Ihr Wissen hier mit, dann haben auch andere etwas davon!
You´re using Eve and found possibilities to improve it? Share your knowledge here so others can learn from it, too!

Edit July 2014: Version 2 is here!

Eve v.2 is here!

Version 2 von Eve ist fertig und basiert auf Foundation von Zurb. Dieses CSS Framework ist eines der am aktivsten entwickelten und solidesten Frameworks auf dem Markt und bringt auch viele neue Features mit sich. Also: Unbeding reinschauen! ;)

Version 2 of Eve is finally finished and based on Foundation from Zurb, one of the most improved and solid CSS frameworks out there. It also includes some awesome new features, so check it out! ;)

Kommentare

  1. Camilla Wrang meint

    Hey! This template looks really good. I am creating my first website and want to use some of the coding, but I have a big problem. I can’t seem to change the logo-img in the top corner. When I put another image in the src=”” code, it doesn’t change the image. What am I doing wrong?
    Regards Camilla

    • SG-Layout meint

      Hi, Camilla! As I can´t look at it (no URL provided), I can only guess. There are two possibilities: 1.) The path to your image is wrong. 2.) Your image is in the wrong folder. Please check these – good luck and thanks for the compliment!

      • Camilla Wrang meint

        Hi again! Thank you for your answer. I changed the logo now. But now that I places all my elements, images, text, etc. I can’t seem to change the color or the font-format. When I try to change it in inuit.css, my changes don’t appear when I refresh the pages. E.g. how do I change the color of the text and the buttons?

        I hope you want to help me sort this out :)

        • SG-Layout meint

          Don´t change inuit.css, Camilla. These are core functions. Use custom.css – the font colors are there. If you want to change something from inuit.css, copy it to custom.css and change then.

          • Camilla Wrang meint

            Oh, I see! But I don’t have any file with the name custom.css in the ResponseEve folder that I downloaded. Can you tell me where I can get that file? :)

  2. meint

    I like the simplicity of this template and may consider using it. Do we need to keep the copyright in place or can we remove it or set it to “display:none?

    • SG-Layout meint

      It´s free for personal and commercial use with no need to keep the copyright in place. Enjoy it! I´d appreciate to see the result! :-) I have chosen the non-restrictive license that´s provided with it in the hope that people are polite enough to not claim they are the author or even sell it somewhere else. Open source can be a wonderful thing if all play fair.

  3. Diana B meint

    I am using your template and am loving it but I am having a problem trying to figure out how to add the dropdown menu. I would think I just need to add some code so that the dropdown.css works. I am an armature so I am limited in my abilities of working with css. If you could help, I would appreciate it very much.

    Thank you,
    Diana

    • SG-Layout meint

      Not sure which dropdown.css you are talking about… Eve does not have the dropdown ability – you would have to search and incorporate the code, CSS and maybe JS for such a menu yourself, sorry.

  4. meint

    Hi,
    I would like to take this opportunity to Thank You for a Lovely Template.
    It’s been enjoyable customising it, and still so much that can be done.
    I’m a weather enthusiast who has recently used Eve template on my site.
    My webpage shows the local weather of Wodonga, Australia. It’s where I live.

    Drop by and See say G’Day
    Cheers’
    Pete.
    http://www.wodongaweather.net

    • SG-Layout meint

      Hey, Pete – you did a real good job and the template fits perfectly for your purpose – congrats and thanks for sharing! If you allow me to suggest something: You could match the heading titles with the green in your logo if you change the color in eve-styles.css, line 89, to #76BE44 (and the same in line 71 + 73 if you want to match the nav, too). :-) Kind Regards to Australia!

      • meint

        Apriciate your feedback and advice. Thank you, I’m liking it as is. Keeping it simple … works for me :)
        Im not a Web Dev, but Im enjoying working on Eve. It’s the best template I have worked with. When I get stuck I Google and somehow manage to make the idea work. The chanlanges are rewarding when I accomplish them.
        Cheers’
        Pete

  5. meint

    Hello, Still working on it but we are really pleased with this template easy to use !
    Thanks!!
    Just wondering how I can integrate social sharing from facebook instead of the used “div class=”social” ”
    Any clue?
    Thanks

    • SG-Layout meint

      Looks great so far! Regarding social sharing: Depends on which code/social sharing method you want to use … I´m sure you´ll find a tut about how to implement FB code.

  6. bayareamarketing meint

    Pleased to say that I built a substantial site w/ approx 50 pages of varying configuration for a “members section” of our website. Development was a breeze thanks to the solid framework provided here, and I was especially impressed at how easy cross-browser development was. Most things Just Worked and looked good on the first attempt. On top of that, the license terms of both the template and its included libraries are carefully considered and quite liberal. Silvia, you’ve done us a kindness and I’m sure I speak for many when I say “thanks”.

    • SG-Layout meint

      Always pleased to hear or see what people do with it and glad you enjoyed working with it! Many thanks for letting me know, much appreciated! Wish you all the best – and some good traffic for your site! :)

  7. epo eleses meint

    i’ll change this template for my website….if u made again…html5 i will follow ur design …for another site..terima kasih

    • SG-Layout meint

      I´m currently still testing it, got to iron out some details. No preview as the look is still the same, but the “ingredients” changed and there are some more possibilities now. Will be showcased in the demo then. :)

  8. meint

    I just wanted to thank you for creating this template. It was very easy to both implement and customize and my site looks and works all the better for it. Since the responsive version of my site went live last October mobile visitors are staying on my site 1.6 times longer than they were previously!

    Thanks again and keep up the good work.

    Bob

Trackbacks/ Pingbacks

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *