2.1 Locate main Less file
2.2 Configuration
2.3 Compress CSS / Sourcemap
2.4 LESS Mixins
2.5 CSS Rules
Startless is a Less/Css starting bloc for any Html/CSS web application. Startless include base of css reset, normalization, fonts and colors theme.
Startless use LESS/CSS type files.
Fonts theme base on some of Google Fonts like Roboto, Lato, Ubuntu, Oswald...
Run this composer command in your terminal :
composer require deefaze/startless dev-masterGo to Deefaze/starless repo, select master branch and click Clone or download > Download ZIP or just Click here.
The test/index.html cannot be called directly from file:/// protocol, launch from your own server.
Starless provide a script for create a PHP Server on 127.0.0.254:80.
Go to Startless root path, open a terminal (CMD on Windows) and run win-php-server.cmd (NB: require a valid PHP > v5.3 installation), this launch automaticaly the index in your browser.
If not, go to http://127.0.0.254:80/test/index.html
Other terminal in your editor ? You can launch CMD into your current terminal (terminalception), run like this :
dev@dev-PC MINGW64 /s/www/startless/ (master)
$ cmd /knext, run win-php-server.cmd from CMD :
Microsoft Windows [version 10]
(c) 2017 Microsoft Corporation. All rights reserved.
S:\www\startless\win-php-server.cmdReturn to your terminal ? run exit from CMD.
The main file is src/scss/main.less. But this, contain only @import directives. src/scss/Public/ folder is more interesting.
config\ contain Startless config.less, you need to edit this :
// Theme [default, belle, onedark]
@theme-selector : 'onedark';
// Font [default, raleway, ubuntu, roboto, laosov (lato, oswald, overpass), ibm]
@font-selector : 'ibm';This is localized into scss/main.less file.
If you use a less compiler who support first line parameter like :
// out: ../css/styles.css, compress: false, sourcemap: falseYou just need to set compress or sourcemap to true/false.
components/ contain Less mixins, themes, fonts, no CSS rules here ...
components/themes/ contain all colors themes, you can add yours here.
components/themes.less Startless themes core file.
components/fonts/ contain all fonts configurations, you can add yours here.
components/fonts.less Startless fonts core file.
public\ contain all CSS rules. Put yours here. This already contain a
basic reset and normalizer, root (:root{}) variables, document parameters ...
Compile scss/main.less and use css/styles.css in your project, like :
<head>
{ ... }
<link type="text/css" rel="stylesheet" href="vendor/deefaze/startless/src/css/styles.css">
{ ... }
</head>NB : On standard production, startless is not needed, you can deploy CSS in any ways :
- copy
css/styles.cssfile in your assets... - set the
outparameter inmain.lessfor targeting your assets... - use
lesscin terminal (require npm + less installation) and compile to your assets...