how to make semantic ui framework "right-to-left" supported ? is there
anyway to make it rtl support in installing steps or not ?
You can enable RTL support under the following scenarios:
1. Fresh Installation
go to the document root of your project and install semantic-ui through npm
npm install semantic-ui --save
modify semantic.json file in document root to enable right to left support as following:
"rtl": true
in your terminal change directory to semantic directory
cd semantic/
run the following gulp task to build all files and save it to destination folder
gulp build
gulp will auto-detect the RTL support and build the RTL version of css files and save them in dist folder, now a very important final step is to reference the RTL version of semantic-ui css file in your index.html or web page as following:
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
2. Existing Installation
in your terminal change directory to semantic directory
cd semantic/
Clean the destination folder using the gulp task provided by semantic-ui framework
gulp clean
modify semantic.json file in document root to enable right to left support as following:
"rtl": true
run the following gulp task to build all files and save it to destination folder
gulp build
gulp will auto-detect the RTL support and build the RTL version of css files and save them in dist folder.
Now you need to replace the reference in your html page from
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.css">
to
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.rtl.css">
first:
navigate to your project root and then fire: npm install semantic-ui --save
and wait for all done.
second:
edit semantic.json file (located in project root) and change "rtl": false to "rtl": true
third:
navigate to semantic dir(cd semantic) and fire: gulp build and then gulp watch.
Or if you where not installing it by npm and gulp, you may get the rtl versions from RTLCSS website. They also provide a cdn, or you can download the css and js file and use them in your sources.
Related
My dev server is running on node live-server. My prod will be a LAMP server.
I have normalize.css inside my node_modules server.
In my index.html I have
<link rel="stylesheet" href="/node_modules/normalize.css">
<link rel="stylesheet" href="css/styles.css">
I don't want files linked to node_modules directory.
I want something like
<link rel="stylesheet" href="css/normalize.css">
Is this doable? I have lot of other css and js files like this.
Update 1
Let me clarify, this app is not a node app nor a php app, It has only html, css and js files. Everything runs on client side, But.. we want to leverage the latest client side dev tools for JS and CSS and upload the final build to prod server.
There are lots of possible solutions. I can suggest using a task runner(gulp) which will copy these static files to a public directory like dist/assets.
Install gulp on your machine
npm install --save-dev gulp
Create a gulpfile.js file in your root directory with following code.
var gulp = require('gulp');
gulp.task('default', function () {
gulp.src('/node_modules/normalize.css')
.pipe(gulp.dest('./dist/assets'));
});
Run gulp
gulp
Update your index.html as below
<link rel="stylesheet" href="/dist/assets/normalize.css">
Please go through the documentation of Gulp for more information
You can also try Grunt or Webpack
You could use Webpack for bundling, which would copy css resources to the dist and replace references to it. It doesn't support html files as entry points though, so you'd need to work around that by probably using html-webpack-plugin.
anyway, as was mentioned by others - server decisions are weird.
I am installing bootstrap and jquery with npm. I want only ( not the sass files ) the jquery and bootstrap files to be installed in web/vendor and not in node_submodules/... Is that possible?
So my symfony structure looks like this
app
bin
composer.json
composer.lock
Gruntfile.js
node_modules
- bootstrap and jquery files are here <<
package.json
src
tests
var
vendor
web
- vendor
- I want my bootstrap and jquery files here <<
Or should I just download bootstrap and jquery and place them myself in web/vendor and forget about node_modules.
See npm local install package to custom location.
Using your approach is fine for a small project, but if you plan on building a more ambitious application, you should really look into using a build tool like webpack, gulp, or grunt. Then you can package up your javascript dependencies from your node_modules into a single file and have it generated into your public js folder.
How can I use preprocessors in my ng2 app? I'm using angular-cli and the original docs are not clear enough for me. Besides, I want to use the styles globally, not only component-wide.
Install your CSS compiler: Search npm for your preffered extension language.
Tested and recommended for SASS: npm install node-sass --save-dev
Add your "to be processed" file to src/assets/css (with the normal file extension, e.g. .sass)
Add the style ref to the index.html file:
<link rel="stylesheet" href="assets/css/whatever.css"> - note the .css file extension.
Update your build file (angular-cli-build.js) with the folder of your "to be processed" files. This object HAS to be placed before the vendorNpmFiles-array.:
sassCompiler: { //(lessCompiler or stylusCompiler)
includePaths: [
'app/assets/css' //Only the folder, not your file!
]
}
Bonus answer: Why don't I use direct paths to files instead of the includePath? Because you may want to use variable files, so it could get really messy with absolute paths!
The Angular CLI has built in support for Sass/SCSS, Less, and Stylus. See here.
As of the Webpack update to the CLI, there are no extra steps other than renaming your stylesheets with the appropriate extension.
For the previous System.js/Broccoli versions, it was also necessary to install the preprocessor packages to your app, like so: npm install node-sass --save-dev.
It will automatically process the stylesheets within and under the src folder.
I am currently trying bootstrap and attempting to use grunt to process my less source files and generate my css.
I have achieved this by installing bootstrap and grunt via npm and then copying the generated bootstrap folder over to my project folder.
myproject/bootstrap
I have then run npm install to setup grunt based on the bootstrap package.json.
Once the install has completed the boostrap directory contains over 20 thousand files.. is this normal?
I also wanted to change the directory from dist...to a css directory within the myproject folder so my dir structure would look something like this
myproject/src/bootstrap - All the src grunt/less files would go here.
myproject/public/css/ - This would be the new dist directory for the resultant css files.
However I have attempted to adjust the Gruntfile.js in order to change the dist directory... but there I have not manged to get it to export to anything outside of the source bootstrap directory?
I'm new to Yeoman. I've generated an Ember.js project with
$ yo ember
so I needed to install Twitter Bootstrap separately running
$ bower install bootstrap
but running
$ grunt build
does not deploy the component css files to the dist/styles directory in the same way that it does for js files to dist/scripts
How do I include component css files in my project distribution and reference them in my html?
When you are integrating the css in your html files you usually do it like this (I use bootstrap as example):
<link rel="stylesheet" href="bower_components/sass-bootstrap/bootstrap-2.3.2.min.css">
If you run grunt buildthis won't deploy the css files. To have them deployed in your project wrap it in the usemin comments, just like you do with the javascript stuff:
<!-- build:css styles/bootstrap.css -->
<link rel="stylesheet" href="bower_components/sass-bootstrap/bootstrap-2.3.2.min.css">
<!-- endbuild -->
This will then deploy this css file as styles/bootstrap.css in your dist folder and update the references in your html files just like it does with the javascript references.
I recently added support for Twitter Bootstrap to the generator, so if you upgrade to the latest version you will get a prompt for it.
In general, if you want to reference components, you should not copy them around to the styles or scripts folder but link directly to the components folder, e. g.
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
Otherwise, you lose all the benefits of using a package manager except for the easier initial installation.