Anzeige

Strategie für eine neue Bootstrap-Seite

Strategie für eine neue Bootstrap-Seite | PSD-Tutorials.de

Erstellt von 1A_Photoshop, 27.09.2015.

  1. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Strategie für eine neue Bootstrap-Seite
    Hab mir das neue Bootstrap heruntergeladen und will mir eine neue Fotowebseite bauen.
    Habe auch zwei drei tolle Themes gefunden, die aber ein wenig umgeschrieben werden müssten.
    Nun meine Frage:
    Wie geht man Strategisch am Besten vor, wenn man später die neusten Bootstrap-Dateien updatet. Bügelt man später einfach die JS-Dateinen einfach über die anderen - Oder macht so was nicht?

    Bei den CSS-Datein stellt sich ja fast eine ähnliche Frage.
    Schreibe ich meine Änderungen in die vorhanden CSS-Dateien oder lege ich mir dazu lieber eine eigene an?
     
    #1      
  2. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Strategie für eine neue Bootstrap-Seite
    Idealerweise verwendest du einen CSS Preprocessor wie Sass und importierst lediglich das die Bootstrap.css in deinem primären Stylesheet. Dazu die neuste Version von Bootstrap herunterladen und die bootstrap.min.css in bootstrap.min.scss umbenennen. In (d)einer app oder main.sass importierst du dann die einzelnen Files via @import.
    Code (Text):
    1. /* --| main.sass or main.scss |-------------------- */
    2.  
    3. @import "bootstrap.min";
    Anschließend compilierst du die bootstrap.scss zusammen mit deinen Stylesheets zu einem CSS und bindest lediglich diese ein. Dieser Weg hat zwei große Vorteile. Du kannst einerseits die Bootstrap.css leicht durch eine andere ersetzen und hast gleichzeitig lediglich einen HTTP Request für dein CSS.

    Bei und mit der Bootstrap.min.js nicht anders vorgehen. Mit Hilfe eines Compilers (z.B. CodeKit oder Prepros) oder Task-Runner (Gulp, Grunt) deine ganze Scripte in einer Datei zusammenfassen. Lediglich jQuery würde ich separat einbinden. Alles andere, sei(en) es Bootstrap, Plugins und sonstige Funktionen, in einer komprimierten functions.min.js zusammenschnüren.

    Du kannst aber auch ohne Preprocessor die bootsrap.css einfach in (d)einem CSS importieren. Jedoch spielt der IE8 da nicht mit. Für dieser müsste also ein Fallback her. Da könnte man die Bootstrap auch gleich vor dem eigentlichen Stylesheet einbinden. So oder so hätten man auch einen unnötigen HTTP Request mehr. Daher auch der Tipp mit Preprocessoren wie Sass, LESS oder Stylus zu arbeiten.

    Liebe Grüße, Patrick
     
    Zuletzt bearbeitet: 27.09.2015
    #2      
    Rata gefällt das.
  3. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Strategie für eine neue Bootstrap-Seite
    Boah, vielen Dank für deine ausführliche Antwort Patrick.
    Das Ganze muss ich jetzt erst einmal sacken lassen.
    Mit einem Preprocessor wie Sass habe ich noch nie gearbeitet. Scheint mir aber auf Grund deiner Beschreiung sinnvoll zu sein.
    Ehrlich gesagt weiß ich mit Sass im Augenblick noch gar nichts anzufangen.
    Das es das gibt habe ich bereits auf holdirbootstrap.de gelesen.
    Gibt es eine Anleitung, möglichst auf deutsch, wie ich mir für Sass eine Entwickler-Umgebung einrichte?
     
    #3      
  4. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Strategie für eine neue Bootstrap-Seite
    Jonas Hellwig (Kulturbanause) hat hier und da Beiträge über Sass/SCSS in seinem Blog. Deutschsprachige Inhalte bezüglich Sass sind im Internet dann doch eher dünn gesät. Für den Einstieg sollte aber folgender Beitrag ausreichen.

    - Kulturbanause.de » Einstieg in Sass - Funktionsweise und Überblick

    Wer CSS beherrscht, wird eigentlich auch mit einem Preprocessor wie Sass keine Probleme haben. Für den Anfang reicht es schon, wenn du lediglich deine CSS in SCSS umbenennst. Anschließend auch die bootstrap.css mit der .scss Endung versiehst und diese deiner main.scss importierst. Danach nur noch deine main.css kompilieren. Sass muss dafür auch nicht zwingend auf deinem OS installiert werden. Du kannst deine Files auch einfach über einen Compiler mit GUI compilieren. Zum Kompilieren dir Prepros (Win/Mac/Linux) und CodeKit (Mac only) wärmstens empfehlen kann. Jedoch geht das ganze auch mit der kostenlosen Scout App.

    Was jetzt IDE's angeht, kann ich dir Brackets (Adobe) und Atom (GitHub) wärmstens empfehlen. Beide sind OpenSource und dank zahlreicher Extensions beinah beliebig erweiterbar. Ich arbeite mittlerweile ausschließlich damit und nicht mehr ohne will. Installiere Brackets und such anschließend in der Erweiterungs-Verwaltung (Bauklotz in der rechten Toolbar) nach Sass. Extension installieren und der Drops ist gelutscht.

    Solltest du weitere Fragen oder Probleme haben, einfach melden.
    Sofern möglich, helfe ich dann gerne weiter.

    Liebe Grüße, Patrick
     
    Zuletzt bearbeitet: 27.09.2015
    #4      
    Rata gefällt das.
  5. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Strategie für eine neue Bootstrap-Seite
    Vielen Dank Patrick.
    Das klingt danach das ich heute Abend noch eine Menge zu lesen bekommen habe.
    Danke für die Links.
    Hab ich das jetzt richtig verstanden? Ich nehme eine lehre meine.css benenne dies um in
    meine.scss. Dann bennen ich die bootstrap.css in bootstrap.scss . Jetzt kopiere ich den ganzen Inhalt aus der bootstrap.scss in meine.scss und beginne mit den Änderungen in meiner.scss (Sehe ich meine Änderungen zu diesem Zeit bunkt schon?) Zum Schluss kompiliere ich das Ganze zu meiner.css. Richtig?
     
    #5      
  6. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Strategie für eine neue Bootstrap-Seite
    Nein, du kopierst nicht den Inhalt der Bootstrap.scss in dein CSS sondern importierst diese in deiner mein.scss. Deine Verzeichnisstrukur könnte dann wie folgt aussehen.
    Code (Text):
    1. [css]
    2. - - bootstrap.scss
    3. - - main.scss
    In deiner main.scss importierst du dann die bootstrap.scss
    Code (CSS):
    1. @import "bootstrap";
    2. /* --| Danach kommen dann deine eigenen Formatierungen |---- */
    Der Compiler schnürt dir dann ein "großes" CSS, kompiliert also alles zu einer main.css. Genau diese wird auch im Kopfbereich (head) deiner Seite eingebunden.
    Damit deine Änderungen permanent sichtbar sind, müssen all deine SCSS (oder Sass) Files überwacht werden. Genau dies geht wunderbar mit den von mir genannten Compilern. So bekommst du auch ohne große Umwege eine Live-Preview deines Projects.

    Wenn du mit Windows arbeitest, solltest du Prepros zum Compilieren verwenden. Unter Mac entweder Prepros oder CodeKit. Ich habe in den letzten Monaten einige Compiler getestet und die beiden genannten daher wärmstens empfehlen kann. Auch wegen einiger anderer Features favorisiere.

    Liebe Grüße, Patrick
     
    #6      
    Rata gefällt das.
  7. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Strategie für eine neue Bootstrap-Seite
    Klar doch, verstehe das jetzt. Danke für die Erklärung.
    Habe mir jetzt Brackets heruntergeladen, bindet man das kostenlosen Scout App dort ein?
     
    #7      
  8. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Strategie für eine neue Bootstrap-Seite
    Brackets ist lediglich eine Entwicklungsumgebung (IDE), mit der du arbeiten kannst. Sprich dort dein Sass/SCSS schreibst. Die Scout App installieren, dein Projekt hinzufügen und dann einfach bei Input auf deine main.scss verweisen. Unter Output gibst du das Verzeichnis an, in dem deine main.css ausgegeben werden soll. Jetzt nur noch auf das Play-Icon klicken.
     
    #8      
    Rata gefällt das.
  9. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Strategie für eine neue Bootstrap-Seite
    Danke ich verstehe. Werde das gleich mal ausprobieren.
    Vielen Dank für die Hilfe.
     
    #9      
  10. noltehans

    noltehans Aktives Mitglied

    Dabei seit:
    02.06.2009
    Beiträge:
    558
    Geschlecht:
    männlich
    Strategie für eine neue Bootstrap-Seite
    Ich habe mein letztes Projekt mit uikit (http://getuikit.com/) und Less gebaut.
    Das ganze ohne externe Compiler sondern nur mit Brackets.

    Zum kompilieren von Less habe ich das Brackets-Plugin LESS AutoCompile benutzt.
    https://github.com/jdiehl/brackets-less-autocompile
    oder für SASS
    https://github.com/jasonsanjose/brackets-sass
    (NOCH NICHT GETESTET)

    Zum zusammenfügen der CSS Dateien (CSS aus der LESS/SASS und meiner CSS) habe ich CSS Concat genommen.
    https://github.com/wykapedia/brackets-css-concat
    (Geht natürlich auch über den Compiler, aber ich fand, dass der Livepreview schneller reagiert)

    Und zu guter Letzt die CSS noch mit dem Minifier for Brackets minimiert.
    https://github.com/wylst/brackets-minifier

    Alles geht voll automatisch, jede Änderung in der LESS/SASS/CSS wird sofort im Livepreview dargestellt
    und das minimieren der CSS wird beim speichern erledigt.

    Was Patrick in seinen sehr schönen Postings leider nicht erwähnt hat, ist das "abspecken" der LESS/SASS Hauptdatei.
    Ich habe hier gerade Bootstrap 3.3.5 mit LESS.
    Wenn ich mir die bootstrap.less anschaue, sehe ich zig Sachen, die ich für das jeweilige Projekt nict benötige.
    Breadcrumbs, Pagination, Badges usw.
    Also, alles was du nicht benötigst, einfach auskommentieren. (Vorher ein Backup machen)
    So bekommst du eine schlanke CSS Datei.

    Zum zusammenfügen und minimieren von JS Dateien kannst du JS Concat nehmen.
    https://github.com/smiclea/brackets-js-concat


    Ach ja, die ganze Geschichte habe ich mir Portable eingerichtet, läuft also auch vom Stick.
    http://sourceforge.net/projects/bracketsportable/
    Seid Brackets 1.4 ist diese Version auch wirklich Portable.
     
    #10      
    Rata gefällt das.
  11. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Strategie für eine neue Bootstrap-Seite
    Vielen Dank noltehans,
    auch für deine sehr ausführliche Antwort.
    Puh, im Augenblick kann ich noch gar nicht sagen, in welche Richtung ich mich entscheide, zu sehr ist das von meiner alten Arbeitsweise mit selbst geschrieben css-dateien entfernt.

    Derzeit erschlägt mich das alles ein wenig. Die Themes die ich heruntergeladen habe, haben manchmal bis zu zehn verschiedene monstrose Css-Dateien. In denen ich jedes mal über die Suchfunktion erst fündig werden kann. Eine sehr schlechte zeitaufwendige Arbeitsweise für mich.

    Nun bin ich am überlegen, alles selbst von Picke auf zu lernen oder umständlich die Themes zu analysieren und umzuschreiben. Beides ist mehr Zeitaufwand verbunden, den ich gerade eigentlich nicht habe. Allerdings bin ich auch jemand der sehr gerne dazu lernt und auch gern mal über den Tellerrand schaut. Hm???
     
    #11      
  12. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Strategie für eine neue Bootstrap-Seite
    Das Abspecken kann man auch händisch machen oder gleich auf der Bootstrap Website unter Costomize erledigen. Danach einfach die abgespeckte Version herunterladen und in das eigene Projekt einbinden.
    Hier noch, da noch und... - genau deshalb einen externen Compiler oder "Task-Runner" wie Grunt vorziehe. ;) Ich habe anfangs auch die ein oder andere Extension zum Kompilieren und Komprimieren genutzt. Bleibt ja jedem selbst überlassen. Wer jedoch wie ich nicht nur mit CSS Preprocessoren arbeitet (Stichworte: Haml, Jade, Coffee-Script), wohl eher einen externen Compiler bemühen wird.
    Geht in Prepros und CodeKit ebenso. Auch das Zusammenführen diverser Scripte ist schnell erledigt. Zusätzlich kann das ganze direkt via FTP hochgeladen werden. Letzteres nutze ich vor allem bei der Entwicklung von WordPress Themes. Ganz praktisch und spart einiges an Zeit. Ich organisiere eh alles in einem Builds-Verzeichnis mit zwei Unterordnern. Einmal "development" sowie "production". Unter development findet man alle "Rohdaten" und im "production" Verzeichnis landen dann lediglich die kompilierten Dateien. So ist alles sauber getrennt, strukturiert und bleibt übersichtlich.
    Genau deshalb habe ich dir zu Sass geraten. Im Gegensatz zu LESS hast du die Wahl, welche Syntax du verwendest. Selbst wenn du nicht mit Mixins, Variablen und anderen Features arbeitest, ist der Wechsel ein Kinderspiel. Wie schon beschrieben musst du lediglich die Dateiendung in .scss ändern und am Ende deine Datei(en) kompilieren.

    Du musst keine neue Syntax lernen. Schreibst wie gewohnt dein CSS. Nutzt lediglich Sass-Imports. Wenn du irgendwann Lust, Zeit und Interesse hast, beschäftigst du dich weiter mit den interessanten Features, die ein CSS Preprocessor wie Sass (SCSS), LESS oder Stylus mit sich bringt.
    Wenn es dir zu viel ist, du dich damit nicht beschäftigen kannst, willst oder möchtest, es auch händisch geht. Auf der Bootstrap Website das "Framework" unter Costomize anpassen. Anschließend die bootstrap.min.css in deinem Editor öffnen, Quellcode markieren und mit Strg/Cmd+C in die Zwischenablage kopieren. Jetzt deine main.css öffnen und ganz oben (vor deinen Formatierungen!) über Strg/Cmd+V einfügen. Wenn es ein Update gibt, musst du "nur" Bootstrap wieder händisch in dein CSS kopieren.
    Wenn es so viele Cascading Stylesheets sind, Pfui! ;) Ich arbeite nur noch mit Sass. Komme dann zwar auf circa 50 (und mehr) externe Sass und SCSS-Files. Spielt jedoch keine Rolle, da nach dem Kompilieren lediglich ein großes (komprimiertes!) CSS als Output herauskommt. ;)

    Zu guter Letzt noch ein Tipp an dich. Wenn du deine Website mit Bootstrap komplett neu aufsetzen möchtest, solltest du vielleicht solange abwarten, bis der Final Release von Bootstrap 4 angeboten wird. Derzeit befindet sich Bootstrap 4 in der Alpha-Phase. Denke aber das die Beta und Final-Version nicht all zu lange auf sich warten lässt.

    Vielleicht bis dahin einfach die Zeit mit einem CSS Preprocessor überbrücken. Sprich dein CSS Grundlagenwissen erweitern und dann mit der neusten Version des "Twitter Frameworks" arbeiten. Wenn du wenigstens mit "imports" und dem Kompilieren deiner SCSS klar kommst, auch das spätere Updaten leicht von der Hand geht.

    Ich kann wirklich jeden nur dazu ermutigen über den Tellerrand zu schauen. Egal was andere meinen, denken oder sagen. Solang man mit Interesse, Neugier und Spaß dabei ist, man nur gewinnen kann. Wenn es beruflich nicht relevant ist, Zeit keine Rolle spielt. Der Lernprozess bei jedem unterschiedlich.

    Manche habe eine schnelle Auffassungsgabe, andere brauchen vielleicht etwas länger. Man sollte am besten kleine (realistische) Ziele stecken und vor Augen haben, und nicht zu viel auf einmal verlangen. Denn gerade die kleinen Erfolgserlebnisse zwischen durch, sind genau die, die einen pushen am Ball zu bleiben. Ob man jetzt autodidaktisch vorgeht, in Fachlektüren wälzt, doch lieber Seminare besucht oder andere Publikationen wie Video-Trainings verwendet, kommt ebenso auf einen selbst an.

    Viktor, egal für welchen Weg du dich entscheidest, ob und wie weit du bereit bist, über den Tellerrand zu schauen. Ich kann nur sagen, mach es! Wünsche dir dabei vor allem viel Spaß und Erfolg. Wen es dann doch mal hier und da nicht so läuft, einfach fragen. Genau für solche Anliegen gibt es ein Forum wie dieses. Du bist also in der PSD-Community bestens aufgehoben.

    Liebe Grüße, Patrick
     
    #12      
  13. Fugel

    Fugel rebmeM PSD Beta Team

    Dabei seit:
    28.02.2008
    Beiträge:
    703
    Geschlecht:
    männlich
    Ort:
    Freiberg
    Software:
    Netbeans, Photoshop CC, InDesign CC, Illustrator CC, Lightroom CC, Suitcase Fusion 6
    Kameratyp:
    Canon EOS 60D
    Strategie für eine neue Bootstrap-Seite

    Ich will dir hier mal etwas mut geben ;-)
    Ich glaube es war auch Patrick vor ein paar Wochen der mir den Anstoß gegeben hat auf SCSS um zu steigen und ich kann dir sagen den dreh hast du innerhalb von ein paar Stunden raus. Es erleichtert die Arbeit wirklich um einiges.

    Also nur Mut, so schwer ist es wirklich nicht ;-)
     
    #13      
  14. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Strategie für eine neue Bootstrap-Seite
    Vielen Dank Patrick und auch Fugl fürs Mut machen.
    Die Logik mit Sass zu CSS-Dateien zukommen, habe ich scheinbar verstanden.
    Ich hab jetzt mir auch die Bootstrap ported from Less to Sass heruntergeladen.
    Aber die Verzeichnisstruktur versteh ich erst einmal nicht. Mit welchen Dateien sollte ich meine ersten Versuche machen und welche brauche ich erst einmal nicht anfassen oder gar nicht in Verzeichnisse kopieren?
    Normalerweise würde ich erstmal mit der oberen Navigation beginnen.
    Gehören trotzdem alle Dateien in ein Verzeichnis?
    Wie baust du das auf Patrick?
     
    #14      
  15. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Strategie für eine neue Bootstrap-Seite
    Die nach Sass portierte Version solltest du vielleicht erst einmal außen vor lassen und lediglich mit der kompilierten Version arbeiten. Dafür lediglich Bootstrap herunterladen und wie weiter oben beschrieben die bootstrap.min.css in bootstrap.min.scss umbenennen.
    Wenn bezüglich Preprocessor kein Grundlagenwissen vorhanden ist, du dich also erst in Sass (SCSS) einarbeiten musst, eher von einem Framework wie Bootstrap abrate. Allgemein sollte man solche Frameworks erst einsetzen, wenn man sie richtig kennen gelernt hat und weiß warum dieses oder jenes so oder so umgesetzt wurde.

    Wenn du Bootstrap trotzdem einsetzen möchtest, dann solltest du dieses Frakework lediglich auf dessen Website über Costomize anpassen und in deinem SCSS importieren. Danach lediglich deine Formatierungen verwenden und gegeben Falls einzelne Default-Werte durch eigene überschreiben.
    Kann ich nicht mit einem klaren Ja oder Nein beantworten. Wenn man sich jedoch mit BEM (Block-Element als Modifier), OOCSS (Object-Oriented CSS) und SMACSS (Scalable and Modular Architecture for CSS) auseinandergesetzt hat, man auch die unterschiedlichen Konzepte kennt und Preprocessor einzusetzen weiß, man definitiv modular arbeiten wird. Hier mal eine nette Zusammenfassung:

    - OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?

    Wenn du dich damit beschäftigen möchtest, darf meiner Meinung nach ein Buch nicht fehlen. Und zwar Jonathan Snooks »SMACSS - A flexible guide to developing sites small and large.« Gibt es als E-Book. Man kann es aber auch online kostenlos als OpenBook lesen. Ist jedoch auf englisch.
    Ganz am Anfang lege ich eine (für mich) sinnvolle Verzeichnisstruktur an. Orientiere mich da am Guide von Jonathan Snook. Kurz gesagt, alles wird modular umgesetzt. Arbeite häufig mit der PowerShell (Windows) oder dem Terminal (Mac). Ansonsten immer mehr mit Gulp werkel. Jetzt jedoch einfach mal beim Aufbau bleibe und dir lediglich meine Verzeichnisstruktur zeige.
    Code (Text):
    1.  
    2. [builds]
    3. - [development]
    4. - > [assets]
    5. - - > [css]
    6. - - - > main.sass // alle Unterverzeichnisse werden hier importiert!
    7. - - - > [tools]
    8. - - - - > [libs] // bourbon, compass
    9. - - - - > [frameworks] // bootstrap, foundation etc.
    10. - - - - > [resets] // normalize
    11. - - - - > [fonts] font-awesome, web-fonts etc.
    12. - - - > [base]
    13. - - - - > // base, variablen, cta (buttons) etc.
    14. - - - > [modules]
    15. - - - - > // video, slider, forms etc.
    16. - - - > [sections]
    17. - - - - > // jede sections in einer eigenen section-(name).sass
    18. - - - > [themes]
    19. - - - - > // pages - home, about, work etc.
    20. - - - > [print]
    21. - - - - > // Printausgabe (adaptiert vom HTML5Boilerplate)
    22.  
    Beim Start komme ich allein damit schon auf knapp 130 externe Sass/SCSS Files und mehr. Sobald an der Seite gearbeitet wird, es auch weiter anwächst. Wie viele es direkt beim Start ohne großes Zutun sind, hängt auch mit den verwendeten Frameworks zusammen. Mittlerweile eigentlich nur mit Bourbon oder Compass arbeite. Bootstrap, Foundation und Co. immer seltener werden. Interessanterweise wird es auch mit den ganzen Dateien keineswegs unübersichtlicher. Eigentlich ist das genaue Gegenteil der Fall. Zugegeben, anfangs war es schon ungewohnt. Mittlerweile aber nicht mehr missen möchte. Kurz und knapp, es rockt einfach! :)

    Liebe Grüße, Patrick
     
    Zuletzt bearbeitet: 30.09.2015
    #15      
  16. 1A_Photoshop

    1A_Photoshop Nicht mehr ganz neu hier

    Dabei seit:
    06.06.2012
    Beiträge:
    191
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop
    Kameratyp:
    Fuji S5 Pro und Canon 600d
    Strategie für eine neue Bootstrap-Seite
    Vielen Dank Patrick,
    ich schau mal, das mich die ganzen Begriffe nicht erschlägen.
    Ich hab mir jetzt erst mal ein Buch bestellt:
    Flexible Boxes: Eine Einführung in moderne Websites. Responsive Webdesign verstehen (Galileo Computing)von Peter Müller

    Auf Arbeit habe ich Edge Reflow CC von Adobe das macht irgendwie auch einiges.
    Aber so ganz versteh ich noch nicht die Vorgehensweise. Ich muss wohl viel nachholen in dem Bereich. Irgendwo habe ich gelesen das man eigentlich mit der kleinsten Variante (Handy) bei der Gestaltung beginnt. Ist das richtig? Und ergeben sich dann die anderen Varianten von selbst oder müssen die jeweils einzeln angelegt werden für ein responsive Design?
     
    #16      
  17. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Strategie für eine neue Bootstrap-Seite
    Richtig, man spricht von Mobile-first. Man dreht quasi den Spieß um. Zuerst wird die Seite für das kleinste Device gestaltet bzw. umgesetzt. Mit Media Queries arbeitet man sich quasi vom kleinsten zum höchst möglichen Device hoch. Genau das geht vor allem mit Hilfe eines Preprocessors ziemlich einfach. Sei es mit Mixins und Variablen. Die unterschiedlichen Versionen müssen natürlich "einzeln" angelegt werden.

    Liebe Grüße, Patrick
     
    #17      
Seobility SEO Tool
x
×
×