Stack Overflow
Stack Overflow

Questions tagged [fluent-kit]

PROJECT CLOSED - An open-sourced, modern, responsive front-end framework inspired by Fluent Design System by Microsoft.

PROJECT CLOSED - Fluent Kit

v1.1.3

Its teams' official website Nespero states that

Fluent Kit is a Fluent Design inspired UI kit based on the latest Bootstrap.

This is an open-source framework under the MIT license. Its official repo is hosted on Github.

Quick start

Quick start options:

  • Download from Github,
  • Download from Nespero,
  • git clone https://github.com/Nespero/fluent-kit.git
  • npm install fluent-kit
  • bower install fluent-kit
  • yarn add fluent-kit

What is Fluent Kit?

Fluent Design is a design language created by Microsoft, extensively used in latest Windows 10 releases.

Bootstrap is an agile way of creating market-ready websites with little to no effort, being also the most popular SCSS framework to date.

Nespero combines those two into a single tool, the Fluent Kit, giving you the power to create Microsoft inspired websites, easily.

Social Media

Twitter: https://twitter.com/nesperoproject

Related tags

7 questions
5
votes
4 answers

Bootstrap navbar hamburger icon does not align vertically

I use fluent kit with bootstrap 4.1.2. From the navbar docs (I want this one because the toggler changes its icon on open / close) I did take the second example, from the #position section. However, the hamburger is not centered vertically. How can…
user10086119
3
votes
1 answer

Change checkbox styles to match all the rest in a form

I use this login form from a Fluent Kit framework, third on the right in the example, the dark one. It misses one detail I don't know how to change: the checkbox input (you can find it's docs here, nothing unexpected, really), when checked, is not…
user10068221
3
votes
3 answers

Fluent Design card lift effect

I want to add the card lift effect to my bootstrap cards with fluent design styles on hover. You can see what I mean on microsoft design website. Here's what I tried, but there is something missing and I cannot quite grab it. I tried: .card { …
user9823616
1
vote
2 answers

Remove outline on :active & :focus but not on :focus only

I use datatables from fluent kit and the pagination, when clicked (:active) is highlighted with: box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); I want it gone, but only when clicked. I want the effect to work only for the :focus done with keyboard,…
user10091494
1
vote
3 answers

Turn off shadow when hovering disabled button only

I am creating buttons using Bootstrap button generator. Those are fluent design buttons and I noticed that when :disabled the button still casts shadow on :hover. My questions: How do I stop the shadow when button is disabled? Is it OK to do that?…
user10041268
0
votes
1 answer

Enforce equal rows height for small screen

I am using this Bootstrap tables from Fluent Kit framework and as you can see on small screen, text in cells goes to the new line instead of expanding for all the width available, which is infinite as it's inside the .table-responsive wrapper. In…
user10024821
0
votes
1 answer

How to place modal in the bottom right of the page with fluent kit?

I use fluent-kit package and I want to place the modal window in a bottom right corner of the page. I add .modal-bottom and .modal-right classes to the div.modal-dialog element, as per modal#position docs, however, it doesn't work. My HTML
wscourge
  • 10,657
  • 14
  • 59
  • 80