Giter Site home page Giter Site logo

lsapp's Introduction

lsapp

A project to design and implement micro-blogging website.

Getting started

After cloning the repository

cd lsapp
composer install
npm install

Next inside .env file inside the root directory, edit the DB_DATABASE, DB_USERNAME and DB_PASSWORD fields where DB_CONNECTION is mysql. Edit DB_HOST and DB_PORT values too if those values aren't default in your machine

Compiling your css and sass files

Compiling sass into css

Sass dir:- resources/assets/sass

In webpack.mix.js, add the sass files you wish to compile to css, inside the .sass() function ass first arg. If there are more than 1 sass files, chain one more .sass() method

mix.sass('resources/assets/SASS_STYLE_1', 'public/css/output_file_1')    
    .sass('resources/assets/SASS_STYLESHEET_2', 'public/css/output_file_2')

Make sure you make a note of output files as it'll be required in the next step

Combining all css files

css dir:- resources/assets/css

Add your css file paths in the array situated inside the .styles method. Unlike sass, multiple chaining is not required

The directories of css files compiled from sass will be required too

mix.sass('resources/assets/SASS_STYLE_1', 'public/css/output_file_1')    
    .sass('resources/assets/SASS_STYLESHEET_2', 'public/css/output_file_2')
    .styles(['resources/assets/css/css_file_1', 
           'public/css/output_file_1',
           'public/css/output_file_2',
           'public/css/output_file_1',
           'public/css/output_file_2'],'public/css/final_output_file')

After that run

npm run dev 
PS:- Compile your css files to a stylesheet other than app.css since it's the root file for sbadmin styles and will thus generate a lot of conflicts if they were to merged.
Tips for compiling:-
  1. Discuss with team members of your module and come up with a final name where the styles will be outputted

  2. Add stylesheets like you normally do in html (multiple stylesheets for a single page, single stylesheets for multiple pages and so on.... your call) and add it's path to webpack.mix.js's styles array/ chain new sass file.

  3. Run npm run dev

  4. Add the compiled version's name's path inside .gitignore file so that it'll not be tracked by git

  5. Also add the compiled style's path inside resources/views/layouts/plane.blade.php

  6. When others pull your branch, they just have to run npm run dev to get the outputted css

lsapp's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.