Results for css-what

Build multiple stylesheets based off globally defined breakpoints

Hooks into rails asset:precompile task to remove the BOM from any CSS files generated by SASS. Firefox < 52 has a bug when calculating SRI for CSS files with a BOM and removing it has no downsides so that's what we do.

This gem provides a configurable means for showing, via an updated <title> tag or CSS corner banner, what the current runtime environment is (development, staging, test, etc.) This functionality is never enabled for production, and for all other environments you can exclude specific ones.

Our own CSS reset picking the best ideas from several sources (Normalize 4, HTML4 Doctor...) and trying to add our own customizations (what we use as default in most of the projects we start, specially mobile settings).

CSS Media Requeries are a nice idea but don't cut down payload size. Serve only what is needed for each device. This gem lets you access device information in a Rails controller/view. Now be really responsive!

With the help of Nokogiri, SpiderCrawl will parse each page and return you its title, links, css, words, and many many more! You can also customize what you want to do before &amp; after each fetch request.

Miniparser works pretty simply. You pass the Gem some input (HTML, JS, or CSS), and it will validate it, return the validated status, then minify it, and return the minified version as either a file (path) and a text return, respective to what input it got

Guilded is a framework for building web based components centered around current web standards and best practices. The current framework is written in ruby, but could be ported to other languages. Guilded intends to provide a toolset for creating and consuming reusable web components. Currently, this problem domain is filled with JavaScript frameworks. These frameworks are wonderful and work very well. However, they do not degrade gracefully and are not accessible. Guilded seeks to provide the same level of "componentization" and ease of use without sacrificing degradability and accessibility. Guilded will achieve these goals by applying each technology at our disposal to do what it was intended. XHTML will be employed for content. CSS used for layout and styling. Behavior will be added to a component with JavaScript through progressive enhancement. The user will have the best experience with a Guilded component when CSS and JavaScript are enabled in their browser, but will still be able to use the component when CSS and JavaScript are disabled. Guilded will use jQuery as it's base JavaScript framework. jQuery was chosen because it lends itself to progressive enhancement due to the way it was authored. In addition, the tight integration of jQuery's selectors with CSS selectors is also highly desirable. When authoring a Guilded component, it is encouraged to write the behavior code as a jQuery plugin. This will allow the jQuery plugin to be used outside of the Guilded project, if desired. Guilded also seeks to provide a standardized CSS framework for creating layouts that are reusable and predictable. Guilded will utilize the currently existing RubyGems system to package its components. A new Guilded component will be packaged in a Gem and have a dependency on the Guilded gem. The Guilded gem contains the framework to build Guilded components. Update: Due to the quality components, etc. being generated by the MooTools community and the general quality of the library, we have decided to include support for it in Guilded as of release 0.3.0.

<p>Sass or the much better approach of scss is really helpful and a big silver bullet for my css structuring in ruby projects.</p> \ <p>Standard sass command works for whole directories or single files only. In general it gets the jobs we want done, but in practical usage i think the sass command tool is a little bit unconvinient. A common scenario for me is, \ that you have whole bunch of sass files, which you want to compile to a single compressed output file. But if you have splitted your sass files in component based modules and you want to watch the complete folder you have to care for dependency handling in each file, because each file will be compiled for its own.</p> \ <pre># compiling a complete folder with scss ~ $ sass css/scss:css/compiled</pre> \ <p>So converting the whole folder is not what i want, because i don\'t want to import for example my color.sass config file in each module again. Compiling a single file seems to be the better solution, and it works in general, as expected, but the devil is in the detail. </p> <pre># compiling a single file where the other files are imported. ~ $ sass css/scss/main.scss:css/compiled/main.css</pre> \ <p>If we change a file with impact to our main.sass file, the --watch handle will not get it, because it observes only the timestamp of the given main.sass.</p> <p>Here is it, where mindful_sass tries to help out. You use it according to the single file variant of sass, but it tries to observe the whole folder the given sass file is placed. If a timestamp of file in the sass folder or its children changes it will compile the specified main.sass again.</p> \ <p>This gem is not aimed to replace anything in the sass universe. It is only a wrapper to avoid the described unconvinience, and i hope that it gets useless as fast as possible, because the sass development gets this feature done for themselves.</p> \ <p>Thanks anyway to the sass developer team.</p>

