ilch Forum » Allgemein » HTML, PHP, SQL,... » [CSS] LessCSS - Leaner CSS

Geschlossen
  1. Di. 14.12.2010 15:45 Uhr #1
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    787
    Beitragswertungen
    40 Beitragspunkte
    Hallo zusammen

    Ich bin über eine interessante CSS Seite, bzw. ein interessantes CSS Script gestossen, welches ich euch nicht vorenthalten möchte. Es handelt sich wie im Titel genannt um LessCSS. Ich befasse mich auch erst seit kurzer Zeit damit, denke aber, dass ab jetzt all meine CSS Dateien damit gemacht werden.

    Am besten schaut ihr euch die Seite man an und entdeckt für euch selber, warum ich das so genial finde. Ich denke, auch ihr werdet es schnell toll finden zwinker

    Ich hoffe der Beitrag trifft auch Anklang und wird nicht als "Müll" angesehen, da es doch etwas ziemlich geniales ist und jedem Designer helfen kann.

    Vielen Dank

    Freundliche Grüsse

    Maddin

    betroffene Homepage: lesscss.org/
    2 Mitglieder finden den Beitrag gut.
  2. Di. 14.12.2010 16:00 Uhr #2
    User Pic
    oink Mitglied
    Registriert seit
    23.09.2010
    Beiträge
    740
    Beitragswertungen
    227 Beitragspunkte
    nja, interessant für leute die auf ihren systemen ruby laufen lassen können und sich damit auskennen, aber die meisten hier im forum haben ja schon probleme das "a" auf der tastatur zu finden.

    dennoch, bedingt, nice für ruby projekte
    before creation there must be destruction
    0 Mitglieder finden den Beitrag gut.
  3. Di. 14.12.2010 18:11 Uhr #3
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    787
    Beitragswertungen
    40 Beitragspunkte
    ZitatZitat geschrieben von oink

    nja, interessant für leute die auf ihren systemen ruby laufen lassen können und sich damit auskennen, aber die meisten hier im forum haben ja schon probleme das "a" auf der tastatur zu finden.

    dennoch, bedingt, nice für ruby projekte


    Gibt auch eine PHP und JS Version lächeln

    //edit: Hier auch noch ein sehr interessantes Script: headjs.com/


    Zuletzt modifiziert von MaddinXx am 14.12.2010 - 18:21:40
    0 Mitglieder finden den Beitrag gut.
  4. Di. 19.04.2011 12:57 Uhr #4
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    787
    Beitragswertungen
    40 Beitragspunkte
    Habe hier eine weitere Interessante Seite für Anpasser gefunden:

    spritegen.website-performance.org/

    Übernimmt für Laie die Erstellung von Sprite, und das ganz ordentlich.
    0 Mitglieder finden den Beitrag gut.
  5. Di. 19.04.2011 13:31 Uhr #5
    User Pic
    LittleBIGFan Mitglied
    Registriert seit
    28.11.2009
    Beiträge
    314
    Beitragswertungen
    2 Beitragspunkte
    Das CSS Script sieht wirklich interessant aus - werd mal sehen ob sich damit arbeiten lässt zwinker

    EDIT: Es ist nicht interessant.. es ist genial lachen danke MaddinXx !


    Zuletzt modifiziert von LittleBIGFan am 19.04.2011 - 13:42:04
    externer Link Guardians of the Relic
    0 Mitglieder finden den Beitrag gut.
  6. Di. 19.04.2011 13:49 Uhr #6
    User Pic
    Robert0506 Mitglied
    Registriert seit
    24.05.2009
    Beiträge
    204
    Beitragswertungen
    5 Beitragspunkte
    ZitatZitat geschrieben von MaddinXx

    Gibt auch eine PHP und JS Version lächeln

    //edit: Hier auch noch ein sehr interessantes Script: headjs.com/


    Zuletzt modifiziert von MaddinXx am 14.12.2010 - 18:21:40


    Wobei ich immer die JS Dateien in eine große Datei zusammenfasse und dann nur die eine JS Datei lade. Hatte bei PixelPhysics 5 jQuery Dateien zum laden. Overall Pagespeed war bei 71 Punkte. Nachdem ich alle jQuery Dateien in eine gepackt habe (ultimo.js) hatte ich ne overall Pagespeed von 81 Punkte. Habs auch geändert das die jQuery Hauptdatei (1.5.2) nicht mehr auf dem eigenen Server gehostet wird, sondern von der Googlcloud geladen wird! Hat auch einiges gebracht! Wobei das nur für Leute geeignet ist, bei denen die jQuery- oder Javascripte auf allen Seiten verfügbar sein soll.
    pixelphysics.de // Günstige Webdesigns und Anpassungen an Ilch
    0 Mitglieder finden den Beitrag gut.
  7. Di. 19.04.2011 14:08 Uhr #7
    User Pic
    Treicio gelöschter User
    Schönes Ding :-)
    Hab mir mal kurz alles durchgelesen und ist voll easy ^^

    Die macht von JS halt ^^
    0 Mitglieder finden den Beitrag gut.
  8. Di. 19.04.2011 14:23 Uhr #8
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    787
    Beitragswertungen
    40 Beitragspunkte
    ZitatZitat geschrieben von Robert0506

    ZitatZitat geschrieben von MaddinXx

    Gibt auch eine PHP und JS Version lächeln

    //edit: Hier auch noch ein sehr interessantes Script: headjs.com/


    Zuletzt modifiziert von MaddinXx am 14.12.2010 - 18:21:40


    Wobei ich immer die JS Dateien in eine große Datei zusammenfasse und dann nur die eine JS Datei lade. Hatte bei PixelPhysics 5 jQuery Dateien zum laden. Overall Pagespeed war bei 71 Punkte. Nachdem ich alle jQuery Dateien in eine gepackt habe (ultimo.js) hatte ich ne overall Pagespeed von 81 Punkte. Habs auch geändert das die jQuery Hauptdatei (1.5.2) nicht mehr auf dem eigenen Server gehostet wird, sondern von der Googlcloud geladen wird! Hat auch einiges gebracht! Wobei das nur für Leute geeignet ist, bei denen die jQuery- oder Javascripte auf allen Seiten verfügbar sein soll.


    Ja, head.js ist nicht die ultimative Toplösung, aber sicherlich besser als mit einzelnen Einträgen. Der Einsatz lohnt sich jedoch erst richtig, wenn auch die anderen Features zum Zuge kommen wie Browser Detection, Resolution Detection etc.

    Ansonsten verwende ich dieses Script um JS zu packen. Ergebnis = 1 Datei, diese extrem geschrumpft:

    QuickOptimizer
    0 Mitglieder finden den Beitrag gut.
  9. Di. 19.04.2011 14:42 Uhr #9
    User Pic
    LittleBIGFan Mitglied
    Registriert seit
    28.11.2009
    Beiträge
    314
    Beitragswertungen
    2 Beitragspunkte
    Öhm mal ne ganz blöde Frage.. hab jetzt mal ne kleine Seite erstellt um das Ding zu testen aber im IE geht da garnichts. Laut der Webseite soll's ja bei IE 6+ funktionieren aber IE 8 weigert sich einfach das Script auszuführen..

    Hab grad mal die less.js und die style.less reingepackt noch nichtmal groß Code drin und schon geht in IE nichts mehr -.- jemand ne Idee ?

    gesperrtes Bild


    Zuletzt modifiziert von LittleBIGFan am 19.04.2011 - 15:13:00
    externer Link Guardians of the Relic
    0 Mitglieder finden den Beitrag gut.
  10. Di. 19.04.2011 16:15 Uhr #10
    User Pic
    lordrepha Mitglied
    Registriert seit
    11.03.2006
    Beiträge
    1.362
    Beitragswertungen
    22 Beitragspunkte
    jau maddin danke die beiden scripte kann man echt mal gebrauchen. THX dafür..

    poste mal den Quellcode der für den fehler verantwortlich ist LittleBigFan
    Micro Blogging for Designer||Artworks||kostenlose Dropbox
    0 Mitglieder finden den Beitrag gut.
  11. Di. 19.04.2011 17:10 Uhr #11
    User Pic
    LittleBIGFan Mitglied
    Registriert seit
    28.11.2009
    Beiträge
    314
    Beitragswertungen
    2 Beitragspunkte
    Naja das tritt immer auf egal was ich mache... z.b. hier:

    style.less 
    body { background-color: #9c9c9c; }


    index.html 
    <head>
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js" type="text/javascript"></script>
</head>

<body>
<p>Hallo</p>
</body>


    Das Problem liegt nicht am Code sondern dass der IE den Zugriff vom Script verweigert, also es aus Sicherheitsgründen nicht ausführt. Die Frage ist warum..


    Zuletzt modifiziert von LittleBIGFan am 19.04.2011 - 17:13:41
    externer Link Guardians of the Relic
    0 Mitglieder finden den Beitrag gut.
  12. Di. 19.04.2011 18:14 Uhr #12
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    787
    Beitragswertungen
    40 Beitragspunkte
    Komisch, bei mir geht das. Evtl. hast du andere Browsereinstellungen als ich.

    Hast du das <script> mal vor den <link> gemacht? Ansonsten wäre ein Link zur Seite hilfreich.
    0 Mitglieder finden den Beitrag gut.
  13. Di. 19.04.2011 18:21 Uhr #13
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    787
    Beitragswertungen
    40 Beitragspunkte
    ZitatZitat geschrieben von MaddinXx

    Komisch, bei mir geht das. Evtl. hast du andere Browsereinstellungen als ich.

    Hast du das <script> mal vor den <link> gemacht?
    //edit: Schwachsinn, steht explizit in der Dok dass man das ned soll.

    Ansonsten wäre ein Link zur Seite hilfreich.


    //edit.. wenn man den edit und zitier Button verwechselt...sorry traurig


    Zuletzt modifiziert von MaddinXx am 19.04.2011 - 18:22:15
    0 Mitglieder finden den Beitrag gut.
  14. Di. 19.04.2011 18:49 Uhr #14
    User Pic
    LittleBIGFan Mitglied
    Registriert seit
    28.11.2009
    Beiträge
    314
    Beitragswertungen
    2 Beitragspunkte
    Naja ich hab hier ein Beispiel:

    externer Link

    Da drin ist ist eine
    index.htm: 

    <html><head><link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less.js" type="text/javascript"></script>
</head><body>
<p>Hallooo</p>
</body>
</html>


    eine style.less 
    body { background-color: #9c9c9c; p { color: #fff; } }


    Und die less.js das wars. Safari und Firefox zeigen eine graue Seite mit einem weißen Text. IE und Opera zeigen mir eine weiße Seite ohne style und blocken die less.js


    Zuletzt modifiziert von LittleBIGFan am 19.04.2011 - 18:50:46
    externer Link Guardians of the Relic
    0 Mitglieder finden den Beitrag gut.
  15. Di. 19.04.2011 19:20 Uhr #15
    User Pic
    lordrepha Mitglied
    Registriert seit
    11.03.2006
    Beiträge
    1.362
    Beitragswertungen
    22 Beitragspunkte
    jup da scheint wohl da script noch nicht ganz ausgereift zu sein...

    Falls es dich beruhigt die mainpage von denen zickt auch rum^^
    Micro Blogging for Designer||Artworks||kostenlose Dropbox
    0 Mitglieder finden den Beitrag gut.
  16. Di. 19.04.2011 19:26 Uhr #16
    User Pic
    LittleBIGFan Mitglied
    Registriert seit
    28.11.2009
    Beiträge
    314
    Beitragswertungen
    2 Beitragspunkte
    naja was heißt beruhigt... ich hatte vor meine seite mal komplett neu zu machen von grund auf und da wäre mir dieses less css script mehr als gelegen gekommen traurig

    naja man kann es ja später noch umschreiben...

    achja weiß zufällig jemand wann eine neue version von ilch kommt? 1.2 oder so weil wie gesagt will meine seite neu aufbauen und mache das jetzt auf basis von ilch 1.1 O - wenn dann 2 wochen nachdem die page fertig ist 1.2 kommt und ich alles von vorne machen muss wärs ziemlicher mist. also jemand ne ahnung?
    externer Link Guardians of the Relic
    0 Mitglieder finden den Beitrag gut.
  17. Di. 19.04.2011 19:27 Uhr #17
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    787
    Beitragswertungen
    40 Beitragspunkte
    Dann müssen wir das so zur Kenntnis nehmen lächeln

    Ich kann von meiner Seite her nur sagen, dass deine Testseite im:

    - FF 4
    - IE 6-9
    - Chrome (aktuell)

    richtig gezeigt wird - weiss auf grau.

    //edit: browsershots.org/http://www.gotrclan.de/less/#


    Zuletzt modifiziert von MaddinXx am 19.04.2011 - 20:22:17
    0 Mitglieder finden den Beitrag gut.
  18. Di. 19.04.2011 19:35 Uhr #18
    User Pic
    kdl Mitglied
    Registriert seit
    21.08.2010
    Beiträge
    333
    Beitragswertungen
    62 Beitragspunkte
    Was passiert wenn Javascript deaktiviert ist?
    .
    0 Mitglieder finden den Beitrag gut.
  19. Di. 19.04.2011 22:01 Uhr #19
    User Pic
    lordrepha Mitglied
    Registriert seit
    11.03.2006
    Beiträge
    1.362
    Beitragswertungen
    22 Beitragspunkte
    bei mir ist die schrift in allen Browsern immer grau von der Testseite.. hmmm naja
    Micro Blogging for Designer||Artworks||kostenlose Dropbox
    0 Mitglieder finden den Beitrag gut.
  20. Di. 19.04.2011 23:55 Uhr #20
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Also es gibt da natürlich noch andere Projekte wie turbine.peterkroener.de/download.php aber da gibts sicher noch mehr.
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    1 Mitglieder finden den Beitrag gut.
  21. Mi. 20.04.2011 00:15 Uhr #21
    User Pic
    LittleBIGFan Mitglied
    Registriert seit
    28.11.2009
    Beiträge
    314
    Beitragswertungen
    2 Beitragspunkte
    hm danke werd mich mal umschaun... aber das less css ist schon hammer

    EDIT: Habs geschafft jetzt läuft es in allen Browsern lächeln


    Zuletzt modifiziert von LittleBIGFan am 20.04.2011 - 18:10:25
    externer Link Guardians of the Relic
    0 Mitglieder finden den Beitrag gut.
  22. Do. 21.04.2011 20:56 Uhr #22
    User Pic
    Treicio gelöschter User
    schalt mal js aus ^^
    dann mal schaun was die less.js bringt ^^

    das bringt nichts. weil wenn man js ausschaltet ist am ende die ganze seite unbrauchbar.
    0 Mitglieder finden den Beitrag gut.
  23. Do. 21.04.2011 21:37 Uhr #23
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    787
    Beitragswertungen
    40 Beitragspunkte
    Ich habe gelesen, dass richtet sich vor allem an Entwickler, sollte aber dann nicht produktiv eingesetzt werden. Ein Grund ist sicher auch war Treicio andeutet...

    Laut SmashingMag muss das so angewandt werden, dass man etwas mit less.js macht, schlussendlich aber den Output in eine .css kopiert für die richtige Seite.

    Wenn man sich jetzt fragt, was es dann bringt? Naja gleich viel wie vorher, mit der Ausnahme dass nach einer Änderung der Schritt mit dem Kopieren wiederholt werden muss. Die Entwicklung beschleunigt es dennoch massiv.

    Gruss
    Maddin
    0 Mitglieder finden den Beitrag gut.
  24. Fr. 22.04.2011 12:46 Uhr #24
    User Pic
    LittleBIGFan Mitglied
    Registriert seit
    28.11.2009
    Beiträge
    314
    Beitragswertungen
    2 Beitragspunkte
    ZitatZitat geschrieben von Treicio

    schalt mal js aus ^^
    dann mal schaun was die less.js bringt ^^

    das bringt nichts. weil wenn man js ausschaltet ist am ende die ganze seite unbrauchbar.


    Nunja das Problem löst man ganz einfach lächeln 

    <link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js" type="text/javascript"></script>
<noscript><link rel="stylesheet" type="text/css" href="style.css" /></noscript>


    Falls JS deaktiviert ist oder nicht funktioniert springt durch den noscript-Tag die css-Datei ein. Außerdem wird auf jeder Seite Javascript verwendet, auch ohne dass Less CSS eingebaut ist - also ist es eher unwahrscheinlich dass es jemand aktiviert hat zwinker

    Und wenn's doch jemand nicht aktiviert hat sieht bei dem sowieso jede Seite aus wie Müll weil sämtliche Slider und Scripts nicht korrekt dargestellt werden ^^

    Hoffe das hilft vllt dem ein oder anderen weiter funktioniert auch wenn der IE das Script blocken sollte! lächeln


    Zuletzt modifiziert von LittleBIGFan am 22.04.2011 - 12:51:08
    externer Link Guardians of the Relic
    0 Mitglieder finden den Beitrag gut.
  25. So. 24.04.2011 14:31 Uhr #25
    User Pic
    Treicio gelöschter User
    ist aber mehr Arbeit im enteffekt xD
    Wil wenn du sowieso die CSS datei schreibst wozu brauchst du dann die less datei? xD
    1 Mitglieder finden den Beitrag gut.
  26. So. 24.04.2011 14:35 Uhr #26
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    Da hat er Recht. lächeln

    Außerdem lädt die Seite doch länger, da erst die Javascript-Datei geladen werden muss und diese dann die verkürzte CSS-Datei erst noch in für Browser lesbaren Code umwandeln muss.

    Und deren Beispiel verstehe ich auch nicht so ganz ...
    Wenn sich Werte wiederholen, können IDs, Klassen und html-tags auch ohne Javascript kombiniert werden: 

    #header, h2 {
  color: #4D926F;
}


    In deren CSS-Datei finde ich beispielsweise folgendes: 
    border-top: 2px solid lighten(@alpha-blue, 20%);

    Warum nicht einfach so? 
    border-top: 2px solid #123456;



    Zuletzt modifiziert von jankrug am 24.04.2011 - 14:43:54
    0 Mitglieder finden den Beitrag gut.
  27. So. 24.04.2011 15:34 Uhr #27
    User Pic
    Treicio gelöschter User
    Mag zwar alles toll aussehen hat aber alles riesen nachteile.

    Man kann alels kurz zusammenfassen:
    - An das richtige CSS kommt es nicht ran. Denn CSS läuft einfach und ist nicht vor irgendwas anderem abhängig ( außer vllt. HTML ^^ ).
    0 Mitglieder finden den Beitrag gut.
  28. Do. 30.06.2011 21:11 Uhr #28
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    787
    Beitragswertungen
    40 Beitragspunkte
    Auf den Sinn der Links gehe ich nicht mehr ein, ich missbrauche diesen Tread einfach dazu neue spannende Entdeckungen zu posten:

    Hier was für Sprite:

    externer Link

    und hier was in Richtung less.css:

    pcss.wiq.com.br/

    2 more:

    sass-lang.com/

    leafo.net/lessphp/docs/

    Gruss


    Zuletzt modifiziert von MaddinXx am 30.06.2011 - 21:49:35
    0 Mitglieder finden den Beitrag gut.
  29. Fr. 01.07.2011 12:09 Uhr #29
    User Pic
    iVirus Mitglied
    Registriert seit
    28.07.2008
    Beiträge
    1.250
    Beitragswertungen
    30 Beitragspunkte
    sass & haml 4 ever frech

    sass-lang.com/
    haml-lang.com

    @oink
    entwickelst du auf ruby, bzw. rails? zwinker


    Zuletzt modifiziert von iVirus am 01.07.2011 - 12:11:16
    0 Mitglieder finden den Beitrag gut.
  30. Fr. 01.07.2011 13:07 Uhr #30
    User Pic
    Tr3icio gelöschter User
    Ich bleibe bei CSS3 :-P Kann schon alles ^^
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten