I want to know how to use Semantic-UI to codeigniter 3.x as frontend framework.
I want to use LESS and not css. thanks
First, it is important to understand that LESS is a CSS pre-compiler that extends the CSS language with features that allows creation of CSS that is more maintainable, themeable and extendable. But ultimately it creates CSS files that are used exactly the same as any other CSS file in a website.
In CodeIgniter you use Semantic-UI created assets the same way as any other CSS (or javascript) files by using a <link> tag.
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="semantic/dist/semantic.min.js"></script>
The CSS classes are used in "view" files exactly the same way any other CSS defined class. For instance, the following would put a button styled by Semantic-UI into a CodeIgniter "view" file.
<button class="ui button">Follow</button>
So, the short answer to your question is that you use Semantic-UI in CodeIgniter the same way any other frontend framework that produces CSS and Javascript.
How to use the tools required to customize Semantic-UI is way beyond the scope of what is a "good" question on Stackoverflow.
If you want to customize and build your own version of the UI, you have a steep learning curve ahead. You can start your learning on Semantic-UI's Getting Started page and on the Learn Semantic website.
I have done Semantic UI integration on my CodeIgniter based application starter: https://github.com/ivantcholakov/starter-public-edition-4
For compilation of your own visual themes you need to install locally on your development machine node.js, less.js, postcss/cssnano, they should be able to start from command line.
See the configuration file platform/common/config/less_compile.php there you can define by example your own visual theme. Also, have a look at the already created themes, you will see how to add your common Semantic UI customizations and your theme-specific styles.
add css link in your header and js in your footer
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">
<script type="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
Related
In my laravel 5.6 / vue.js 2.5.7/ Bootstrap4.1.0 application I want to set different color themes and I found this collection https://github.com/thomaspark/bootswatch
But how correctly to set them to my project? I tried to replace files
node_modules/bootstrap/dist/css/bootstrap.css
node_modules/bootstrap/dist/css/bootstrap.min.css
and cleared cache and rerun
npm run watch-poll
But no effect... Which is the right way?
Are there some tools to change color themes programmatically, say depending on logged user options ?
Adding a link of one bootswatch file in my layout file resources/views/layouts/app.blade.php, like:
<link href="{{ asset('css/darkly/bootstrap.min.css') }}" rel="stylesheet">
I see that colors of my layout of my pages is different, but I mean that in this case I ADD this css/darkly/bootstrap.min.css file to the EXISTING(ORIGINAL) bootstrap.min.css
and now I have 2 bootstrap.min.css files in my system.
Is it good decision?
I supposed that creators of bootswatch meant to REPLACE the original bootstrap.min.css file. How do you think?
And that is the question where original Bootstrap css(and bootstrap.js to) are attached to the project ?
in my layout file resources/views/layouts/app.blade.php a line:
that is a ref to my custom css file, the styles I add to the project.
I did not find how to skip attaching of the original Bootstrap CSS file...
Thanks!
Bootswatch is not meant to REPLACE the existing bootstrap CSS file. It is meant to work and OVERRIDE the styling rules from the default one, which means, load bootswatch css after you load the bootstrap css.
It would also be advisable to rename your downloaded bootswatch CSS file.
I have a website i am trying to build more for experience and practice. but i cant seem to get the nav bar to promperly show i dont know if i am referencing it correctly in the html file and also i dont know if my file structure is what it should be. any insight and help would be awesome.
I have seen where the .navbar methods are and they seems to be in the bootstrap.min.css file and i have changed and tried everyone of them to see if the bootstrap navbar will show.
It's hard to get the context that I would need just from the image that you posted but I see 2 things. you didn't include bootstrap CSS but you did include the theme. Refer to this SO post for the difference: What is the difference between bootstrap.css and bootstrap-theme.css?
As shown on the getting started page of bootstrap, your index page should have the following entrie
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
I also noticed that you are missing the start to your body tag but you have the closing for it. The browser will try to help you on this one but you should fix it to rule it out.
Just by looking and your image I can see there is an HTML error.
Your nav must be in the body tag.
The head tag must only include scripts, style sheets, meta tags and anything that is not "visible" for the user. The body tag contains everything else. Good luck!
I have having difficulties getting Kendo UI Map (JavaScript) to work in my application.
I am seeing the containing div load (it has defined width and height). However I only see the map controls appear on in the div and I do not see the map display at all.
I suspect it has something to do with the stylesheets no loading correctly.
I am not getting any javascript errors.
I verified that my kendo.common.min.css and kendo.default.min.css gets loaded before jquery does.
One caveat is that we are bundling our files. However I am not bundling the kendo css files. I added a link references on my given page.
<link rel="stylesheet" href="../../../../Content/Css/Shared/kendocss/kendo.common.min.css" />
<link rel="stylesheet" href="../../../../Content/Css/Shared/kendocss/kendo.default.min.css" />
The other css files that the application use are bundled as well as jquery and all of the javascript files (kendo js files included).
Is there a way to create and image slide like this http://viavoxproduction.com/ with bootstrap? If so I don't even know where to start.
Bootstrap javascript comes with a number of pre-created animations you can use. It might not make what you are looking to do perfectly, but it is at least a place to start.
Specifically, the bootstrap carousel has recently been updated to be much better.
http://getbootstrap.com/javascript/#carousel
Also, make sure you load your JS libraries, first with jquery (which in example below I pull from google's AJAX library which hosts these online), then boostrap js (min version for speed), then your custom code. For example at the bottom of your html page add:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
Good Luck!
I noticed that the theme code is missing from the KitchenSink in the final version of ST2. Are there any default themes that ship with the product? Also, are there any open source themes available? I'd like to have a few themes handy for demos so I can easily switch between them.
Yes there are, if you open up senchatouch2/resources/css you've got the default sencha-touch.css and then you have apple.css, android.css, bb6.css(blackberry).
<link rel="stylesheet" href="senchatouch2/resources/css/apple.css" type="text/css" />
I think following url will help someone
http://developerextensions.com/index.php/sencha-touch-2-themes-builder
---Add the following link to your sencha-touch-2 app's html file.
---DEShowThemeBuilder(true); //function to show the theme builder
---DEShowThemeBuilder(false); //function to hide the theme builder
<script type="text/javascript" src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/sencha2/ux/themeBuilder/themeBuilder.js"></script>