ltw-core

La Teva Web CMS sass core

Front-end framework for developing responsive and mobile first projects. This framework use .sass style not working with .scss.

File structure

Whenever possible, avoid modifying core files. For Sass, that means creating your own stylesheet that imports ltw-core so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:

your-project/
├── sass
│   └── app.sass
└── node_modules/
    └── ltw-core
        ├── assets
        ├── components
        ├── core
        └── mixins

Installing

Install with npm:

npm i ltw-core --save-dev

Import ltw-core package in your sass files. (Remember change .scss to .sass):

@import "~ltw-core"

Change Laravel webpack.mix.js file .scss -> .sass like this:

mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.sass', 'public/css');

Customizing

Customize ltw-core with our built-in Sass variables for global style preferences for easy theming and component changes.

In your custom.sass, you’ll import ltw-core source Sass files. If you want to extend the functions of ltw-core, you can import mixins and components optionally.

// Optional
// ------------------------
@import "~ltw-core/components/accordion"
@import "~ltw-core/mixins/gradient"

Componentas and mixins list

├── components
│   ├── accordion
│   ├── admin
│   ├── breadcrumb
│   ├── cookies
│   ├── datatables
│   ├── pagination
│   ├── phone
│   ├── popup
│   ├── search
│   ├── select
│   ├── sitemap
│   ├── slick
│   ├── toastr
│   ├── user
│   └── zoom
└── mixins
    ├── gradient
    ├── incline-bottom
    └── incline-top

Variable defaults

Every Sass variable in ltw-core includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying ltw-core source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in ltw-core.

You will find the complete list of ltw-core variables in ./node_modules/sass/_variables.sass.

Example:

// Your variable overrides
$body-bg: #000
$color-text: #111

// ltw-core and its defaults variables
@import "~ltw-core"

FAQ

• Q: Something is not working
• R: Check node_modules if folder xxxx exists...