Giter VIP home page Giter VIP logo

romanesco-soil's Introduction

What is Romanesco?

Romanesco is a collection of tools for prototyping and building websites. It integrates a front-end pattern library directly into a CMS (MODX Revolution).

It aims to combine various best practices like code reusability, iterative development, a content-first approach and modular, responsive content editing into one coherent ecosystem.

For more information, visit: https://romanesco.info/

Project structure

Romanesco is spread out across a few repositories:

  • Romanesco Soil (this repository)
    A pre-configured MODX installation, as starting point for your project.
  • Romanesco Patterns (only for development)
    A pattern library to manage all reusable elements from a central repository.
  • Romanesco Backyard
    A MODX package that fuses a few things together internally.
  • Romanesco Data
    A Gitify extract for updating Soil and Pattern data per project.
  • Romanesco Theme
    A custom styling theme for Fomantic UI1, the front-end framework used.
  • Romanesco Seed
    A command line installer, to preserve our sanity.

The elements in the pattern library are (loosely) structured according to the atomic design principles, as first outlined by Brad Frost. If you're not familiar with this concept, I suggest you read up on that first. It's incredibly useful.

Romanesco differs from the original PatternLab in 2 distinct ways:

This means that when you are done installing Romanesco, you have a working website. With CMS and decent styling.

The only thing you need in order to publish your site is fresh content. Well no, that's not entirely true:

Paid software alert

If you want to publish your project to a live domain, you'll need a license for ContentBlocks and Redactor. These are commercial extras for MODX, developed and maintained by ModMore.

ContentBlocks adds an intuitive and flexible drag&drop interface between MODX and the actual HTML of the page, making it a lot easier to manage responsive content. In fact, I wouldn't even bother building websites anymore without ContentBlocks, so I consider it an essential part of Romanesco.

Redactor is the rich text editor that's available inside the blocks and all throughout MODX. In theory, you could replace this by a free editor like TinyMCE, but Redactor has proven to be a rock solid product over the past many years. ModMore support is also top-notch, so I have no issues paying for it.

A single ContentBlocks license is €79 and for Redactor, that's €25. The people at ModMore are very considerate: you can try their extras for free during development.

So: publishing your project will require you to purchase a license, but getting started with Romanesco is still free at this point. If you're OK with that, then let's move on!

Installation

Romanesco is not exactly a plug and play environment. Many moving parts means it requires a fair bit of configuration (and patience) to get everything up and running.

Luckily, there's now a command line installer available that automates a large portion of this process. Learn how to get started here.

For the persistent and the brave: you can also install everything manually.

Demo

To get an idea of what's included in this library and what you can do with it, visit https://romanesco.info. Everything you see there is created with Romanesco. You can also view the pattern library, which is automatically generated from the available components.

Yes, but... What is a Romanesco?

The real romanesco is a curious crossover between a broccoli and a cauliflower. Its flowers are shaped by self-repeating mathematical patterns, forming a mesmerizing collection of green fractals, spiraling up and multiplying in perfect resonance with Fibonacci's golden ratio. The result is a vegetable that looks almost too stunning to be eaten!

To me, that perfectly symbolizes my intention with this platform: to create something reusable based on common patterns, without sacrificing aesthetics and uniqueness.

Fractal Broccoli

1 Romanesco switched to Fomantic UI, a community fork of the Semantic UI project.

romanesco-soil's People

Contributors

hugopeek avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

fractal-farming

romanesco-soil's Issues

Take a look at margins / paddings inside full-width layouts

When adding a tiled overview in a full-width layout for example, the optimal output should be completely borderless. This will add to the visual "tightness" of the functionality.

Right now, there's still padding on the top and bottom of the section, and on the bottom of the overviews (due to the nested class).

Class="lead" werkt niet

Ik kan in de editor 'Lead text' wel selecteren, maar de klasse wordt daarmee niet ingesteld. Headings werken wel. De formatting van deze stijl komt ook niet mee in MODX (waarschijnlijk omdat 'ie 'm niet pakt).

Find a way to reduce size of SUI assets

500kb for CSS is simply too much. Maybe something like UnCSS can help grind the code and remove unused styles. But also per project disabling of components should become routine.

Include Semantic UI theme in Soil repository

At first, I thought it would be handy to maintain the Romanesco SUI theme in its own repo, separate from Soil. For better portability and to keep styling and structure apart a bit still (so the styling could be updated separately for example).

But after a few months in practice, it seems to be more bothersome than handy. It's a lot of extra work to keep pulling and committing edits to the theme for every project, and I'm having a hard time keeping track of which of the theme a project is using, and if the latests edits are pushed already, etc. etc. It's one repository too many.

So since we're going to pull directly from Soil as an upstream repository anyway, we might as well include the Semantic UI theme in this repo. Changes can be submitted back to the Soil repo via pull requests.

This also takes care the problem that styling issues are not always just related to the theme alone. Sometimes it also involves classnames or HTML structure for example, so better to have it all in 1 repo from now on.

Problems with Gitify _data files containing data from different package versions

This potentially breaks some components after a build, since a newer version might have been installed on gitify install, which would then be overwritten by files from an older version.

Possible solution is to work with package versions in the .gitify file. Only thing is: modmore packages (which cause the most problems in this case) don't support adding the version to the package name.

Reserve fixed range of ID's for CB elements too

Otherwise, the front-end pattern library won't work.

Ok, so the ID's for the MODX elements remain generic, so there won't be any problems when the package is being built. But the ID's for all the ContentBlocks elements required by PatternLab will have to be fixed. Looking at the properties column for CB resource, it seems it's only looking for CB ID's there: layouts and fields. So if we do the same thing as with the Collections (create a pool of reserved ID's), things should be OK..

And if we don't enter this threshold in the database of the development install (Nursery), maybe it will become easier to create and transfer new elements to the base install with the threshold (Soil). Hmm....

Refactor Image ContentBlock

Add enlargement as option (FancyBox), add responsive options maybe.. There's a whole lot that can be done here.

  • Field option for fluid image
  • Field option for bordered image
  • Field option for overruling thumbnail size

Refactor Image ContentBlock

Add enlargement as option (FancyBox), add responsive options maybe.. There's a whole lot that can be done here.

Parsing issues with CB's inside Nested Layouts

screenshot from 2016-08-31 17 05 20

This seems to be caused by the fact that the HTML for the nested layouts is not directly inside the configuration of the content block anymore, but in a chunk instead..

So this code in the Template field doesn't work in some cases:

[[$cbLayoutSidebarContentNested?
    &main=`[[+main]]`
    &sidebar=`[[+sidebar]]`
    &sidebar_width=`[[+sidebar_width]]`
    &padding=`[[+padding]]`
    &alignment=`[[+alignment]]`
    &divider=`[[+divider]]`
]]

But placing the content of the cbLayoutSidebarContentNested chunk here directly solves any parsing issue you might encounter.

I triple checked the generated HTML in the content field, and the backticks all seem to be in the right place. But somewhere inside the above chunk call, it stumbles over the backticks anyway apparently..

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.