We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 16308
    • 23 Posts
    The framework defines a level of standards, a reset stylesheet, typography stylesheet and even a layout stylesheet can help with cross-browser compatibility to name just one very useful aspect of a framework.

    You need a good understanding of CSS and the framework you’re using to get the most out of using it.

    As Jay says, the framework should not define the design, but rather, the design should define the framework (or use of).

    I too, used notepad for all my coding, now I use dreamweaver - in code view - because it’s available to me, and it gives me code hinting. That doesn’t mean I don’t understand how to program in CSS, HTML, javascript and PHP. There’s no harm making life easier for yourself, as long as quality if maintained.

    I know my work is of good quality, and I know that my client’s will always be pleased with what I produce. But that is thanks to people trying leave the idea of web development as a "black art" behind.
    Open source, sharing knowledge, advancement and achievement obviously is the way forward.

    I’m not afraid to allow newcomers to the industry - as long as they produce good, clean, standards-compliant code. In which case I say, fair enough, and good luck! And these frameworks help allow people to keep their code organized.

    I’d say give the frameworks a look-in or create your own, you may find a use for them in the future!


      • 33372
      • 1,611 Posts
      I tried out Blueprint a while back and thought it was incredibly bloated and limiting. I wanted more exact control of elements than it seemed like I was going to be able to get with a grid template. I also share Shane’s reasons for being interested in and wary of CSS frameworks (I definitely don’t want to adopt anything that focuses on the purely visual at the expense of semantics).

      Maybe I’ll give BP another shot or try out one of the alternatives. I can certainly see the advantage to using a CSS framework, but I’d want to be sure before I started using it for actual sites. The last thing that I need is to have multiple versions of different frameworks out in the wild that I need to support, so I’d have to be convinced that the one I was using was the right one and was going to stand the test of time (at least better than my own code).
        "Things are not what they appear to be; nor are they otherwise." - Buddha

        "Well, gee, Buddha - that wasn't very helpful..." - ZAP

        Useful MODx links: documentation | wiki | forum guidelines | bugs & requests | info you should include with your post | commercial support options
        • 25663 MODX Staff
        • 12,272 Posts
        Working on the new modx marketing site we’ve adopted Nathan Smith’s 960 Grid System. It’s a great system that I like a lot and isn’t overly bloated, focusing on a minimal reset and JUST the layout grid (no typography).
          Ryan Thrash, MODX Co-Founder
          Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
          • 16183
          • 1,390 Posts
          Thanks folks for the insights so far. My impression so far:

          Semantics aside, my concern has been how to achieve fluid designs with frameworks. As pointed out above, seems this can be achieved using emastic.

          I found this article (pointed out by Shane in the other thread where this started) very insightful, especially the section "CSS Frameworks Do Not Solve All Your Problems". It’s good to know the limitations of the framework. These don’t necessarily make the framework bad or unusable. Meanwhile, I’ll give BP, 960 and Esmatic a whirl...

          /k
            • 3749
            • 24,544 Posts
            I haven’t tried emastic, but it appears that about half their demo pages are flawed in IE7 one way or another.
              Did I help you? Buy me a beer
              Get my Book: MODX:The Official Guide
              MODX info for everyone: http://bobsguides.com/modx.html
              My MODX Extras
              Bob's Guides is now hosted at A2 MODX Hosting
              • 3749
              • 24,544 Posts
              This looks interesting (Tripoli). Is anyone using it?

              http://devkick.com/lab/tripoli/
                Did I help you? Buy me a beer
                Get my Book: MODX:The Official Guide
                MODX info for everyone: http://bobsguides.com/modx.html
                My MODX Extras
                Bob's Guides is now hosted at A2 MODX Hosting
                • 4971
                • 964 Posts
                I use YUI... CSS and Grid...
                Started using the reset, then base, then fonts (typography)
                and finally the grid system...

                You can play with the grids at http://developer.yahoo.com/yui/grids/builder/

                They use the framework in all the Yahoo properties and
                they make sure that it works perfectly with all the supported
                browsers... which you can see at http://developer.yahoo.com/yui/articles/gbs/

                The configurator allows you to get only the stuff you are interested in (includes the javascript part).

                I am considering using the YUI javascript libraries but have not decided yet...

                The only worry that I have is that MS will buy them... and then???
                  Website: www.mercologia.com
                  MODX Revo Tutorials:  www.modxperience.com

                  MODX Professional Partner
                  • 29774
                  • 386 Posts
                  I don’t and would never use a framework. Semantic, accessible markup is the reason I abandoned tables years ago, and I really dislike the way frameworks reintroduce messy, obtuse, unreadable markup that isn’t properly linearised. Yes CSS can be fiddly, but really it’s very easy to write semantic markup and use CSS to create a layout that works cross browser. These are some of my tips:

                  * Use a reset.css
                  * Use float clear techniques to expand containing divs without additonal markup
                  * Grids: don’t put two left or right floats in a row, or you’ll trigger a variety of bugs. To get a 3 column grid float a div left and another right. Inside one of the divs float another two divs left and right.
                  * Floated elements need a width defined. It’s in the spec.
                  * Set your type globally to 1em == 12px and no smaller, eg:
                  font: 0.75em/1em "Lucida Grande", Verdana, Tahoma, Helvetica, Arial, sans-serif; /* 1em = 12px at 96ppi */
                  * Discover the joys of absolutely positioned elements inside relatively positioned elements
                  * Use a conditional comments to link a stylesheet for IE (either one or for each version), eg
                  <!--[if IE]>
                  <link rel="stylesheet" type="text/css" href="/_assets/css/iehacks.css" />
                  <![endif]-->
                  * Try to use % when specifying the widths of form elements wherever possible
                  * Use classes rather than attribute selectors on form elements, if you want it to work on IE
                  * Discover the joys of negative margins (for example, on the <legend> element)
                  * Use  contextual selectors to switch the behaviour of classes and ids dependent on context (eg, when body id="home", #home #masthead may have a unique appearance, but the markup stays the same)
                  * Try not to convey style or position information with your class or id names. Your elements may be moved about at a later date!
                  * Test and develop first in Firefox, then all the rest. Get yourself a serious testing rig.
                    Snippets: GoogleMap | FileDetails | Related Plugin: SSL
                    • 31725
                    • 1 Posts
                    Interesting discussion! First I think not always you need CSS Grid Framework! Only If you need complex grid or need something fast use some framework.
                    Someone mentioned Emastic in this discussion, I what to tell you few things about Emastic.
                    I build Emastic because I needed something small(4 kb) and flexible. If you using Emastic without Plugins shoud be working on almost every modern browser even IE5.5 , 6. With the Plugins you may experience some problems with IE. Put even without Plugins you have (Personalized width px,% or ems, Grid based on ems for better elasticity, fluid columns and other ...). And inside Plugins you have (Grid Based on absolute positioning and Grid Based on %) in the and you have 3 Grid System in one CSS Framework.
                    Then I stooped and I asked myself why do I need so complex Grid? We don’t build newspaper sites every day. And then I build http://code.google.com/p/malo/ Malo super small and simple CSS Library(Framework).
                    My point is if you need some CSS who will handle some complex grid use some Framework otherwise write your own CSS or use some small library like Malo.

                    I don’t want to make publicity for my projects here, but I will be very happy to here from you! CSS Framework without community is dead Framework.
                      • 7231
                      • 4,205 Posts
                      Good tips. I have a question on this one:
                      * Grids: don’t put two left or right floats in a row, or you’ll trigger a variety of bugs. To get a 3 column grid float a div left and another right. Inside one of the divs float another two divs left and right.
                      What bugs could this trigger. I have used this before and either I missed a bug or it worked OK. Is two in a row the issue, what about more than two? Am I mistaken or is this common practice for styling photo galleries.

                      @vladocar: nice of you to drop by. I was going to mention malo as well since I found it after emastic. Looks very interesting, like you say, if you need to handle a complex grid.
                        [font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

                        Something is happening here, but you don&#39;t know what it is.
                        Do you, Mr. Jones? - [bob dylan]