Recommended CSS framework(s)

[)roi(]

[)roi(]

Executive Member
Joined
Apr 15, 2005
Messages
6,282
Reaction score
405
Location
ッ
I've tried Bootstrap, Foundation and Pure... but always ended with a lot of custom patches related to what I regard as shortcomings in each. Was recently advised to look at UIKIT, and on the surface it appears quite a bit more flexible than the previous 3?

What's you thoughts on UIKit, and CSS frameworks in general?
 
I don't like CSS frameworks. I prefer doing it all by hand as you end up with something fitting your exact requirements without the bloat the framework adds. It does mean, however, that you need to be very proficient in CSS in order to be more productive in writing custom rules than depending on frameworks.

Edit: I've seen developers often hammering their own markup in order to fit into Bootstrap's rules, which seems counterproductive. It's the same reason I'm not fond of opinionated JavaScript frameworks like Angular. React or good old jQuery gets the job done by doing the DOM heavy lifting for you, but giving you control over how you want to interact with the data.
 
Last edited:
FarligOpptreden said:
I don't like CSS frameworks. I prefer doing it all by hand as you end up with something fitting your exact requirements without the bloat the framework adds. It does mean, however, that you need to be very proficient in CSS in order to be more productive in writing custom rules than depending on frameworks.

Edit: I've seen developers often hammering their own markup in order to fit into Bootstrap's rules, which seems counterproductive. It's the same reason I'm not fond of opinionated JavaScript frameworks like Angular. React or good old jQuery gets the job done by doing the DOM heavy lifting for you, but giving you control over how you want to interact with the data.
Click to expand...
That kind of sums up my experience; but I've been looking for something that could make design a little simpler, or more specifically simple enough that it could offloaded to a design team. Agreed re Angular and the like; JQuery / React are great, but have also recently being enjoying the brutal purity of Purescript.
 
Last edited:
[)roi(];20296993 said:
That kind of sums up my experience; but I've been looking for something that could make design a little simpler, or more specifically simple enough that it could offloaded to a design team. Agreed re Angular and the like; JQuery / React are great, but have also recently being enjoying the brutal purity of Purescript.
Click to expand...

Luckily I enjoy the design side of things as well, so I usually build the base CSS rules that get applied to most elements of the application then pass it on to my junior devs to complete. They only ask for guidance when they get stuck with complex layout scenarios that the base rules don't cater for, which I'm more than willing to solve.

I'm a huge proponent of keeping markup semantic and adding styling and interaction on top of that. A page in a web application should be readable (and often usable) without any styling included, with the content flowing in a natural manner using the correct tags. Then you start prettying things up and adding transitions, animations, interactions, etc...
 
Bootstrap is exactly what it says. Bootstrap. It's a way of quickly implementing a look and feel which can apply consistently over your site. Of course it's not the end of the story for a site's css as the site needs to be able to evolve. That's what frameworks are. They are quick starts. The best frameworks are those that don't constrain you later on.
 
I would be very interested to know what problem you exactly ran into that you couldn't make any of the frameworks you tried, work.

I've had 0 issues implementing websites or applications with bootstrap, jQuery etc. If I want to make sure the footprint of the framework is as small as possible, I just EXCLUDE the components I won't use, like if I don't need modal popups, I just exclude that. Easy.

/edit

I do agree that people using jQuery to do the simplest DOM stuff that native JS can do is dumb, but you have to weigh that against what you want to achieve in the bigger picture, so if 70% requires jQuery to increase code-efficiency/delivery, then use it... oh and you can also customize jQuery...#justsayin'
 
FarligOpptreden said:
Luckily I enjoy the design side of things as well, so I usually build the base CSS rules that get applied to most elements of the application then pass it on to my junior devs to complete. They only ask for guidance when they get stuck with complex layout scenarios that the base rules don't cater for, which I'm more than willing to solve.