"Harsh: Another Rails Syntax Highlighter," is just that - it highlights code in Rails, much like Radiograph or tm_syntax_highlighting. However, it does it well, _better_. Oh, and it also supports Haml, as well as ERb. And it comes with rake tasks. Firstly, it allows block form: &lt;% harsh :theme =&gt; :dawn do %&gt; class Testing def initialize(str) puts str end end &lt;% end %&gt; as well as the form the other plugins offer, which is text as a parameter: &lt;% harsh %Q{ class Testing def initialize(str) puts str end end }, :theme =&gt; :dawn For haml, harsh is implemented as a filter. First, add this to the bottom of your environment.rb: Harsh.enable_haml Then, to use harsh in Haml: :harsh class Foo &lt; Bar end However, haml's filters can't take options. So how on earth are we going to customize it to our heart's delight? Easily, my friend, fret not! Enter the BCL (Bootleg Configuration Line): :harsh #!harsh theme = all_hallows_eve lines=true syntax=css h1 { float:left; clear:left; position:relative; } It has to be the first line in the filter. You don't need the config line, though. Also, notice that you can have spaces between the arguments and the little = sign. Harsh also offers rake tasks for what tm_syntax_highlighting provides in generators, and a :harsh as a stylesheet-includer to load all syntax-highlighting files, as such: &lt;%= stylesheet_include_tag :harsh %&gt; The rake tasks for setting up your stylesheets are these: rake harsh:theme:list # lists available themes rake harsh:theme:install[twilight] # installs the twilight theme into /public/stylesheets/harsh/ rake harsh:theme:install THEME=twilight # also installs the twilight theme (for *csh shells) rake harsh:theme:uninstall[twilight] # removes the twilight theme rake harsh:theme:uninstall THEME=twilight # also uninstalls the twilight theme (for *csh shells) While purely informative, you can find out the available syntaxes as follows: rake harsh:syntax:list

