[css] Wat is tegenwoordig een relaxte manier om stylesheets

[Sando]

[css] Wat is tegenwoordig een relaxte manier om stylesheets te ontwikkelen?

---

offtopic:
Misschien een gewaagd topic volgens het Devschuur beleid betreffende "Welk programma is nou eigenlijk het beste?"-achtige vragen, maar dat is niet de vraag die ik wil stellen. Het gaat mij om workflows/tools/truuks waar ik nog niet van op de hoogte ben. Verder is iedereen uiteraard prima in staat te bepalen wat er bij hen past. Maar een topic met ideeën ter referentie kan m.i. waardevol zijn voor iedereen.

---

Als ik een website ontwikkel, begin ik meestal in Geany (of Notepad++ als ik in Windows werk), en schakel ik over naar Eclipse als het enige substantie begint te hebben. Gewoon puur tekst, en veel refreshen in de browser.

Maar omdat er steeds meer steeds mooiere css designs komen, steeds meer bullshitsites die mooi zijn en miljard html5 'apps' in Chromium enzo van Jan en alleman en de hond van de buurvrouw en hun dochter, ze zien er allemaal zo gelikt uit. Daarom vraag ik me af wat tegenwoordig een goeie tool, framework of workflow is om dat spul wat efficiënter te ontwerpen, want er moet haast wel wat zijn waardoor gelikte css layouts opeens zo ogenschijnlijk moeiteloos verschijnen.

Of ik ben gewoon lui aan het worden, kan ook, maar meestal als iets er veel is, dan is er een handigheid voor. Ik heb het een en ander bekeken, maar voel me nergens rijk mee. Het liefst heb ik iets voor Eclipse omdat ik die toch het meeste gebruik, dus laat ik daar beginnen. Want ik heb de hele market doorgespit en eigenlijk maar twee relevante hits gevonden. Maar het kan ook iets anders zijn. Hier enkele plugins/programma's/truuks die ik al geprobeerd heb:

• Aptana is een plugin voor Eclipse. Ik hoor veel over Aptana hoe chill dat wel niet is, maar al het goeie wat ik lees en hoor is vaak niet meer beschikbaar in Aptana Studio 3. De PHP development tools zouden erg mooi zijn; niet langer in Aptana. En ontopic, de css-editor zou handig zijn. Not anymore. De css-editor kleurindicator van schreenshots met eyedropper color picker bestaat niet meer. Tegenwoordig heb je een colorpicker onder Commands -> other -> css -> color picker, maar die is bij mij altijd greyed out en hardly een handigheid anymore. Maar sowieso bevalt Aptana me niet, het verbergt Eclipse-menu-items die ik gebruik, en voegt 100 items toe die ik niet gebruik. Het contextmenu wordt 4 keer zo lang.
• Amaya is een open source WYSIWYG editor van W3C, zoiets lijkt me in eerste instantie het handigst, maar deze tool loopt voor mijn gevoel achter de feiten aan: Op het eerste gezicht niet makkelijk inzetbare CSS3 grapjes, en voelt erg aan als Netscape Composer, de eerste en laatste WYSIWYG editor die ik 15 jaar geleden gebruikte.
• Kompozer is een soort Amaya, maar dan anders. Voelt nog ouder aan. HTML4. Trage development.
• SeaMonkey Composer lijkt wel alsof dit (een fork van) Netscape Composer is.
• Chrome Development Tools heeft zo'n CSS explorer in de browser, erg handig. Je kunt ook CSS on-the-fly aanpassen. Erg handig. Maar het grote nadeel is dat je alle edits weer terug moet koppelen naar je eigen source in je eigen favo editor (Eclipse/Geany/Notepad++) om het te laten sticken. En je kan niet lekker de CSS van de explorer kopiëren en plakken want dan ben je al je indentation en comments kwijt.
• Mozilla Firebug is ongeveer precies het zelfde voor Firefox, ook out of the box.
• Opera Dragonfly is ongeveer precies het zelfde, ook out of the box, maar dit is imo de handigste van de drie omdat deze als enige een frickin' colorpicker heeft.
• Tau UI studio is de enige die er chill uitziet en een plugin voor Eclipse is, maar deze is spoorloos verdwenen: http://marketplace.eclipse.org/content/tau-ui-studio