I'm a huge proponent of keeping markup semantic and adding styling and interaction on top of that. A page in a web application should be readable (and often usable) without any styling included, with the content flowing in a natural manner using the correct tags. Then you start prettying things up and adding transitions, animations, interactions, etc...
Click to expand...
It's not that I don't like design; but rather that's it's so arduously time consuming when you have a design team that wants the flexibility to profile a number of designs & layouts.

In the Java, Kotlin, Swift and C# world we've been able to simplify this using an adaptation of optics (lenses & prisms) to essentially allow the creation of theme templates by composition; basically a strict DSL style approach. The designers once familiar with the DSL pretty much end up taking over the templating.

The web space kind of frustrates me; mainly because I haven't yet found something quite as elegant, composable and statically typed as the lens approach. Basically most solution are either too flexible, or not enough, and generally too complex IMO for it to be used by designers. Less and Sass obviously were added re CSS limitations and a number of these type of issues, but they just seem to be another can of worms, and again present more complexity.

Note: To clarify the primary issue is that CSS is just too flexible / too complex a DSL to handover to designers. I'd expect push back from both the developers and the designers if I said let's just use standard CSS; hence the idea of narrowing the scope with something like Bootstrap and the like.

I still need to flesh this out before I can say if it'll work (or whether I'm wasting my time), but failing any other suggestions it's probably where I'm leaning ATM.
 
Last edited:
I’ve been using UIKIT for a while now. Pretty easy to customize and adjust. I’d recommend it.
 
Platinum Wealth is a bootstrap site, took a ton of customization, but made bootstrap work.

Ideally now looking back, I'll probably build it from the ground up working from a illustrated design.

There's a YouTube channel DevTips, I've learned a ton trom there, might be worth a look.
 
Thanks for the input: @Ray7905 & @Thor.

Been experiencing more of a push to actively enable designers in the software build (idea of not leaving design until the end, more core, blah blah...).

Problem is that most development solutions aren't designer friendly; hence the challenge to either find something we can adapt; extend or even model from. Whilst I certainly have less experience with Bootstrap than most I find it doesn't appear quite as configurable as UIKIT (same opinion for Bootstrap 4).

Still I'm wondering if I'm missing the mark completely; and someone has already solved this problem. i.e. built a DSL that allows designers to to prototype and template along side the build.
 
UIkit is pretty cool, It has more features than bootstrap one I like particularly a lot is the divider.

Example to get a "newspaper layout" in bootstrap I will need to do something like this:

HTML: 
<div class="container">
    <div class="page-header">
        <h3>Add the (.grid-divider) class to any row to separate grid columns with equal height lines.</h3>
    </div>
    <div class="row grid-divider">
    <div class="col-sm-4">
      <div class="col-padding">
        <h3>Column 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="col-padding">
        <h3>Column 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate placeat suscipit maxime tenetur officiis asperiores quae molestias fugiat praesentium dolorum.</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="col-padding">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta, sunt rerum corporis. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta, sunt rerum corporis. Ab veniam aperiam numquam cupiditate maiores repudiandae ea dicta.</p>
      </div>
    </div>
    </div>

</div>

