56 comments

  • Jordan LittleJordan Little, almost 5 years ago

    When I took my current job I spent the first few weeks developing my own that I now maintain and update as we build.

    It helped me learn a lot about building a framework (had to tear apart some other frameworks to get some ideas), vertical rhythm, building modular systems, and I had a blast doing it. I highly recommend you give it a shot sometime - I've found that I'm working much more quickly with my own framework than I was with others.

    When I do need to use a 3rd party framework, I prefer ones that don't build out too many modules. I like to build the larger chunks myself, but I like a framework that provides good typography basics, a basic grid, form normalization (and good normalization in general), and a hearty reset. Inuit CSS by Harry Roberts is a great one. I've been meaning to try Pure, too.

    With Bootstrap et al, it seems like I inevitably end up having to fight against the framework and I don't like the amount of nested markup they tend to require.

    13 points
    • Julian LengfelderJulian Lengfelder, almost 5 years ago

      I would love to know more about your process in developing your own framework. Is it available somewhere like github?

      1 point
      • Jordan LittleJordan Little, almost 5 years ago

        It's all internal at the moment, but I do plan on cleaning it up and putting it up on github. I use Harry Roberts' idea of a shame.css file and currently it's busting at the gills...

        My process was to start with our product roadmap and come up with a set of tools to help myself and the backend devs move quickly.

        I like standards so I first came up with a set of rules to follow in the framework. I'm a big fan of OOCSS and BEM so those got baked in. Mobile-first was a given. No ID's. JS specific handler classes (.js--action) to avoid any clashes with devs. I try to avoid unnecessary nesting of declarations and do not use naked HTML selectors in objects. I knew we'd need multiple sites inheriting the framework so there's a config.scss that each site has that controls fonts, colors, spacing, etc.

        The first milestone was typography. I'm on a 22px vertical rhythm (16px/1.35em) that sometimes works all the way down the page. :| I set up all my naked HTML elements and got them looking good and working well with each other before making tons of little helper classes to do things like unstyled UL's, clip overflowed sentences to ellipses, remove layout (margin:0,padding:0), and other little utilities.

        Then I built a 12-col grid based on floats (we support some older browsers that can't do flex or inline-block) and added some guttered classes, then some offset classes using position:relative so I can reorder my markup and still have columns where I want them.

        Each major logical chunk or feature gets its own "component" that usually inherits from an object. For example, I have a .nav object that cleans up the basic nav element. Our main navigation would have the classes "nav main--nav" with .nav providing basic functionality and .main--nav providing context specific tweaks.

        It really is a lot of fun to work on. Lots of interesting problems to solve when you're not solving any one problem, but trying to account for all possible problems!

        13 points
        • Joel CalifaJoel Califa, almost 5 years ago

          This is fascinating. Thanks for posting this!

          1 point
        • Julian LengfelderJulian Lengfelder, almost 5 years ago

          Wow. Awesome! Thank you!

          I guess I am going use this as sort of a guideline in building my own framework :)

          Keep us posted, when you are releasing yours to Github.

          0 points
          • Jordan LittleJordan Little, almost 5 years ago

            No worries! I myself mainly looked at Inuit CSS and SmaCSS a lot when building mine. I'm using SCSS, by the way.

            I'm just sitting here waiting on my girlfriend to get home from the office so we can go eat luuuuunch (starving) so here are some notes and gotchas that you don't have to read:

            Think abstractly about your objects and when you might use them. Sometimes you'll start building a specific feature, say a slideshow, and realize that it's actually a few simple objects (img, text box, arrow buttons) combined. Keep that mindset throughout the process and making oddly-specific components later on will be much easier.

            One HUGE piece of advice I have is to use box-sizing:border-box on a global scope and treat your grid like a scaffold. That is, keep your grid completely separated from your content. An element with a grid class shouldn't have another class for styling purposes. This makes managing padding and margins so much easier. Burned myself bad for a few weeks on that one.

            Use Icomoon and/or Fontawesome. Icon fonts are the bee's whole freakin' legs. Using their unicode (/e625, for example) symbols in pseudoelements has changed my life. I use Illustrator on a 16px grid to make my own SVGS and Icomoon to combine them with Fontawesome. I then export the font from Icomoon embedded in its own CSS file which I import.

            Think ahead more about using @extends. At first my grid was only available to HTML in class form. I quickly realized I needed to make them available as extensions in the SCSS.

            Use BEM. It makes a lot of sense when writing OOCSS and when working with developers. Does get repetitive.

            Aww yee - it's eatin' time. Good luck and I'll let you know if I release to github. I really do need to put it on there! In the meantime, look to Harry Roberts, Nicole Sullivan, Jonathan Snook, Ethan Marcotte, and whoever else because they know way more than I do. :)

            3 points
  • Cenk ÇakmakCenk Çakmak, almost 5 years ago

    I use Flexible Grid System. http://flexible.gs

    11 points
  • Rick WaaldersRick Waalders, almost 5 years ago

    Bourbon and Neat:

    http://bourbon.io/http://neat.bourbon.io/

    9 points
  • Andy LeverenzAndy Leverenz, almost 5 years ago

    Do you really need a framework?

    5 points
    • Jason Fuller, almost 5 years ago

      No, however they can speed up development amongst over things, this is why I'm posing the question to see what people use and why?

      5 points
      • Andy LeverenzAndy Leverenz, almost 5 years ago (edited almost 5 years ago )

        Simple. To make things easier for everyone.

        At most I would establish a grid as a "framework". And I don't mean any type of over complicated grid. After that use your own type of CSS. Everyone who builds on the web understands CSS and if you make them have to study and become familiar with a framework then I would say your taking one step backwards.

        You can accomplish what most frameworks do with various mixins and a plan. With this method you reduce any type of code bloat or version dependency.

        In short, have a plan and everything will be cool. A framework will only just slow you down unless you are simply prototyping.

        0 points
    • Crampa ...Crampa ..., almost 5 years ago

      Definitely not, especially in any sort of professional environment. They're a nightmare.

      0 points
  • Adam ConradAdam Conrad, almost 5 years ago

    Bourbon + Bitters + Neat from thoughtbot. All of the grid and variable goodness of Bootstrap without the style defaults.

    3 points
  • Catalin CimpanuCatalin Cimpanu, almost 5 years ago

    I used to be down with Amazium for most of my projects in the past.

    Now I use Layers CSS, Cinderblock or Lemonade (grid system). Depends on the size of the Web project.

    2 points
  • Raluca PartenieRaluca Partenie, almost 5 years ago

    The old Skeleton project

    2 points
    • Tony Roberson, 3 years ago

      Awesome and lightweight framework. Sometimes I wish it just had one more thing - the navigation bar

      0 points
  • Nathan LongNathan Long, almost 5 years ago

    We use Bootstrap for our large projects, and there's stuff we love and hate about it. It's probably similar to most people's experiences with the larger frameworks:

    Love:

    • Great documentation makes it easy for the team to adopt and really fast to start.
    • Durable grid system.
    • Makes it REALLY easy to create simple interactions (dropdowns, tabbed panes, etc.)
    • Most of the elements you would need are already built.

    Hate:

    • If you deviate from the design assumptions, it can be an uphill battle.
    • Rigid breakpoints make it difficult to pick breakpoints other than bootstraps defaults.
    • Varying specificity can make it difficult to override

    Basically, if you stay in the Bootstrap box, you're golden. If you deviate, things immediately get harder, but ultimately the speed and ease of introduction proved to be more valuable for our team.

    Things got easier for us when we tied the modular source files for Bootstrap into our front-end rather than including the whole shebang in one file. Selectively turning parts of it off or being able to adjust the variables really helps when you need to break out in a specific area.

    2 points
  • Cihad TurhanCihad Turhan, almost 5 years ago

    For my personal website, I'm using kube. The reason I choose kube is that it's minimal so you can build anything top on it easily; just add whichever styling you need. No redundant classes, no extra javascripts. See its stencil.

    2 points
  • Matt BaxterMatt Baxter, almost 5 years ago (edited almost 5 years ago )

    I've used Unsemantic on several sites. It's strictly a grid system, so it doesn't come with a lot of other UI parts like other CSS frameworks.

    I've also been testing out Susy. It's not nearly as approachable, but it gives you more fine-grained control.

    I prefer smaller frameworks that don't get in the way of my design.

    2 points
  • Henrique Alves, almost 5 years ago (edited almost 5 years ago )

    None!

    After years using frameworks, it turned out that create a simple and lean one was the way to go. Also it's easier to include it in current workflows bearing in mind that teams and products varies.

    I'm not saying about re-invent the wheel :-) this framework gives you an initial structure, it's a start point.

    • Normalize (optional)
    • A fews mixins, functions and variables
    • Susy 2
    • Gulp
    2 points
  • Jake PetersonJake Peterson, almost 5 years ago

    I use Bootstrap or Pure for smaller things..

    1 point
  • Alejandro CamaraAlejandro Camara, almost 5 years ago (edited almost 5 years ago )

    For my last 3 projects I've been using InuitCSS from Harry Roberts

    Has nearly everything I need and doesn't interfere with my design.

    1 point
  • Colm TuiteColm Tuite, almost 5 years ago (edited almost 5 years ago )

    I use my own CSS framework, which is really just a collection of reusable single-purpose CSS classes, plus some common utilities.

    If anyone's interested, I'd love some help.

    1 point
  • David DíazDavid Díaz, almost 5 years ago

    I'll usually go with Foundation. I like how easy it is to import just what you need and use it effectively. I also really love the grid and I like being able to use it's mixins to create very clean and semantic html.

    1 point
  • Andrey KeskeAndrey Keske, almost 5 years ago

    On my projects I use Bootstrap. A few weeks ago I heard about Inuit CSS and now I want to try (Bootstrap + Inuit CSS) but first I need to understand BEM methodology.

    1 point
    • Kristin Lasita, almost 5 years ago

      BEM has been my preferred solution, but only after I tried a bunch of different things like SMACSS and OOCSS. It took me a while to get over how verbose the syntax is, but it really makes sense in large projects.

      1 point
      • Andrey KeskeAndrey Keske, almost 5 years ago

        I have a few small projects for learning BEM methodology if this makes sense because you say that BEM for large projects and honestly I don't know start learning or not...

        0 points
        • Kristin Lasita, almost 5 years ago

          BEM will seem very verbose and overkill on a very small project. It's true effectiveness, and where I started to find it useful, was once I got to larger projects. All I'm saying is I didn't understand BEM fully while I was doing smaller projects, but it clicked as I built out more than a few pages.

          1 point
  • Jason Goodwin, almost 5 years ago (edited almost 5 years ago )

    I heart ZURB Foundation

    1 point
  • Gabriel GarridoGabriel Garrido, almost 5 years ago

    We use Foundation at work yet I like to test frameworks on my side projects. I'm currently having a blast using Susy coupled with SMACSS + BEM. Looking forward to try out Harry Robert's new methodology, ITCSS.

    1 point
  • Nathan HueningNathan Huening, almost 5 years ago

    A hybridized, custom Semantic

    0 points
  • ian marquetteian marquette, almost 5 years ago (edited almost 5 years ago )

    I started off using Bones when I was primarily building WordPress sites. Now that's no longer the case I took a lot of what I liked from Bones and dumped the rest. I've added a fair amount of my own and found Sass mixins and found this has served me pretty well.

    0 points
  • Vivian Guillen, almost 5 years ago

    I like UIkit, it has more stuff than bootstrap so I dont have to spend too much time building custom modules.

    0 points
  • Arturo GoicocheaArturo Goicochea, almost 5 years ago (edited almost 5 years ago )

    This seems relevant here :) Discussion on the topic by destroytoday.com I always think about: https://twitter.com/destroytoday/status/491930362113957888

    Spoiler: dont use a framework. If you have to, use something VERY minimal.

    0 points
  • Kyle CunninghamKyle Cunningham, almost 5 years ago

    At the moment, we're using some lightweight LESS mixins with a decent amount of Home Rolled styling. We're an unusual case though. We have a chrome extension and web app and the styles are shared between the two.

    We try to keep our download sizes to a minimum, and so far it seems to be working out pretty well.

    0 points
  • David BarkerDavid Barker, almost 5 years ago

    I've recently been using Foundation, but I'm going to try using Pure for most of my future work.

    0 points
  • Rasmus ErikssonRasmus Eriksson, almost 5 years ago

    Like many others I've been using both Foundation and Bootstrap a lot, but more and more I find myself frustrated with them. It just becomes too difficult to make things work the moment you deviate from the author's assumptions. Another, albeit minor, annoyance is when you're held back updating your tools because of slower adoption times. (Looking at you, Sass 3.4!)

    It all depends on the work environment though... What people are using, have used, are willing to learn and such. I personally prefer tools like Susy, or even writing from scratch, and build things to suit my work preferences.

    I think in an ideal world we would all have our little collection of bits and bobs. I'm working towards that. In the meanwhile, and in some circumstances, we'll simply have to work with what's out there... and it seems to differ with each project, almost.

    0 points
  • Richard Oliver BrayRichard Oliver Bray, almost 5 years ago

    Normalise and I roll with Flexbox for grids. Gulp and uncss(https://www.npmjs.org/package/gulp-uncss) for clearing up the clutter

    0 points
  • Stephen WayStephen Way, almost 5 years ago

    Foundation for Websites and Angular Material for Apps

    0 points
  • Jon KantrowitzJon Kantrowitz, almost 5 years ago

    Skeleton - http://getskeleton.com/

    v2.0 looks like it be released soon https://github.com/dhg/Skeleton/tree/v-2.0

    0 points
  • Jack LukicJack Lukic, almost 5 years ago

    Semantic UI. But I'm biased...

    For those who haven't checked it out, semantic is completely modular, has 3000+ theming variables, 50+ components and has been two'ish years of my life in the making.

    I admit some people might find our naming conventions abrasive due to the 'departure from orthodoxy', but I guarantee if you spend some time with it, you'll find that descriptive naming conventions make for rapid prototyping, blue button becomes red button becomes red large labeled icon` button in about a few strokes of the keyboard, as oppose to a laborious retooling of your css for each style experiment.

    0 points
  • Hayden MillsHayden Mills, almost 5 years ago

    For years I used Skeleton because of its simplicity and lightweight. I have now switched to using Gridism and it really works well for the small (5-15) page websites I am usually developing.

    0 points
  • Lee MunroeLee Munroe, almost 5 years ago

    I don't use a specific framework per se, but I do have my own CSS/SCSS boilerplate I'll use to start new projects. It's fairly light weight compared to others listed here, and more of a quickstart to build upon.

    If you are to use a framework, most devs I know use Bootstrap these days so it seems like a safe bet if working on a big project and you know you'll have many collaborators.

    Even if not using framework, reading through the likes of Bootstrap, Inuit, Foundation etc. you'll learn a lot of good practices you can apply to rolling your own.

    0 points
  • Samuel ṢoṣinaSamuel Ṣoṣina, almost 5 years ago (edited almost 5 years ago )

    Susy 2! and never looking back

    0 points
  • Noe AraujoNoe Araujo, almost 5 years ago

    We made our own framework at Icalia Labs http://icalialabs.github.io/furatto/

    0 points
  • Ryan GloverRyan Glover, almost 5 years ago

    Bootstrap for client stuff/where another team will need to manage it.

    Custom for my personal machinations. Been following ITCSS by Harry Roberts as of later. Highly recommended.

    0 points
  • Keaton TaylorKeaton Taylor, almost 5 years ago

    we rolled our own based on Unsemantic. Changed a lot of stuff in it and added a few common breakpoint sizes to the base 3. Broke it down into separate files and rolled some new functionality into Normalize. we pair that with Grunt (uglify, css minify, svg optim, image optim, html compression sometimes)

    0 points