5 ms·

I'd like to know, too. I've been using bootstrap in a couple of places and every time we change a page to use it, it feels like it'll be 10 times harder to rip

I'd like to know, too. I've been using bootstrap in a couple of places and every time we change a page to use it, it feels like it'll be 10 times harder to rip it out later. Does anyone know of an scss-based UI framework, where I can just call mixins into my css? Or is that even possible with bootstrap? Adapting html to a UI framework's code feels like a completely upside down approach.

nstart 10y ago
Ok this is an excellent question. The way I do it is by first converting stuff to semantic names. If it's a somewhat serious project I'm likely to have done that from very early on. I use a method similar to https://www.sitepoint.com/sass-semantically-extend-bootstrap/ https://www.sitepoint.com/sass-semantically-extend-bootstrap... to do this. Later, I start converting this stuff to be what I actually want in either a custom CSS or by integrating some other framework. Note though. I explicitly mentioned this is for my little dashboards and apps. When I start this process, pages will look broken from time to time and there might be pages that look Frankensteined. I've never done this on a serious app although I want to do that for one client I'm consulting for. Since I wrote all the code myself, here's my speculation on how I'll do it. Since I have a fairly structured way of arranging my divs and my forms, I'm going to hack together a parser using beautifulsoup/htmlparser to get the bootstrap stuff out and convert those to semantic names. So it'll be something that goes through a file, and then tells me it found a div.row here (show me the surrounding lines to get me an idea of where it is) and then ask me to input the semantic name. It'll spew out the sass files I want and change the jinja templates. From there I'm going to attempt to plug in material just because I like it so much :D
- scrollaway 10y ago
  That seems like a lot of trouble to go through, to use a UI framework which is supposed to save you time. :/ Do you have any recommendations on a better, leaner scss UI toolkit?
  - nstart 10y ago
    No I'm afraid I don't. You are right that this is a lot of pain for a UI framework that's supposed to save you time. But because I've done this a few times over it's become fairly simple once it's coupled together with some vim macros and snippets. But it's not a very good workflow that someone else can adopt quickly. I just found bootstrap to be super comfortable to get started and I also built some generators that auto generate templates for me when I work on my little projects. When I wrote those I made them to use bootstrap and I can't be bothered going back to change them now
mcintyre1994 10y ago
If you download the source, Bootstrap is all Less[0] with an official Sass port[1]. For v4 they're moving to Sass too.[2] :) [0] http://getbootstrap.com/css/#less http://getbootstrap.com/css/#less [1] https://github.com/twbs/bootstrap-sass https://github.com/twbs/bootstrap-sass [2] http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/
dan_b 10y ago
Zurb Foundation. Though it is, literally, a foundation to build your own look-and-feel on.

nstart 10y ago

Ok this is an excellent question. The way I do it is by first converting stuff to semantic names. If it's a somewhat serious project I'm likely to have done that from very early on. I use a method similar to https://www.sitepoint.com/sass-semantically-extend-bootstrap/ https://www.sitepoint.com/sass-semantically-extend-bootstrap... to do this. Later, I start converting this stuff to be what I actually want in either a custom CSS or by integrating some other framework. Note though. I explicitly mentioned this is for my little dashboards and apps. When I start this process, pages will look broken from time to time and there might be pages that look Frankensteined. I've never done this on a serious app although I want to do that for one client I'm consulting for. Since I wrote all the code myself, here's my speculation on how I'll do it. Since I have a fairly structured way of arranging my divs and my forms, I'm going to hack together a parser using beautifulsoup/htmlparser to get the bootstrap stuff out and convert those to semantic names. So it'll be something that goes through a file, and then tells me it found a div.row here (show me the surrounding lines to get me an idea of where it is) and then ask me to input the semantic name. It'll spew out the sass files I want and change the jinja templates. From there I'm going to attempt to plug in material just because I like it so much :D

scrollaway 10y ago
That seems like a lot of trouble to go through, to use a UI framework which is supposed to save you time. :/ Do you have any recommendations on a better, leaner scss UI toolkit?
- nstart 10y ago
  No I'm afraid I don't. You are right that this is a lot of pain for a UI framework that's supposed to save you time. But because I've done this a few times over it's become fairly simple once it's coupled together with some vim macros and snippets. But it's not a very good workflow that someone else can adopt quickly. I just found bootstrap to be super comfortable to get started and I also built some generators that auto generate templates for me when I work on my little projects. When I wrote those I made them to use bootstrap and I can't be bothered going back to change them now

mcintyre1994 10y ago

If you download the source, Bootstrap is all Less[0] with an official Sass port[1]. For v4 they're moving to Sass too.[2] :) [0] http://getbootstrap.com/css/#less http://getbootstrap.com/css/#less [1] https://github.com/twbs/bootstrap-sass https://github.com/twbs/bootstrap-sass [2] http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/

dan_b 10y ago

Zurb Foundation. Though it is, literally, a foundation to build your own look-and-feel on.