Bootstrap? Foundation? Or...
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.
I would love to know more about your process in developing your own framework. Is it available somewhere like github?
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!
This is fascinating. Thanks for posting this!
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.
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. :)
Well, I hope you enjoyed your lunch :)
I use Flexible Grid System. http://flexible.gs
Same here, I love how unassuming it is. I'm tired of fighting a system that makes decisions for me.
Do you really need a framework?
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?
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.
Definitely not, especially in any sort of professional environment. They're a nightmare.
Bourbon + Bitters + Neat from thoughtbot. All of the grid and variable goodness of Bootstrap without the style defaults.
+1 and Thoughtbot Refills!
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
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.
Made my own :)
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:
- 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.
- 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.
The old Skeleton project
Awesome and lightweight framework. Sometimes I wish it just had one more thing - the navigation bar
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.
I use Bootstrap or Pure for smaller things..
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.
Yep, I've seen it. Planning to contribute soon.
I heart ZURB Foundation
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.
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.
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...
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.
Thank you for your reply!
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.
Link is wrong. You accidentally added a word
Susy 2! and never looking back
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.
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,
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.
Foundation for Websites and Angular Material for Apps
A hybridized, custom Semantic
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.
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.
We made our own framework at Icalia Labs http://icalialabs.github.io/furatto/
Normalise and I roll with Flexbox for grids. Gulp and uncss(https://www.npmjs.org/package/gulp-uncss) for clearing up the clutter
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.
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)
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.
I like UIkit, it has more stuff than bootstrap so I dont have to spend too much time building custom modules.
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.