CSS
HTML: 
/* Tablet and bigger */
@media ( min-width: 768px ) {
    .grid-divider {
        position: relative;
        padding: 0;
    }
    .grid-divider>[class*='col-'] {
        position: static;
    }
    .grid-divider>[class*='col-']:nth-child(n+2):before {
        content: "";
        border-left: 1px solid #DDD;
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .col-padding {
        padding: 0 15px;
    }
}

To get that same effect using UIkit all I need to do is this:

HTML: 
<div class="uk-column-1-2 uk-column-divider">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>

    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
</div>
 
I like UiKit’s Customizer function. Send my designer there to setup the base styling like colors, font, font sizes, padding, margins, gutters, buttons etc etc etc. export the LESS and CSS files and send to developer. Developer spends 80% less time “styling” because it’s basically already done by the designer who doesn’t even need to know anything about CSS.
 
[)roi(];20305107 said:
Thanks for the input: @Ray7905 & @Thor.

Been experiencing more of a push to actively enable designers in the software build (idea of not leaving design until the end, more core, blah blah...).

Problem is that most development solutions aren't designer friendly; hence the challenge to either find something we can adapt; extend or even model from. Whilst I certainly have less experience with Bootstrap than most I find it doesn't appear quite as configurable as UIKIT (same opinion for Bootstrap 4).

Still I'm wondering if I'm missing the mark completely; and someone has already solved this problem. i.e. built a DSL that allows designers to to prototype and template along side the build.
Click to expand...

Ah I see the problem. You're trying to shoe-horn designers into developer positions.

Let them stick with HTML/SASS and have your developer implement. It's also pretty easy to use a technology like MVC to seperate the design from the development/core so the UX always lines up with what the designer and client envisioned.

But yea... i guess you need a framework for that
 
czc said:
Has anyone played with semantic-ui ?
Click to expand...

I have, I like it as well.

I know bootstrap by heart so it remains my go to framework, but I do like UiKIT, Semantic, Skeleton (out dated now) and then there is one I am learning now (still struggling a bit with how flexbox works) called bulma.

This is a Bulma website: https://booknshelf.com/
 
Thor said:
I have, I like it as well.

I know bootstrap by heart so it remains my go to framework, but I do like UiKIT, Semantic, Skeleton (out dated now) and then there is one I am learning now (still struggling a bit with how flexbox works) called bulma.

This is a Bulma website: https://booknshelf.com/
Click to expand...

Bulma looks interesting. I’m going to check that out
 
I'm currently building a new frontend for an old C# webapp using Bootstrap/ASP.NET. It's a bit of a schlep so far, especially with me being more of a back-end/desktop developer.
 
envo said:
Ah I see the problem. You're trying to shoe-horn designers into developer positions.

Let them stick with HTML/SASS and have your developer implement. It's also pretty easy to use a technology like MVC to seperate the design from the development/core so the UX always lines up with what the designer and client envisioned.

But yea... i guess you need a framework for that
Click to expand...
Nope not all.
It's become quite common practice amongst a few of my clients, and if done right it removes some of the frustration for the developer (avoids back & forth with pixel adjustments, etc.) and adds flexibility for the designers, basically they get to test out their design mockups directly on the app as it's being built instead of just working in Illustrator or Sketch; for example: the value for them of seeing and interacting with a button design across multiple screens is quite valuable.

Achieving this with a web driven front end is still a bit of an unknown, but for standalone / mobile apps it's pretty much solved problem for us and others (described roughly in my post above).

As for the framework, yeah after looking more closely at UIKit, it's looking like LESS with bits like variables and custom mixins could be the way to go; still it has to be easy enough to build themes, apply them, test and not be overly complex to customise.
 
[)roi(];20319421 said:
As for the framework, yeah after looking more closely at UIKit, it's looking like LESS with bits like variables and custom mixins could be the way to go; still it has to be easy enough to build themes, apply them, test and not be overly complex to customise.
Click to expand...

I recently slapped together a fairly complex set of stylesheets using less, with a common variables file defining colours, padding, icon sets, image paths, etc. Then I built a theming framework on top of that to allow the front-end devs the ability to create themes as a custom "variables" file based off the base file I created, then triggering the CLI version of the Web Compiler plugin for Visual Studio (either ad-hoc or on production builds) to compile each theme to a centralized "compiled_css/%theme%" folder, where the files get bundled from for release.

The benefit is the devs create LESS files across the project for each module, all referencing the base variables.less file for dev purposes, then the compiler process compiles each theme at once. I did realize that LESS' benefits pretty much end beyond common variable declarations for most web developers, as mixins seem to go waaaaay above their heads. So they just regard it as "CSS with variables and includes".
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X