search

doabit / semantic-ui-sass

Semantic UI, converted to Sass and ready to drop into Rails & Compass.
MIT License
1.15k stars 192 forks source link

How to use semantic-ui-sass with jekyll-assets pipeline? #100

Closed vinamelody closed 6 years ago

vinamelody commented 7 years ago

Hi, I'm beginner with Jekyll but would love to use Semantic UI Sass. Can you give some tips on how to incorporate it? I removed the default gem based minima theme on version 3.4.0, and installed jekyll-assets pipeline with the minima's css. Not really sure how to move forward ... Thanks for helping

doabit commented 7 years ago

@vinamelody Sorry, i haven't used Jekyll, if you want to use it without rails, i think you should use it with compass https://github.com/doabit/semantic-ui-sass#semantic-ui-sass-with-compass

vinamelody commented 7 years ago

Thanks for the tips @doabit , giving it a try :)

vinamelody commented 7 years ago

Sadly ... I found that Compass is no longer maintained :( https://github.com/Compass/compass

doabit commented 7 years ago

@vinamelody Yes, but it still works.

vinamelody commented 7 years ago

alright 👍

vinamelody commented 7 years ago

Hi @doabit if I may ask, after installing new compass project, I take all the default and create a simple index.html and link it to the css. But how about the javascript? Can I do something like this

<link rel="stylesheet" href="stylesheets/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="javascripts/main.js"></script>

And inside main.js, I just put a line //= require semantic-ui , but this doesn't seem to work..

doabit commented 7 years ago

@vinamelody Compass only work for sass, if you want to use javascript, you can copy https://github.com/doabit/semantic-ui-sass/blob/master/app/assets/javascripts/semantic-ui.js to /javascripts/main.js, if you don't need all modules, you can use /javascripts/semantic-ui/xxx.js, eg:

<link rel="stylesheet" href="/stylesheets/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/javascripts/main.js"></script>

or 

<link rel="stylesheet" href="/stylesheets/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/javascripts/semantic-ui/api.js"></script>
<script src="/javascripts/semantic-ui/accordion.js"></script>
vinamelody commented 7 years ago

Oh wow... you're right haha just testing out the modal code example and now it works! Okay I guess Compass' default project does not have the complete font and image assets so I've got to figure them out one step at a time lol Thanks a lot!