pwired Posted June 7, 2013 Share Posted June 7, 2013 Did some digging about css frameworks in google. Found some links that might be usefull to read. 2 good articles about css frameworkshttp://coding.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/ http://www.gridsystemgenerator.com/do it yourself css layouthttp://designshack.net/articles/css/rolling-your-own-grid-layouts-on-the-fly-without-a-framework/interesting css frameworkshttp://www.bluetrip.org/ http://www.devarticles.com/c/a/Web-Style-Sheets/Introducing-the-BlueTrip-CSS-Framework/http://daneden.me/toast/https://github.com/coyr/nivelstylehttps://code.google.com/p/logicss/http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/ 3 Link to comment Share on other sites More sharing options...
diogo Posted June 7, 2013 Share Posted June 7, 2013 http://learnlayout.com/ 2 Link to comment Share on other sites More sharing options...
cstevensjr Posted June 8, 2013 Share Posted June 8, 2013 Awesome, knowledgeable and always helpful community members paired with incredible software, continue to make PW a step above all others. Link to comment Share on other sites More sharing options...
OrganizedFellow Posted June 8, 2013 Share Posted June 8, 2013 There are a few other topics floating around regarding css frameworks, etc. I believe that before any one uses a prebuild framework, that they should first build their own. Knowing how it's done goes a long way into understanding the logic used in other frameworks. I have built a few myself. Some were using em for widths, another used hard-coded percentages, yet another used LESS to auto generate the percentages with varying column widths. After learning all I could on how grids work, I tackled some of the better known models and have settled on Zurb Foundation. It is as bloated as many other big frameworks, but I always end up removing the fluff I don't need Link to comment Share on other sites More sharing options...
pwired Posted June 8, 2013 Author Share Posted June 8, 2013 So then, would be interesting to know, who is using what css framework and why - - - - ? and who is coding his own responsive css layout and how - - - - ? Example would be nice. 1 Link to comment Share on other sites More sharing options...
OrganizedFellow Posted June 8, 2013 Share Posted June 8, 2013 So then, would be interesting to know, who is using what css framework and why - - - - ? and who is coding his own responsive css layout and how - - - - ? Example would be nice. Currently using Foundation 4.2.1. Fully responsive, mobile first, easy to generate complex layouts, nestable grids. I've been using Foundation since it was on version 2. They've made some great strides improving the framework. Since mid version 3, I stopped coding my own. Simply because browser testing became cumbersome and tedious. While I greatly enjoyed building my own css framework, the "wars/debates" between Skeleton, HTML Kickstart, Twitters Bootstrap and other popular titles, was becoming tougher to choose an alternative to a DIY method. I just got tired of reinventing the wheel. 1 Link to comment Share on other sites More sharing options...
Manfred62 Posted June 8, 2013 Share Posted June 8, 2013 hmm, the most links in the first post are really old? Think today it's mandatory to build a site responsive. Made my first two (small) responsive projects with Kube. Easy to understand and use. Nice documentation. Not so bloated like the big ones. Also there are two demo site to learn from. Locally I'm just playing around with Pure. Also a nice slim framework. For me a small framework like Kube or Pure is really helpful. Like OF said: no need to reinvent the wheel. BTW: this thread should be better placed under 'Dev Talk' (no PW topic..)? 2 Link to comment Share on other sites More sharing options...
apeisa Posted June 8, 2013 Share Posted June 8, 2013 Yes, moved to dev talk. Link to comment Share on other sites More sharing options...
kongondo Posted June 8, 2013 Share Posted June 8, 2013 Some stuff, probably related to this discussion... http://processwire.com/talk/topic/2959-head-and-footinc-based-on-html5-boilerplate-for-basicexampleprofile/ http://processwire.com/talk/topic/2284-responding-to-responsiveness/ http://processwire.com/talk/topic/3442-how-do-you-layout/ (this one was hijacked by myself and others ) Link to comment Share on other sites More sharing options...
slkwrm Posted June 9, 2013 Share Posted June 9, 2013 This on is pretty thought-provoking: Dive into Responsive Prototyping with Foundation Edit: Oh, and this one even more: Responsive Comping: Obtaining Signoff without Mockups 3 Link to comment Share on other sites More sharing options...
dragan Posted June 9, 2013 Share Posted June 9, 2013 Somewhat related: http://37signals.com/svn/posts/1061-why-we-skip-photoshop Link to comment Share on other sites More sharing options...
MatthewSchenker Posted June 9, 2013 Share Posted June 9, 2013 Greetings everyone, Thanks for this discussion -- especially the parts about skipping Photoshop! I can't tell you how many times I have done work for agencies where the Photoshop mockup doesn't actually look the way the live site will look. Unless you are doing a "sketchy" mockup in something like Balsamic, the whole point of a mockup is to closely represent the site. Otherwise, it's just a nice bit of impractical artwork, and then you have to explain to the client, "Well, that was just a mockup..." I never understood that. I've always favored building live sites as "mockups" or "test sites." Regarding CSS/JS frameworks: I still don't use any of them. But every discussion like this makes me feel that I need to start. And here we have another advantage of using ProcessWire! Because it is so easy to create whatever designs you want with ProcessWire, it's pretty easy to mockup a few versions of the site you're working on. Thanks, Matthew 1 Link to comment Share on other sites More sharing options...
ceberlin Posted June 9, 2013 Share Posted June 9, 2013 Only problem with foundation: It is not tolerant at all to older browsers. From our stats still more than 20% of the users come from IE 8 and older. That is a real pain. Link to comment Share on other sites More sharing options...
hheyne Posted June 10, 2013 Share Posted June 10, 2013 There is a GIT project which deals with older IE Versions like 8. I don't know if they go wide behind version 8. https://gist.github.com/zurbchris/5068210 Link to comment Share on other sites More sharing options...
totoff Posted June 10, 2013 Share Posted June 10, 2013 Only problem with foundation: It is not tolerant at all to older browsers. From our stats still more than 20% of the users come from IE 8 and older. This is why I'm currently working on a Processwire site profile based on unsemantic grid system. It claims itself the successor to the 960 grid system and promises backwards compatibility down to IE 7. My site profile still needs a little polishing but I'll than make it public on Github. Hope to have it ready by the end of this week. You can see a preview here. 3 Link to comment Share on other sites More sharing options...
kongondo Posted June 10, 2013 Share Posted June 10, 2013 Looking nice totoff. Is this only for frontend or you are doing Admin theme as well? Link to comment Share on other sites More sharing options...
totoff Posted June 10, 2013 Share Posted June 10, 2013 Is this only for frontend or you are doing Admin theme as well? Thanks kongondo. In the moment it's only meant as a basic starting point for frontend development. I have no plans for an admin theme. Link to comment Share on other sites More sharing options...
pwired Posted June 10, 2013 Author Share Posted June 10, 2013 Made my first two (small) responsive projects with Kube. Easy to understand and use. Nice documentation.Not so bloated like the big ones. Also there are two demo site to learn from. After some playing around, Kube seems to be a good one to start with for my coding level, thanks. Link to comment Share on other sites More sharing options...
pwired Posted June 10, 2013 Author Share Posted June 10, 2013 At dragan http://37signals.com/svn/posts/1061-why-we-skip-photoshop Use illustrator to make quick mockups then either stay in illustrator or export parts to photoshop. Or create in photoshop and import in illustrator. Many try photoshop simulations with the latest css and js but it always looks a bit dull and blurred when compared with photoshop. Same story with adobe flash that always looked so damn crispy clear and shiny. Todays html5 and css still don't come close to adobe flash. But hey Big Apple banned adobe flash and a new hype was born. Also photoshop graphics are 100 % browser compatible and need much less database calls compared with the database calls needed for all that mathematical css and js. check this out http://www.photoshopwireframingkit.com/ Link to comment Share on other sites More sharing options...
totoff Posted June 10, 2013 Share Posted June 10, 2013 After some playing around, Kube seems to be a good one to start with for my coding level, thanks. Kube is indeed nice, but doesn't support IE7 either. Also less is not my favourite preprocessor. A nice overview is this site: http://usablica.github.io/front-end-frameworks/compare.html 1 Link to comment Share on other sites More sharing options...
Roope Posted June 10, 2013 Share Posted June 10, 2013 960.gs was the one that really kicked in then back in the days - for me and many others. I liked it so much that when I decided that we need to build our own fluid grid system, it had to be based on 960 syntax and be fully compatible with ancestor. BFluid was born. Since then it's been my one and only choise for css grid. Why to build own css grid when world is full of them? Simple - they don't bend the way you want. Most are based on fixed column count and don't support gutter + padding in cells. I also hate to have axtra markup for every row or extra class names for first/last items. BFluid is build on LESS so you can create custom grids on the fly. And have as many or as little of columns as you need - with gutter and padding. Nesting, multiple grids, fixed grid, semantic markup - it's all there. All we would need is some spare time to build cool site for it - or at least decent documentation. Maybe this summer.. 1 Link to comment Share on other sites More sharing options...
pwired Posted June 10, 2013 Author Share Posted June 10, 2013 Finally a css framework that doesn't søck http://gridiculo.us/index.html Based on a twelve columns grid Max site set widths of 1280px, 960px, 640px, 320px and full width Allows for nested columns Spacer columns available Fully responsive images Responsive typography Works on desktops, tablets and smart phones Optimized for iPads and iPhones Includes Normalize.css by Nicolas Gallagher and Jonathan Neal https://github.com/cbavota/Gridiculous Link to comment Share on other sites More sharing options...
arjen Posted June 11, 2013 Share Posted June 11, 2013 I've been using Susy for some small personal projects and once you get the hang of it every other framework feels like a bloat. Their adagium is: Your markup. Your design. Our math. Sound familiair? 1 Link to comment Share on other sites More sharing options...
horst Posted June 11, 2013 Share Posted June 11, 2013 This is why I'm currently working on a Processwire site profile based on unsemantic grid system. It claims itself the successor to the 960 grid system and promises backwards compatibility down to IE 7. My site profile still needs a little polishing but I'll than make it public on Github. Hope to have it ready by the end of this week. You can see a preview here. Hi totoff, it looks very good. Why do you haven't done it last month? Now I had to build my new site on a basic html5 boilerplate. (und durchwandere im Moment ein Tal der Tränen beim Versuch all die hinzugefügten jQuery slider-, slideshow-, und 'was nich alles' -styles miteinander zu vereinen) When starting with it, it should be IE7+ compatible, but if it is so, after I'm done? Who knows. Link to comment Share on other sites More sharing options...
kongondo Posted June 11, 2013 Share Posted June 11, 2013 Hmm...I think you guys have convinced me to leave Foundation 3 for Kube . I like the "split" css class as well. Link to comment Share on other sites More sharing options...
Recommended Posts