Zoals je misschien doorhebt zoek ik het zelf allemaal nogal in de open source scène. Toevallig heb ik ook een licentie voor Dreamweaver (kwam 'gratis' bij zo'n suite), maar die heb ik nooit gebruikt, en gebruik ik ook liever niet. Ik start alleen Windows als ik met Photoshop of video bezig ga. Verder is mijn workflow helemaal Linux. En Adobe doesn't play nice there. Van screenshots ziet het er ook maar uit als een soort Eclipse immitatie.

Wat is jouw CSS workflow? Is er iets wat wèl handig is, wat ik niet tegen ben gekomen?

[Barryvdh]

Ik gebruik Netbeans en mijn collega (de designer) gebruikt Coda, maar dat is allebei hetzelfde idee als Aptana, dus met aangeven welke waardes wel/niet mogelijk zijn, colorpicker en evt compatibiliteit met browsers.

Verder idd Chrome Development Tools, maar ook de Web Developer toolbar, die wel een colorpicker en liniaal ed heeft.

Verder gebruiken we de laatste tijd vooral LESS, in combinatie met Twitter Bootstrap, en dan een aantal eigen mixins/tweaks, zodat we een standaard starterkit hebben (DRY), voor de meest gebruikte onderdelen. Kwestie van kleuren/variabelen aanpassen, en je hebt al een basis.
Verder maakt LESS het ook wel fijner om gestructureerd te werken, met variabelen, nesting en mixins.

[ Voor 0% gewijzigd door Barryvdh op 21-05-2012 10:08 . Reden: Bootstrap link aangepast ]

[Sando]

Netbeans is de grote broer van Eclipse, nietwaar? Volgens mij deed ik daar een decennium geleden wat javadevelopment mee op school, maar had al snel het idee dat Eclipse wat makkelijker was.

Coda ken ik niet. Wikipedia vertelt mij dat het voordeel is dat dit specifiek voor webdevelopment is, maar het nadeel is commerciëel èn OSX.

Die Web Developer Toolbar klinkt interessant, alleen zijn er misschien meerdere plugins die hetzelfde heten?
Volgens deze site is het een plugin voor Firefox en Chrome:
http://chrispederick.com/work/web-developer/
Maar volgens deze site is het een Firefox-extensie:
http://webdevelopertoolbar.org/

Ik zal er eens naar gaan kijken.

edit:

De huidige toolbar doet het niet bij mij in Chromium 18.0.1025.151. Althans, de knopjes als edit css werken niet.

edit:

Pendule voor Chromium is hetzelfde maar dan iets nieuwer en mooier.

LESS, hoewel niet direct wat ik zoek, is ook wel interessant. Ik had nooit gedacht/geweten dat er zelfs een framework is om CSS te 'automatiseren'. Is LESS Watch mode een auto-updater als je de stylesheets in je favo editor opslaat, of heb ik dat verkeerd begrepen?

De bootstrap-link is dood/squatted, maar ik googlede even de juiste url:
http://twitter.github.com/bootstrap/
Ziet er ook interessant uit. Ook niet echt een css-editor, maar op het eerste gezicht een concullega van jQuery-UI. Wat wel weer meetelt voor manieren om snel een goed uitziende site/webapp neerzetten.

Bedankt voor de input.

[ Voor 17% gewijzigd door Sando op 21-05-2012 00:14 ]

[Blauw]

Sando schreef op zondag 20 mei 2012 @ 23:23:
LESS, hoewel niet direct wat ik zoek, is ook wel interessant. Ik had nooit gedacht/geweten dat er zelfs een framework is om CSS te 'automatiseren'. Is LESS Watch mode een auto-updater als je de stylesheets in je favo editor opslaat, of heb ik dat verkeerd begrepen?

LESS is ook onderdeel van Twitter bootstrap (zie onder) en is héél fijn.

Sando schreef op zondag 20 mei 2012 @ 23:23:
De bootstrap-link is dood/squatted, maar ik googlede even de juiste url:
http://twitter.github.com/bootstrap/
Ziet er ook interessant uit. Ook niet echt een css-editor, maar op het eerste gezicht een concullega van jQuery-UI. Wat wel weer meetelt voor manieren om snel een goed uitziende site/webapp neerzetten.

Niet helemaal een conclulega van jquery, omdat dit zich echt focussed op een heleboel handige technieken bij elkaar, zoals 960 grid, responsive design, jquery en buttons e.d. Extreem handig en wat mij betreft echt een must-have voor 'modern' webdevelopment. Dit is echt de basis van ongeveer ieder nieuw project dat ik doe, behalve als het gaat om WordPress development want dan gebruik ik Rootstheme -> http://www.rootstheme.com/

[Sando]

Leuk, ik leer een hoop nieuwe dingen vandaag. Als ik een keer voldoende tijd heb ga ik me eens verdiepen in Twitter Bootstrap en RootsTheme.

Ondertussen 'vind ik' nog steeds dat er een makkelijke manier moet zijn om oldskool van de grond af gebouwde sites wat makkelijker van een likje css te voorzien. Want wordpress-sites (templates) bouw ik ook (nog) gewoon op de oldskool manier.

edit:

Wat wellicht interessant is voor de Eclipse gebruikers, ik heb nu 4 CSS (text)editors en slechts twee ervan hebben CSS code-completion.

• Amateras CSS editor nee
• CSS Editor nee
• CSS Source Editor ja
• CSS.Django Templates Editor (Aptana) ja

Het liefst gooi ik Aptana weer weg want ik heb zo snel nog geen meerwaarde gevonden (op FTP support na) maar het is verder wel erg zwaar. Alleen weet ik niet welke van ["CSS Editor", "CSS Source Editor"] nu standaard bij de Eclipse WDT hoort, en bij welke plugin die andere ookalweer hoort.

[ Voor 43% gewijzigd door Sando op 21-05-2012 02:50 ]

[Barryvdh]

Niet helemaal een conclulega van jquery, omdat dit zich echt focussed op een heleboel handige technieken bij elkaar, zoals 960 grid, responsive design, jquery en buttons e.d.

Hij had het over jQuery UI, niet jQuery. Maargoed, het is nog steeds niet hetzelfde, want jQuery UI is meer widgets ed., terwijl Bootstrap dus een soort starter framework is, voor veelgebruikte componenten.

Overigens kan je het ook wel steeds vanaf scratch bouwen, maar als je snel/veel websites/webapps wil bouwen, doe je toch vaak hetzelfde (formulieren, thumbnails, grid, breadcrumbs, dropdown menu's etc) (Hoeft niet perse Bootstrap te zijn, je kan ook zelf basis maken met het DRY principe)

NetBeans is idd oorspronkelijk Java, maar heeft ook php/css bundle; http://netbeans.org/features/javascript/index.html

[ Voor 5% gewijzigd door Barryvdh op 21-05-2012 10:16 ]

[dev10]

Moet het persé een gratis of open-source pakket zijn? Anders kan ik je PHPStorm of WebStorm van harte aanbevelen: http://www.jetbrains.com/phpstorm/ en http://www.jetbrains.com/webstorm/. Het ligt er een beetje aan wat je precies voor webontwikkeling doet. Als je alleen HTML, CSS en JavaScript doet, is Webstorm voldoende. Doe je daarnaast ook nog PHP, dat is PHPStorm in mijn ogen een must have.

De CSS editor van beide IDE's is erg goed. Groot voordeel is dat je kunt uitbreiden met plugins, waaronder plugins voor Sass en Less zodat je daarmee ook aan de gang kunt.