Laravel 5.3 Install Semantic UI

How I setup semantic-ui in a new laravel 5.3 project in rapid speed.
  1. Install composer https://laravel.com/docs/5.3/installation
  2. Create new laravel project
  3. Install Laracogs package https://laracogs.com/docs/kits/starter/
  4. Run steps for Start Kit in Laracogs
  5. Run steps for installing Semantic UI in Laracogs https://laracogs.com/docs/kits/semantic/
  6. I had to change my gulpfile to read from node_modules folder to get it working (see below)
  7. Optionally remove Bootstrap
  8. Optionally switch the semantic ui CSS to SASS and use already built in Elixir to compile https://github.com/doabit/semantic-ui-sass (Haven’t tried this yet)
  9. Optionally switch the semantic ui CSS to LESS https://github.com/Semantic-Org/Semantic-UI/tree/master/src (Don’t do this it’s too slow to compile)

Then run Gulp to build your assets.

Then run `Gulp` to build your assets.

Then /login page you should see this with all the nice Semantic UI styles! 🙂

Then login page you should see this with all the nice Semantic UI styles! )

Optionally remove Bootstrap (I guess there is no need to have both!)

Optionally remove Bootstrap (I guess there is no need to have both!)

Add semantic LESS to laravel

Add semantic LESS to laravel

I’m keeping the .js loading in just css now loads from less.
You can pull down the Semantic UI repo and then remove everything but the DIST directory OR you can use sparse checkout https://stackoverflow.com/questions/600079/how-do-i-clone-a-subdirectory-only-of-a-git-repository to only pull down what you want.
You can pull down the Semantic UI repo
rename theme.config.example to theme.config.
Ok it’s way too slow compiling the LESS files…
it's way too slow compiling the LESS files

Likely Errors You Might See


npm ERR! semantic-ui@2.2.6 install `gulp install`

Install or update Nodejs and NPM:
Fullstack4u.com shares web development tips for full stack web technologies and is helping share the passion to web developers worldwide.

Leave a Reply

Your email address will not be published. Required fields are marked *