== What's this? {ComicFury}[https://comicfury.com] is an excellent no-bullshit webcomic hosting site created and maintained by the legend Kyo. You should support them on {Patreon}[https://www.patreon.com/comicfury]! {Jekyll}[https://jekyllrb.com] is a highly regarded and widespread static site generator. It builds simple slowly-changing content into HTML files using templates. RageRender allows you to use your ComicFury templates to generate a static version of your webcomic site using Jekyll. You just supply your templates, comics and blogs, and RageRender will output a site that mimics your ComicFury site. Well, I say "mimics". Output is a static site, which means all of the interactive elements of ComicFury don't work. This includes comments, subscriptions, search, and comic management. === But why?! RageRender allows those of us who work on making changes to ComicFury site templates to test our changes before we put them live. With RageRender, you can edit your CSS, HTML templates and site settings before you upload them to ComicFury. This makes the process of testing changes quicker and makes it much more likely that you catch mistakes before any comic readers have a chance to see them. RageRender doesn't compete with the most excellent ComicFury (who's Patreon you should contribute to, as I do!) – you should continue to use ComicFury for all your day-to-day artistic rage management needs. But if you find yourself making changes to a site design, RageRender may be able to help you. == Getting started First, you need to have {Ruby}[https://www.ruby-lang.org/] and {Bundler}[https://bundle.io/] installed. The Jekyll site has {good guides on how to do that}[https://jekyllrb.com/docs/installation/] depending on your operating system. To set up a new site, open a terminal and type: mkdir mycomic && cd mycomic bundle init bundle add jekyll bundle add ragerender --group=jekyll_plugins Now you can add comics! Add the image into an <tt>images</tt> folder: mkdir images cp 'cool comic.jpg' 'images/My first page.jpg' The file name of the image will be the title of your comic page. And that's it, you added your first comic! If you want to add an author note, create a text file in a folder called <tt>_comics</tt> that has the same file name, but with a <tt>.txt</tt> extension: mkdir _comics echo "Check out my cool comic y'all!" > '_comics/My first page.txt' Or use HTML: echo "This is my <strong>first</strong> page!" > '_comics/My first page.html' Generate the site using: bundle exec jekyll build Or start a local website to see it in your browser: bundle exec jekyll serve # Now visit http://localhost:4000! === Customising your site You'll notice a few things that might be off about your site, including that the webcomic title and author name are probably not what you were expecting. You can create a configuration file to tell RageRender the important details. Put something like this in your webcomic folder and call it <tt>_config.yml</tt>: title: "My awesome webcomic!" slogan: "It's the best!" description: > My epic story about how him and her fell into a romantic polycule with they and them status: active genres: - Comedy - Romance defaults: - scope: path: '' values: author: "John smith" theme: ragerender Your webcomic now has its basic information set up. === Adding your layouts If you want to use your own layout code, then create a <tt>_layouts</tt> directory and put the contents of each of your ComicFury layout tabs in there, and then put your CSS in the main folder. The easiest way is to go to your Webcomic Management, click "Edit Layout", then in the box labelled "Useful", click "Download Layout Backup". Pass this file to RageRender, which will <tt>unpack</tt> it for you: bundle exec jekyll unpack mycomic-2025-09-13.cflxml You should end up with a full set of files like: _layouts archive.html blog-archive.html blog-display.html comic-page.html error-page.html overall.html overview.html search.html layout.css Now when you build your site, your custom templates and styles will be used instead. === Adding blogs Add your blogs into a folder called <tt>_posts</tt>: cat _posts/2025-05-29-my-new-comic.md Hey guys, welcome to my new comic! It's gonna be so sick! Note that the name of your blog post has to include the date and the title, or it'll be ignored. === Customising comics and blogs You can add {Front Matter}[https://jekyllrb.com/docs/front-matter/] to set the details of your author notes and blogs manually: --- title: "spooky comic page" date: "2025-03-05 16:20" image: "images/ghost.png" author: "Jane doe" description: "Some spooky mouseover text" keywords: [excellent, comic page, spooky] custom: # use yes and no for tickbox settings spooky: yes # use text in quotes for short texts mantra: "live long and prosper" # use indented text for long texts haiku: > Testing webcomics Now easier than ever Thanks to RageRender transcript: > The transcript contains a machine-readable version of all the text in your comic image. comments: - author: "Skippy" date: "13 Mar 2025, 3.45 PM" comment: "Wow this is so sick!" --- Your author note still goes at the end, like this! === Adding extra pages You can add extra pages just by adding new HTML files to your webcomic folder. The name of the file becomes the URL that it will use. Pages by default won't be embedded into your 'Overall' layout. You can change that and more with optional Front Matter: --- # Include this line to set the page title title: "Bonus content" # Include this line to hide the page from the navigation menu hidden: yes # Include this line to embed this page in the overall layout layout: Overall --- <h1>yo check out my bonus content!</h1> === Controlling the front page As on ComicFury you have a few options for setting the front page of you site. You control this by setting a <tt>frontpage</tt> key in your site config. - <tt>latest</tt> will display the latest comic (also the default) - <tt>first</tt> will display the first comic - <tt>chapter</tt> will display the first comic in the latest chapter - <tt>blog</tt> will display the list of blog posts - <tt>archive</tt> will display the comic archive - <tt>overview</tt> will display the comic overview (blogs and latest page) - anything else will display the extra page that has the matching <tt>slug</tt> in its Front Matter === Comics with custom HTML code You can use custom HTML code in place of an image for your comic page. Instead of creating an image, just create an HTML file in your <tt>images</tt> folder: cat '<video src="/files/my-animation.webm"></video>" > images/1.html === Multi-image comics You can add up to 12 images to each comic page on ComicFury. To do that in RageRender, add each image to an <tt>images</tt> key in your comic page: --- title: "Comic with many pages" date: "2026-04-20 16:20" images: - /images/first.png - /images/second.png - /images/third.png --- === Testing search pages Live search does not work in RageRender, as your site is statically built and can't respond to new data from the browser. However, you can simulate a search when you build the site to help test search results designs. To do that, add a `searchterm` to the search page using defaults in your `_config.yml`: defaults: - scope: path: '' layout: search values: searchterm: "my character" The search that gets performed will be somewhat similar to how ComicFury will search your comic, but may not be exactly the same. === Putting changes on ComicFury Once you're done making changes, you can <tt>pack</tt> your layout: bundle exec jekyll pack The resulting file can be uploaded to ComicFury by going to your Webcomic Management, clicking "Edit Layout", then in the box labelled "Useful", click "Restore Layout Backup". === Stuff that doesn't work Here is a probably incomplete list of things you can expect to be different about your local site compared to ComicFury: - Any comments you specify in Front Matter will be present, but you can't add new ones - Search doesn't do anything at all - Saving and loading your place in the comic isn't implemented - GET and POST variables in templates are ignored and will always be blank - Random numbers in templates will be random only once per site build, not once per page call == Without Jekyll RageRender can also be used without Jekyll to turn ComicFury templates into templates in other languages. E.g: gem install ragerender echo "[c:iscomicpage]<div>[f:js|v:comictitle]</div>[/]" > template.html ruby $(gem which ragerender/to_liquid) template.html # {% if iscomicpage %}<div>{{ comictitle | escape }}</div>{% endif %} ruby $(gem which ragerender/to_erb) template.html # <% if iscomicpage %><div><%= js(comictitle) %></div><% end %> You still need to pass the correct variables to these templates; browse {this unofficial documentation}[https://github.com/heyeinin/comicfury-documentation] or RageRender::ComicDrop etc. to see which variables work on which templates. == Get help That's not a proclamation but an invitation! Reach out if you're having trouble by {raising an issue}[https://github.com/simonwo/ragerender/issues] or posting in the ComicFury forums.

No description provided.

No description provided.

No description provided.

No description provided.

No description provided.

No description provided.

No description provided.

No description provided.

No description provided.

No description provided.

No description provided.

No description provided.

No description provided.

No description provided.