<![CDATA[Ninja Admins Community - Front End Developer]]>

<![CDATA[Ninja Admins Community - Front End Developer]]> https://ninjadmins.com/ Sun, 10 May 2026 13:45:52 +0000 MyBB <![CDATA[Install PatternFly with Yarn]]> https://ninjadmins.com/topic/install-patternfly-with-yarn Tue, 16 Mar 2021 01:53:49 -0400 Michael.Sentry]]> https://ninjadmins.com/topic/install-patternfly-with-yarn
What is PatternFly?

Quote:PatternFly is an Open Source interface design system by RedHat which provides various visual components, tools for designing visual components, and code examples to make it possible for almost anyone to design and build responsive, accessible user experiences

PatternFly can be installed with npm or Yarn.
The official PatternFly docs cover using npm, and npm is the default package manager for nodejs .

In this quick guide we'll show examples of how to manage the installation of the basic html/css packages of PatternFly v4 / v3 with Yarn ( on the command line ).

read_more

We're using "yarn 1.22.5" for this example.

PatternFly 4

Quote:yarn add @patternfly/patternfly

PatternFly 3

Quote:yarn add patternfly

To install into a custom directory name use the --modules_folder flag.

Quote:yarn add patternfly --modules_folder assets

--

Why use Yarn ? It's very fast, and simple to manage.

https://classic.yarnpkg.com/en/docs/cli/install/
https://classic.yarnpkg.com/en/docs/cli/

Migrating to Yarn v2 :
https://yarnpkg.com/getting-started/migration
https://yarnpkg.com/getting-started/install

--

Getting started with PatternFly by Anisha Swain :
https://medium.com/the-ui-girl/patternfl...76a35052a3

PatternFly homepage :
https://www.patternfly.org/v4/

PatternFly v3
https://www.patternfly.org/v3/

You can find the PatternFly project repo on github :
https://github.com/patternfly]]>
What is PatternFly?

Quote:PatternFly is an Open Source interface design system by RedHat which provides various visual components, tools for designing visual components, and code examples to make it possible for almost anyone to design and build responsive, accessible user experiences

Quote:yarn add @patternfly/patternfly

PatternFly 3

Quote:yarn add patternfly

To install into a custom directory name use the --modules_folder flag.

Quote:yarn add patternfly --modules_folder assets

Quote:Stylus has the power of Sass, with the accessibility of LESS.

read_more

Stylus was created by T. J. Holowaychuk along with Express js and a huge number of other great applications and projects.
https://github.com/tj
https://en.wikipedia.org/wiki/Stylus_(st..._language)

Expressive, dynamic, robust CSS
https://stylus-lang.com/

https://github.com/stylus/stylus
https://github.com/stylus/nib

Getting To Know Stylus
https://www.sitepoint.com/getting-to-know-stylus/

Getting Started with Stylus
https://blog.teamtreehouse.com/getting-started-stylus

/--

https://github.com/kylekatarnls/stylus
https://github.com/AustP/Stylus.php

/--

Stylus Tutorials by LevelUpTuts :
https://www.youtube.com/playlist?list=PL...AfR96a4CkH
https://www.youtube.com/c/LevelUpTuts/featured

/--]]>

Quote:Stylus has the power of Sass, with the accessibility of LESS.

Quote:The Progressive JavaScript Framework for building user interfaces

read_more

https://vuejs.org/

--

Introduction to vue 3 :
https://v3.vuejs.org/guide/introduction.html

--

Follow the latest vue.js developments on Twitter :
https://twitter.com/vuejs

--

Vue repos :
https://github.com/vuejs

--

Awesome Vue.js Resources :
https://github.com/vuejs/awesome-vue

--

Vue3 JS Crash Course 2021 [ Traversy ]
https://www.youtube.com/watch?v=qZXt1Aom3Cs

Source :
https://github.com/bradtraversy/vue-crash-2021

--

30 days of Vue by Hassan Djirdeh ( https://twitter.com/djirdehh )
Sign up to download the free pdf of 30 Days of Vue :
https://www.newline.co/30-days-of-vue/

Building a movie app interface with Vue.js
https://hackernoon.com/building-a-movie-...c8aeb5db0b

Let’s Build a Custom Vue.js Router
https://hackernoon.com/lets-build-a-cust...e634be87c4
https://github.com/djirdehh/pokemon-routing

--

Vue Mastery :
https://www.vuemastery.com/blog/

Intro To Vue | Free Course :
https://www.vuemastery.com/courses/intro...o-to-vue3/

Real World Vue 3 :
https://www.vuemastery.com/courses/real-...ientation/

--]]>

Quote:The Progressive JavaScript Framework for building user interfaces

Quote:Tailwind is unapologetically modern, and takes advantage of the latest and greatest CSS features to make the developer experience as enjoyable as possible.

read_more

--

https://tailwindcss.com/
https://twitter.com/tailwindcss

--

https://tailwindcomponents.com/
https://twitter.com/TwComponents

--

Tailwind CSS Crash Course [ Traversy ] :
https://www.youtube.com/watch?v=UBOj6rqRUME

Tailwind CSS Tips, Tricks & Best Practices [ Sam Selikoff ] :
https://www.youtube.com/watch?v=nqNIy8HkEQ8

--

Six Reasons Why You Should Start Using Tailwind CSS :
https://codeburst.io/six-reasons-why-you...2292c50a70

--

Why Tailwind Isn't for Me :
https://dev.to/jaredcwhite/why-tailwind-...or-me-5c90

--

Comments by Sergey Romanenko [ @AwilumIT ]
https://twitter.com/AwilumIT/status/1351541677798862853

Quote:After few hours of research "How to use Tailwind CSS for Extendable Admin Panel" I see that it is absolutely unusable for typical users, that want to install/uninstall plugins via Admin Panel interface.

Quote:Tailwind CSS for users maintained project like Extendable Admin Panel was a wrong choice.

--]]>
Working with Tailwind CSS. A utility-first CSS framework.

Quote:Tailwind is unapologetically modern, and takes advantage of the latest and greatest CSS features to make the developer experience as enjoyable as possible.

Quote:After few hours of research "How to use Tailwind CSS for Extendable Admin Panel" I see that it is absolutely unusable for typical users, that want to install/uninstall plugins via Admin Panel interface.

Quote:Tailwind CSS for users maintained project like Extendable Admin Panel was a wrong choice.

--]]> <![CDATA[Best Online Color Tools]]> https://ninjadmins.com/topic/best-online-color-tools Thu, 07 Jan 2021 09:50:31 -0500 Michael.Sentry]]> https://ninjadmins.com/topic/best-online-color-tools

Quote:Finding the best color palette for your design has never been so easy.

Here's our growing list of the best color design tools you can find online.

What tools do you use for creating color schemes ?
Do you have any favourite online color tools not listed here ?

read_more

https://0to255.com

https://colormind.io

https://coolors.co

http://www.colourlovers.com

https://mdigi.tools/color-shades/

http://clrs.cc

https://www.colorhexa.com

https://www.color-hex.com

https://colorhunt.co

https://www.culrs.com

--

LolColors
https://www.webdesignrankings.com/resources/lolcolors/

--

Khroma uses AI to learn which colors you like
and creates limitless palettes for you to discover, search, and save.

http://khroma.co/train/

--

https://www.pantone.com/color-finder

--

http://colorcop.net
http://colorcop.net/screenshots/
https://github.com/ColorCop/ColorCop

--]]>

Quote:Finding the best color palette for your design has never been so easy.