New from-scratch theme

Moved Technical Support
  • Hi,

    I've started working on a new theme from scratch to get rid off that good old overused Bootstrap. By doing this I also wanted to see how NodeBB is intricated with Bootstrap.

    So I started by making a copy of the Vanilla theme, changed some stuff in the .json files to differentiate it and remove everything in less.
    Using this "No-CSS" theme, the website is obviously unusable and a lot of things have strange random hover behaviour.

    Now I'm attempting to make a clean No-CSS website to be able to apply CSS on it later. I'm planning to use the pure awesomeness which the recently released Semantic UI is, so I'll have that in mind while creating the website templates.

    Basically I'm not really creating the templates, I'm just rewriting them, removing all Bootstrap classes and trying to clean it a bit.

    Here are my various questions:

    • Does such a No-CSS theme already exist?
    • Is there some easy way to remove Bootstrap?
    • Do I have to care about some Javascript somewhere?
    • Do you have any other comments on what you just read?

    Now, here's the first problem I encounter:
    Error log

    I don't know where this less variable (which I removed with everything else) is used. Any advice on where I could find it?

    EDIT: Another question, where would be the best places to but the semantic-ui css and js files?

  • A Semantic UI Template would be sooo awesome 🙂
    Currently playing around with this UI kit

  • I think some sections of nodeBB forum are styled independently from the current theme. Like admin area. So getting rid of less completely may be hard.

  • That's great, I am actually working on pretty much the same thing (semantic-ui, but with everything designed to be more friendly to old-style forum users).

    I add semantic-ui as a submodule git submodule add and have a script to handle compilation / then copy the results to the lib and less (even though it is CSS) folders.

    I didn't encounter your LESS issue because I'm not throwing everything out just yet, but try running grep -r "state-info-text" ./* to find the culprit.

  • This is usually found in nodebb-plugin-mentions ...remove the @state-info-text there.

  • I'm working on the topbar right now and I already encounter a problem.

    This "navigation" part is defined like this in the Vanilla theme
    As I'm not using Bootstrap at all, the value for {navigation.iconClass} is not valid. {navigation.iconClass} is the Font Awesome Icon class. Unfortunately, Semantic UI renamed the classes from the original fa-xxx pattern to something more human.

    Any ideas on what I could do? Replacing the icons with JS feels really wrong...
    I also don't want to make my own version of NodeBB, I'm just making a theme...

    It's a "mobile-mode" thing so I could just ignore it and see later, I don't know.

    EDIT: Was finally able to post, just had to remove the HTML from the post content ._.

  • Opened an issue. Getting rid of Bootstrap is currently close to impossible without modifying NodeBB.

Suggested Topics

  • Dark theme, disablw

    Technical Support
    0 Votes
    4 Posts
  • 0 Votes
    12 Posts
  • Dark theme.

    Moved Technical Support
    0 Votes
    7 Posts
  • 0 Votes
    1 Posts
  • 0 Votes
    2 Posts