Het wordt tijd dat CSS iets van dynamiek krijgt. Dat is waar de community al jaren tegenaan loopt te schoppen. Nu zal je dat voor een simpele html pagina niet echt nodig hebben. Maar als je bijvoorbeeld Bootstrap Themes wilt maken is het erg handig. Voorbeeldje:quote:Op woensdag 5 maart 2014 10:21 schreef KomtTijd... het volgende:
[..]
Volgens mij ben je dan echt veel te veel functionaliteit in je stylesheet aan het stoppen. Kun je beter je CSS door smarty halen, kun je ze tenminste écht dynamisch opbouwen.
1 2 3 4 5 | @for $i from 1 to 6 { .col-md-#{$i} { border: #{$i}px solid #aaa; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .col-md-1{ border: 1px solid #aaa; } .col-md-2{ border: 2px solid #aaa; } .col-md-3{ border: 3px solid #aaa; } .col-md-4{ border: 4px solid #aaa; } .col-md-5{ border: 5px solid #aaa; } .col-md-6{ border: 6px solid #aaa; } |
1 2 3 4 5 | [[foreach $users as $user]] .author-bio .photo-[[$user.name]] { background: url('[[$user.avatar]]') no-repeat; } [[/foreach]] |
Ooit met een Bootstrap theme gewerkt?quote:Op woensdag 5 maart 2014 10:36 schreef KomtTijd... het volgende:
[ code verwijderd ]
Daar heb je tenminste écht iets aan, ipv dat je alsnog handmatig een array met users in je CSS/Sass moet gaan zetten.
Oh en voor iedere mogelijke style een class maken en vervolgens elementen als <a class="block roundtop col-md-2 margin-3 txt-blue bg-red"> is wat mij betreft nog ranziger dan inline-styles gebruiken, dus wat je precies met die for-loops moet is me ook niet duidelijk.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @mobile: ~"only screen and (max-width: @{screen-xs-max})"; @tablet: ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})"; @tablet-and-down: ~"only screen and (max-width: @{screen-sm-max})"; @desktop-and-up : ~"only screen and (min-width: @{screen-md-min})"; @desktop: ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{screen-md-max})"; @desktop-xl: ~"only screen and (min-width: @{screen-lg-min})"; table.table-overview { .table; .table-striped; .table-bordered; @media @tablet-and-down { .table-condensed; } } |
Enige plus die Sass heeft zijn de loopfuncties. Verder kan je met Sass ook nog zonder brackets werken zoals in Python. Maar verder is het praktisch hetzelfde als Less.quote:Op woensdag 5 maart 2014 11:16 schreef Catch22- het volgende:
[ code verwijderd ]
Hier word ik dus blij van Kan volgens mij met LESS en SASS beiden wel.
Jup. Vreselijk.quote:Op woensdag 5 maart 2014 11:13 schreef Maringo het volgende:
[..]
Ooit met een Bootstrap theme gewerkt?
Kortom, het nut is dus beperkt Je zult nooit 100 kolombreedtes in één CSS hebben.quote:De col-md-* is alleen maar om aan te geven hoeveel kolommen breed het huidige element moet zijn. Daarmee komt dus ook de margin, padding en dergelijke mee. Er komt in een goede theme dus nergens een margin-3 of txt-blue aan te pas.
Haha, ja ik bedoelde tegenover SASS.quote:
Yep. Beiden kunnen dat.quote:Op woensdag 5 maart 2014 11:16 schreef Catch22- het volgende:
[ code verwijderd ]
Hier word ik dus blij van Kan volgens mij met LESS en SASS beiden wel.
Dan kan ik je helaas niet verder helpen.quote:
Thanks! Nee, niet gedaan. Bedankt.quote:Op woensdag 5 maart 2014 09:48 schreef Tijn het volgende:
[..]
De video's van Douglas Crockford al bekeken?
Graag gedaan! Erg goed imho en nuttig voor iedereen die écht iets van JS wil leren.quote:Op woensdag 5 maart 2014 19:36 schreef robin007bond het volgende:
[..]
Thanks! Nee, niet gedaan. Bedankt.
Ik heb ook al de implementaties van bepaalde design patterns doorgenomen.quote:Op woensdag 5 maart 2014 19:39 schreef Tijn het volgende:
[..]
Graag gedaan! Erg goed imho en nuttig voor iedereen die écht iets van JS wil leren.
Ik vind het een beetje als seks met een dronken vrouw. Makkelijk en snel, maar achteraf voel je je alleen maar smerig.quote:Op woensdag 5 maart 2014 19:50 schreef Catch22- het volgende:
Ik vind bootstrap wel bazig hoor. Scheelt me veel tijd
Ik vind boilerplates en frameworks wel handig. Als ze een beetje fatsoenlijk in elkaar zitten zie je er niet meer vanaf dat je een boilerplate hebt gebruikt.quote:Op woensdag 5 maart 2014 20:19 schreef KomtTijd... het volgende:
[..]
Ik vind het een beetje als seks met een dronken vrouw. Makkelijk en snel, maar achteraf voel je je alleen maar smerig.
Dan liever SASSquote:Op woensdag 5 maart 2014 11:50 schreef boem-dikkie het volgende:
[..]
Haha, ja ik bedoelde tegenover SASS.
het bespaart mij domme tijd met simpele taken die ik kan besteden aan dingen die er toe doen.quote:Op woensdag 5 maart 2014 20:19 schreef KomtTijd... het volgende:
[..]
Ik vind het een beetje als seks met een dronken vrouw. Makkelijk en snel, maar achteraf voel je je alleen maar smerig.
Dit. Ik gebruik Bootstrap wel maar niet met volle overtuiging.quote:Op woensdag 5 maart 2014 20:19 schreef KomtTijd... het volgende:
[..]
Ik vind het een beetje als seks met een dronken vrouw. Makkelijk en snel, maar achteraf voel je je alleen maar smerig.
quote:Op woensdag 5 maart 2014 20:19 schreef KomtTijd... het volgende:
[..]
Ik vind het een beetje als seks met een dronken vrouw. Makkelijk en snel, maar achteraf voel je je alleen maar smerig.
Dat zeg ik. Net als dronken vrouwen. .quote:Op woensdag 5 maart 2014 22:27 schreef picodealion het volgende:
[..]
Dit. Ik gebruik Bootstrap wel maar niet met volle overtuiging.
Oeh, ook interessant dit. Ik heb nog een boel te leren. Je moet wel je floats even clearen .quote:Op donderdag 6 maart 2014 09:29 schreef Aether het volgende:
O'Reilly Atlas: The new learning environment from O’Reilly
Volledig te lezen boeken, o.a.:
[ afbeelding ]JavaScript Cookbook
• Create interactive web and desktop applications
• Work with JavaScript objects, such as String, Array, Number, and Math
• Use JavaScript with Scalable Vector Graphics (SVG) and the canvas element
• Store data in various ways, from the simple to the complex
• Program the new HTML5 audio and video elements
• Implement concurrent programming with Web Workers
• Use and create jQuery plug-ins
• Use ARIA and JavaScript to create fully accessible rich internet applications
[ afbeelding ]Programming JavaScript Applications
• AMD
• Asynchronous Operations, Callbacks, Promises and Deferreds
• Code Quality
• Function Polymorphism
• Function Scope, Hoisting and Closures
• Functional Programming and Stateless Functions
• Immediately Invoked Function Expressions
• Interfaces
• JavaScript Style Guide
• Lambdas
• Method Chaining and Fluent APIs
• Method Context
• Named Parameters
• Node Modules
• Object Factories
• Partial Application and Currying
• Plug-ins
• Principles of Modularity
• Prototypal Inheritance, Prototype Cloning and the Flyweight Pattern
• The Module Pattern
• Unit Testing
[ afbeelding ]HTML5 Canvas
The second edition of this popular book gets you started with HTML5 Canvas.
Learn how to draw, render text, manipulate images, and create animation—all in the course of building several interactive web games throughout the book.
This online version of HTML5 Canvas includes 53 interactive examples and exercises. In Chapter 10, you’ll create a canvas version of an arcade classic, Retro Blaster, shown below. Move your ship with the mouse or your finger, and shoot the aliens traveling across the screen.
[ afbeelding ]Node: Up and Running
Niet meer dan een simpel commando op de command-line toch?quote:Op donderdag 6 maart 2014 20:03 schreef picodealion het volgende:
maar wat een gedoe zeg om dat allemaal draaiend te krijgen
1 | [packet manager] install node |
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |