UI Kits with ReactJS & Semantic UI

We transformed the popular Thunder UI Kit in partnership with UI8.net into ready-to-use components for the fastest growing JS framework: ReactJS. Thunder UI Kit is developed in React + Semantic UI and has 35 screens and 100+ components that you can use out of the box.

Technologies used:

  • React
  • Semantic UI
  • React Less
  • HTML & CSS

Requirements

  • Node v6.11.5
  • npm v5.5.1
  • React v16.2.0
  • Semantic UI v2.2.13
  • Gulp v3.9.1

Dependencies

Installation

The folder structure of the app contains 2 important folders:

1. app/src/

where the React part is installed and

2. styling/semantic/

where Semantic UI React is installed and where the custom theme is developed and all CSS changes happen.

Follow the next steps:

  1. Install NPM & Gulp globally npm install gulp -g
  2. In thestylingfolder, run thenpm installcommand.
  3. In theappfolder, run thenpm installcommand.
  4. In thestyling\semanticfolder, run thegulp build-csscommand.

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

Layouts

Thunder UI Kit contains one home page located inhome/index.jsthat has links to all 35 layouts grouped in separate folders, each of the folder with 5 different screens as it follows:

  • layouts/ecommerce
  • layouts/feed
  • layouts/menu
  • layouts/profile
  • layouts/signups
  • layouts/statistic
  • layouts/walkthroughs

Other assets like images and custom fonts are inapp/src/assets. If you want to use your own images or fonts just drop them in this folder.

Theming and Custom Components

Thunder UI Kit is made by extending and theming React Semantic UI Framework. For installing and more docs about Semantic UI React see https://react.semantic-ui.com/usage

Components architecture:

styling/semantic/themes/defaultfolder contains the base Semantic UI components that should be used as reference when building a custom theme.

styling/semantic/sitecontains only the components that were modified for building Thunder.

Every component has 2 LESS main files that are compiled intocomponent.css:.variablesand.overrides.

The.variablesfile holds the LESS variables that can be modified and.overridesfile has the component classes that are used in the custom theme.

Custom components used

The custom components used in Thunder are:

  • grid
  • menu
  • button
  • container
  • header
  • icon
  • image
  • input
  • segment
  • sidebar
  • card

The rest of the Semantic UI components are used as default or never used.

For building custom components based on the default Semantic UI components, make sure that the component you want to extend is in the same folder as the base one. Example:

  • gridcomponent is part ofcollections;
  • buttoncomponent is part ofelements;
  • sidebarcomponent is part ofmodules;

More about Semantic UI theming here 👉https://semantic-ui.com/usage/theming.html.

Theming

The folderstyling/semantic/site/globalscontains the only the variables used in building Thunder custom theme and the classes needed in this theme. If you want to modify or extend the theme, you just have to change thesite.variables, remove or add new variables from the default globals found inthemes/default/globals/site.variables.

The CSS theming is done by combining changing default variables with new custom ones + helper classes for each custom component. The compiled CSS file will be writtenapp/public/css/folder. This path is configured from the semantic.json file.

For example if you want to extend the primary button and make it purple, Semantic UI already has the global variable for primary color defined so we only need to change the@primaryColorLESS variable in oursite/globals/site.variablesto@primaryColor:purpleand check if in our custom button variables file the primary color is assigned@primaryBackgroundColor: @primaryColor.

Another way to build custom components is to make helper classes for each custom component. For example let's say we need acontainerwith a purple background color. For that we just need to add a class.purpledefined in thesite/elements/container.overridesusing the default class name convention:

.ui.container.purple {
    background-color: purple;
}

In our JSX file we just assign the class to our container that we want to make purple like this:

<Container className="purple"></Container>

Some component styles come from specificpropssuch asSegment basicorContainer textAlign="center".

All components can be fully customized using helper classes. The list of all Semantic UI components and their attributes and props can be found here https://react.semantic-ui.com/usage.

Custom images

Images used in Thunder are declared either as imports with absolute path for easy changing the asset like this:import bgImg from '../../../../assets/images/pattern-walkthrough.png';

or as constants.

For custom content images that could be inserted dynamically as in theFeedscreens, the markup used is putting them as background images to scale easily no matter the size and to be replaced easily as variables. Eg.

const feedOneBg = {
    backgroundImage: 'url(' + feedOne + ')',
};

wherefeedOneis the image variable used that could be replaced with whatever you need.

License

https://pwathemes.com/terms-of-service.html

results matching ""

    No results matching ""